🏠 back to Observable

SVG 3D transformations

I still don’t know if I should call it a dirty hack or an elegant trick, but I created a template literal tag that gives you 3D power in plain SVG. The idea is that you define an element like this:

svgt`<line x1=${10} y1=${20} ${30} ${""} x2=${40} y2=${50} ${60}/>`

and perhaps create an SVG document full of these elements. At the end you apply a 3D transformation matrix, for example one that rotates (x,y,z) to (y,z,x) - and it is rendered as

svg`<line x1=20 y1=30 x2=50 y2=60 />`

It’s even super useful for 2D transformations, because it allows you to circumvent the annoying effect that strokes and text transformed along with your shape coordinates!
https://observablehq.com/@sanderevers/svg-transformations

I am still amazed by my own creation! :sunglasses:

2 Likes