Post

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 codepen.io/una/full/ogz... *(just let me have my Mom joke)

let us use shape() in an SVG path d, and let us use achor-position within shape, then I'll get excited :P

You could use anchor within an SVG if you give it the right naming! Why would you need shape() inside of SVG? Don’t you already have the ability to draw shapes?

do you mean having the anchor target be an svg element? If so, that's not quite what I mean. I mean doing something like this (this is a bit simplified, of course) svg > path.connector { d: shape(from anchor(--socket-A center) line to anchor(--socket-B center)); }

The way I had to do this was to have a wrapper div with a resize observer that has its corners anchored to socket-A and socket-B. Inside that are two reference points, and an svg. On every resize observer cb, I find the position of the reference divs and re-draw the SVG path from scratch.

Do you have something like a codepen for this? I was (yet unsuccessfully) experimenting with something similar

arcanigen.thatrobhuman.com is the final thing. I dont have a snippet off hand.

Had a look, I get the gist of it, thanks for the link! A while back I made a quick n' dirty prototype here which is similar: codepen.io/maikelkrause... It doesn't have the JS part though to dynamically update the SVG (currently it breaks in most orientations). Need to get back to this at some point

well, just in case: codepen.io/ThatRobHuman...