# SVG 3D transformations

**URL:** <https://talk.observablehq.com/t/svg-3d-transformations/4013>\
**Category:** Show and tell\
**Created:** [October 14, 2020, 1:35pm UTC](https://talk.observablehq.com/t/svg-3d-transformations/4013 "2020-10-14T13:35:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanderevers](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sanderevers/32/3753_2.png) [@sanderevers](https://talk.observablehq.com/u/sanderevers)\
**Post date:** [October 14, 2020, 1:35pm UTC](https://talk.observablehq.com/t/svg-3d-transformations/4013/1 "2020-10-14T13:35:13Z")

</div>

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](https://observablehq.com/@sanderevers/svg-transformations)

I am still amazed by my own creation! 🕶