As a follow-up to Jhey’s recent post on responsive motion paths, Michelle Barker notes that another approach could be to just transform: scale() the whole dang element.
The trade-off there is that you’re scaling both the path and the element on the path at the same time; Jhey’s approach only makes path flexbile and the element stays the same size.
Calculating scale is a really cool trick I think and one we’ve also covered before.
You can also use the transform method to visually change the size of the path but not the elements on it. You just need to invert the scaling on the child elements.
So where the parent gets
scale( --var(x) )you can doscale( calc( 1 / --var(x) ) )on the child element to transform it back the other way.You’d probably want to account for spacing issues that arise but if you just have one item on the path it might be less of a problem.