7 ms·
I like this kind of compromise where illustrator etc generates the SVG but you can read elements in the actual text so you can animate or transform with css or
by dillondoyle 6y ago
I like this kind of compromise where illustrator etc generates the SVG but you can read elements in the actual text so you can animate or transform with css or js.
Fir example I recently made this 'hack' for gradient transform. even 'hacking' that was easier than maintaining and understanding complex canvas JS - at least to me.
https://4degreesdigital.com https://4degreesdigital.com
- ROARosen 6y agoLove it! I'm just wondering, aside from the animation part do you ever need to edit an Illustrator-generated svg?
- nikkwong 6y agoI do personally for color control. You can see my heavy use of SVGs here at a site I'm in the middle of implementing [0]. For example, if you look in the :root {} you will see a lot of CSS variables that are declared and which manipulate their HSL value based on base variables like --hue. The SVGs implement these. So you can change the global --hue, and the hue of all the SVG elements on the page will change. I've modified output SVGs from figma/illustrator to reference a variable rather than a hardcoded fill i.e. <path fill="red"> becomes <path fill="var(--base)"> That's a simple example, you can go further to change relative saturation and lightness as well, which I also do with CSS calc(). It's fun! [0] www.holysnacks.us
- dillondoyle 6y agoi like the sun rays!! I do love the mix of css vars into SVG. it makes a lot of sense to me too.
- ROARosen 6y agoWow I never thought of doing animations that way. Great stuff!