css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Sometimes, some tools like Adobe Illustrator only apply a basic CSS transform on the path, which can lead to problems when you want to animate it. This GUI applies transforms on an SVG path and computes the actual transformed path.


  1. Very cool concept. Beautiful UI and great job making it very intuitive. Since the transformations are 2d maybe you should use a 2x2 matrix instead?

  2. This is amazing, awesome job. Sounds like Adobe needs talent like you.

  3. Very cool. If Adobe ever has a job opening involving this kind of stuff, take it.

  4. @SamyBencherif You need a 3x3 matrix to compute 2d transformations (and a 4x4 matrix to compute 3d transformations).


    @nitronova @hellol11 ahah, I think they already have people much more talented than me, but that would be awesome! :D

    Anyway, thank you all for your comments!

  5. Ah so that's why I've never been able to get translations out of my transform matrices. Thanks! That diagram will really come in handy.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.