SVG is a fantastic medium for generative art. It can scale to any resolution, is a joy to debug, and has a multitude of incredible filters/effects ...
For further actions, you may consider blocking this person and/or reporting abuse
Nice article. I've used dynamically generated SVG in a couple of work projects, as well as personal projects, and found it really straightforward and flexible.
One suggestion I would make: it's also possible to dynamically render SVG with a component-based framework. I've managed that with Angular (some hoops to jump through) and Svelte (straightforward). I would expect it's possible in React but haven't tried yet...
Why would you do that? It allows you to write SVG markup inside component templates and then dynamically combine these components as you wish: so you can create component-based SVGs. One major benefit of this is that you can write SVG mark-up directly rather than generating it via code. I personally don't like the approach of manually setting attributes via method calls (D3 I'm looking at you) when I can simply write them directly in my markup. An example from Svelte:
Here's a rather mundane chart to demonstrate the principle; and something more fun :)
One word of caution though: from what I understand browsers are not always good at optimising animation in SVG - especially Chrome-based browsers - so for anything where animation performance is critical use canvas (I highly recommend PixiJS for 2d canvas work).
edit: reference for the comment on performance: Using SVG with CSS3 and HTML5.
Since it's a slow rainy day I decided to finally try this with React; so here's a simple demo: codepen.io/blindfish3/pen/LYbaNrw
No major issues implementing this; other than having to use
<g>as a wrapper on some output. From what I remember that was also required in all components on Angular - as well as some additional configuration (I'll have to look that up later).Of the three libraries I've now tried this approach with, Svelte is definitely the easiest to use with SVGs.
Awesome! I love this approach, too. I have used Vue a few times to do generative art stuff. It's a lovely way of working. I really appreciate you taking the time to make a demo, too! I'll have to check out Svelte...
Great write up. I've been using SVG in many different ways over the past years and love it. The fact that it's XML based makes it so easy to manipulate values and bring vector graphics to life.
Do you have much experience with canvas? As a lot of what's discussed in your article could be applied to canvas, I'd be interested in your take on the pros/cons between the two.
Cheers, James!
I started out doing generative stuff in canvas, by way of p5.js. I still love both SVG and Canvas, but most often reach for SVG nowadays. I tend to only switch to canvas / occasionally webGL when I really need the performance :)
Just as an example - if I was working on a piece with a particle system, or a piece with very large animated elements, I would choose canvas. For just about anything else, I would choose SVG.
It mostly comes down to simplicity for me. I personally just find SVG much easier/quicker to write. I can focus on the creative aspect rather than worrying about lower level graphics code.
Maybe this deserves a blog post of it's own... Thanks so much for taking the time to comment and for making me think about process. It's not something I usually give much thought to! 💡
Thanks for the reply. Makes complete sense regarding particles/more intensive animations. Would enjoy a blog post on this. Tag me if you end up writing one 🙂
Excellent post with a lot of great examples and explanation. I'm super glad to find someone making quality write ups on generative designs here.
I've used generative design with SVGs for a marketing project that output branded designs for use in slideshows. It can be real rewarding find real-world use cases for generative designs; of course, doing it just for fun is great, too.
Also, Tyler Hobbs has long been my favorite gen-artist. He has a surprisingly level of expressiveness and emotion to his pieces that is hard to find in other gen-art works.
Thank you so much Cameren! That's wonderful to hear. I'm totally with you there, I love to see generative techniques applied to “real world” problems. Cheers!
Hi George, thank you for another fantastic article.
This is great. I'm going to have some fun, trying out some generative art. I love the creativity. Thank you for sharing :)
Ah, Thank you for reading! I’m glad you found the post helpful 😊 Good luck on your generative journey! 🚞
The post is written very well!
I'm new to the SVG topic and wasn't aware of the possibility of the generative approach. That is awesome!
Thanks a lot for the input, ideas and the starter kit!
Ah, I'm so glad to hear it! Thank you for reading!
Wow 🤩
Great article! Ive seen something similar on this website [(dbeta.co.uk )]
man check this site kota.co.uk/ its amazing, i think that was made using this but i dont understand how, any ideas?
Great!
How can I download the svg image?
Thanks