Support: Chrome with flags (layout worklet)

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
Your next big idea.
fake items
1.EXPLORE
2.GROW
3.INNOVATE
4.ACCELERATE
5.NO LIMITS

The 3rd element

SVG Path

@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;
  }
}