Simple rectangles and ellipses might not be enough for creative designs. Frames can be created to customize how the content is structured and organized in more elegant ways. SVG can be used to create these frames by using vector graphics but it does not support responsive updates in [x, y] axes (such as percentages and CSS calc()) and creating certain effects such as line drawing becomes difficult.

ARWES Frames comes with a few built-in frames and it can be a solution to create custom responsive and dynamic SVG elements along with interactive animations and effects. It is not a general purpose canvas renderer but rather focus on structural panels, containers, or separators for content.

For new frames, if they can be created with simple SVG, it is better than using ARWES Frames because of simplicity, compatibility, and performance. Make sure to read Scaling SVG and check out the main features you can use to create graphs with SVG and CSS such as clipping and masking, patterns, or filters. Also, check out some alternatives such as Augmented UI or Rive. Otherwise, ARWES Frames can be the solution.

Out-of-the-box Frames

The framework provides a few out-of-the-box frame components which can be styled and animated.

They all create SVG elements dynamically with different names and CSS variables for easy customization.

• [data-name="line"] for SVG path elements as lines or polylines.
  • --arwes-frames-line-color for stroke color.
  • --arwes-frames-line-filter for filter effect.
• [data-name="bg"] for background shapes.
  • --arwes-frames-bg-color for fill color.
  • --arwes-frames-bg-stroke for stroke color.
  • --arwes-frames-bg-filter for filter effect.
• [data-name="deco"] for decorative elements.
  • --arwes-frames-deco-color for fill or stroke color.
  • --arwes-frames-deco-filter for filter effect.

Designing Frames

It is possible to generate any SVG using JavaScript, but since the SVG elements will be dynamically created in runtime, the simpler the shapes the better for both performance and maintenance.

There are many native and web applications to design SVG such as:

Developing Frames

Once the SVG to be used as a frame is designed, it can be developed into a responsive and dynamic custom SVG. Unfortunately, there is no visual way to implement them, it has to be a manual process, it is limited in the type of SVG elements to create, and a decent amount of knowledge and experience in SVG is required.

There are great resources on Internet to learn about SVG in depth if needed such as:

For example, take this easy SVG to use as a frame:

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>

It consists in 3 SVG elements, two path elements for both the lines, and a rect for the background.

The first path element is the top line. It consists in 3 points, left-top corner M 0.5 1, right-top corner H 200.5, then it goes downward for a certain length V 21.

<path d="M 0.5 1 H 200.5 V 21" stroke="#20DFDF" />

The left-top corner point will always be static since no matter how it is resized it will be in the same place. But the right-top corner point depends on the size width of the SVG container. For this, it can be defined with a dynamic percentage calculation. Finally, the last point can be moved downwards a specific length statically.

A frame definition would be a JavaScript object with all the frame elements to render. The first frame element could look like:

{
  type: 'path',
  path: [
    ['M', 0.5, 1], // x,y pixels
    ['H', '100% - 0.5'], // x = svg_width * 100% - 0.5 pixels
    ['v', 21] // Lowercase "v" which is relative to prev point.
  ]
}

All other properties such as stroke, class, or style attributes can be defined like:

{
  type: 'path',
  name: 'line', // [data-name] attribute
  className: 'my-frame-line', // class attribute
  style: { // CSS properties.
    stroke: '#20DFDF'
  },
  path: [
    ['M', 0.5, 1],
    ['H', '100% - 0.5'],
    ['v', 21]
  ]
}

The final frame elements definition could be like:

[
  {
    type: 'path',
    style: { fill: 'none', stroke: '#20DFDF' },
    path: [
      ['M', 0.5, 1],
      ['H', '100% - 0.5'],
      ['v', 21]
    ]
  },
  {
    type: 'path',
    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'
  }
]

The final frame can be now resized as desired with any other HTML/SVG element:

Basic mathematical calculations are supported within the frame elements definition and the percentages in [x, y] axes are automatically calculated where it applies.