However I think I would still use SVG for these sorts of things, especially since they can easily be manipulated, animated and are more mathematically declarative than CSS anchor positioning.
I think the sweet spot for this CSS feature is not having to do complex workarounds with calc, positioning, transforms or JS in order to have more control over positioning elements relative to others. Container queries have a similar use case.
Both of these features (as well as CSS grid) are born out of the same underlying issues:
- HTML and CSS are not orthogonal in terms of layout, but very tightly coupled
- Trees are a fundamentally crippled data structure to express layouts. Almost every sufficiently complex layout wants to be represented as a graph or a matrix. Trees are fine until they aren't.
Comments
Neat examples!
However I think I would still use SVG for these sorts of things, especially since they can easily be manipulated, animated and are more mathematically declarative than CSS anchor positioning.
I think the sweet spot for this CSS feature is not having to do complex workarounds with calc, positioning, transforms or JS in order to have more control over positioning elements relative to others. Container queries have a similar use case.
Both of these features (as well as CSS grid) are born out of the same underlying issues:
- HTML and CSS are not orthogonal in terms of layout, but very tightly coupled
- Trees are a fundamentally crippled data structure to express layouts. Almost every sufficiently complex layout wants to be represented as a graph or a matrix. Trees are fine until they aren't.
Your last sentence is very interesting to me. Can you explain what you mean? Or suggest something to read?