Hello friends. 💜
Our mate George has been making some damn cool generative SVG biz recently. So we decided to get him in for a chat!
Everyone, meet George – George, meet everyone!
Cassie – Thanks for chatting to us and sharing some of your work George! What do you enjoy most about using SVG as a medium for generative art?
George – Oh, for sure! Thanks for having me!
There's a whole bunch of reasons why I love generative SVG, but to name a few...
- It’s infinitely scalable/responsive by nature. The same source code can produce a huge A1 print, or render perfectly on a narrow mobile screen. Perfect for folks who want to explore different mediums!
- It’s a joy to debug, making it ideal for generative art beginners. At some point when making generative art, your code may not function quite as you would like it to. When this happens (as SVG has a DOM) you can fire up dev-tools, inspect the SVG element, and examine it’s structure. To me, this is much easier than debugging something like
<canvas>You'll track down that pesky bug in no time!
- It’s got superpowers built-in. SVG comes with lots of powerful and easy-to-use filters/effects right out of the box.
feDisplacementMap, for example, could easily be mistaken for WebGL wizardry! This stuff is perfect for adding sparkle to generative work. ✨
💡 George's SVG tip
To me, generative art is all about randomness.
Here’s a tip I love for creating your own randomized “stroke styles” for <path> elements...
Using SVG’s built-in getTotalLength and getPointAtLength methods, you can extract any number of equidistant points plotted along a <path>. You can then iterate through these points and use their { x, y } values to position anything you like!
There are endless use cases for this, but in my example, I am using the points to position
✏️ Article
Feeling inspired to dig into generative SVG but don't quite know where to start? George has you covered with this wonderful tutorial.
Make your own googly-eyed blobbos and learn a bunch while having fun.
Read 'Generative blob characters using SVG!'
✨ Fun demos
Untitled 20 -- view demo
Liam Egan built this gorgeous SVG generator so he could export the results and plot them using his AxiDraw! You can see the physical result here.
Mutable Gallery -- view online
Heydon Pickering's Mutable Gallery is such a cool concept - You can navigate around a digital exhibition, customize artwork and even download your own SVG artwork to put on your wall.
Generative SVG + animation w/ GSAP and React -- view demo
This minimal demo by Natalia is just gorgeous. It's great to see React and Greensock working nicely together to grow a little generative garden.
Generative + Customisable SVG Social Images! -- view demo
It seems fitting to finish off the demos with another from George! This pen lets you create random social media thumbnails. The text is editable and you can click to generate new random styles. Generative art - but with a practical use case. Love it.