SVG Path layout

The new CSS Layout API (Houdini) let you define your own custom layout. Here’s a quick attempt at making an SVG path layout.

As you can see, add display: layout(svg-path) and set custom properties:

• --path, an SVG path as defined in CSS, eg --path: path('...')
• --viewbox, an SVG viewbox, eg --viewbox: 0 0 1000 400. If no viewbox is defined (or set to none), viewbox will be computed from SVG path (best fitted). If a fixed height is set, viewbox will be scaled accordingly and no longer respect aspect-ratio
• Alignments
  • --justify-items | --align-items: anchor-start | center | anchor-end
  • --justify-self | --align-self: anchor-start | center | anchor-end
  • current CSS properties coul have been used (but new custom value couldn’t be created right now)

Also, two properties exist:

• --layout-mode: absolute (default) | contain. contain sets elements’ position as they will not overflow (fixed width needed)
• --path-loop: no-loop (default) | loop (automatically set to loop if path ends with letter ‘Z’). Helps if first and last element should not be at the same position

@supports (display: layout(id)) {
  .el.is-loaded {
    display: layout(svg-path);
    --justify-items: center;
    --align-items: anchor-end;
    --path: path("M112,298.6c62.4-43.5,112.9-68.2,309.4-28.2c214.5,43.7,320,17.6,452.9-138.8");
    --viewbox: 0 0 1000 400;
  }
  .is-loaded > div:nth-child(3) {
    --justify-self: center;
    --align-self: anchor-end;
  }
}