React Frames

ARWES provides a frames API to create responsive vector graphics. Make sure to read the Frames Fundamentals for context.

All of the frames are by default with CSS position: absolute and taking full size of the closest positioned parent. This pattern is an easy way to make the frame responsive. This can be removed with the component prop positioned={false}.
Default styles for stroke, fill, and filter can be removed with styled={false}.
Default animations for the animator system can be removed with animated={false}.

Out-of-the-box Frames

There are a few frames which can be used right away with a few configurations.

For example, the octagon frame:

import { FrameOctagon } from '@arwes/react'

<div style={{ position: 'relative', width: 300, height: 300 }}>
  <FrameOctagon
    style={{
      '--arwes-frames-line-color': 'hsl(180deg 75% 50%)',
      '--arwes-frames-bg-color': 'hsl(180deg 75% 50% / 10%)'
    }}
    animated={false}
  />
  <div style={{ position: 'relative' }}>
    Futuristic Sci-Fi UI Web Framework
  </div>
</div>

Check out the Playground for more examples on frames.

`<FrameBase>`

Implementing custom SVG frames can be done with the <FrameBase> component. All frames provided by the framework use it behind the scenes.

Using this SVG example:

With the following SVG source code:

<svg
  width="201"
  height="102"
  viewBox="0 0 201 102"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="M 0.5 1 H 200.5 V 21" stroke="#20DFDF" />
  <path d="M 200.5 101 H 0.5 V 81" stroke="#20DFDF" />
  <rect x="5.5" y="6.5" width="190" height="90" fill="#20DFDF" fill-opacity="0.1" />
</svg>

The following frame definition can be created:

import { type FrameSettings } from '@arwes/react'

const frameSettings: FrameSettings = {
  elements: [
    {
      type: 'path',
      name: 'line',
      style: { fill: 'none', stroke: '#20DFDF' },
      path: [
        ['M', 0.5, 1],
        ['H', '100% - 0.5'],
        ['v', 21]
      ]
    },
    {
      type: 'path',
      name: 'line',
      style: { fill: 'none', stroke: '#20DFDF' },
      path: [
        ['M', '100% - 0.5', '100% - 0.5'],
        ['H', '0.5'],
        ['v', -21]
      ]
    },
    {
      type: 'rect',
      style: { fill: 'hsl(180deg 75% 50% / 10%)', stroke: 'none' },
      x: 6,
      y: 6,
      width: '100% - 12',
      height: '100% - 12'
    }
  ]
}

Which can be used to render the frame along with other HTML/SVG elements like:

import { FrameBase } from '@arwes/react'

<div style={{ position: 'relative', width: 300, height: 300 }}>
  <FrameBase settings={frameSettings} />
  <div style={{ position: 'relative' }}>
    Futuristic Sci-Fi UI Web Framework
  </div>
<div>

Which would responsively render like this:

Check out the Playground for more examples.