Pretty speedy right? The computer re-renders the image, with a random result, in a matter of milliseconds. To illustrate the above, here's a simple CodePen that “paints” random stripes on a canvas: Why? They are fantastic at performing repetitive tasks, fast. Computers only happen to be wonderful companions for this type of creation. Generative art doesn't even need to digital. There are no rules, aside from the ones you define. Art created with an element of autonomy/chance. You continue this process until your canvas is full. If the dice reads “1” you always paint a blue stripe, “2” and you paint a red stripe, and so on. Based on how the dice lands, you choose one of the 6 colors and paint a stripe on your canvas. You have some dice and 6 colors in your palette. If you are familiar with a generative approach to art/design already, feel free to skip this section. I know, it doesn't look like much right now, but there's a ton to unpack here.įor some folks reading this post, the term “Generative Art” may be an unfamiliar one. Here's a CodePen with all the utility functions and HTML/CSS setup included. If you would like to skip ahead and dive in with creating using this starter pack, I got you. SVG is a markup language like HTML, and it's a lot less scary than it seems. Draw some simple shapes, move them around, color them in. Keeping an eye on the docs as a reference, experiment in a CodePen. If you are completely new to SVG, I recommend reading through this MDN Tutorial. Some basic SVG knowledge (drawing shapes, giving them a fill color, etc) will be helpful, though. To make the most out of this starter kit, you'll need a working knowledge of HTML/CSS/JS, too. No prior generative art knowledge is necessary to make the most out of this post. Generative art savant, who is somewhat new to SVG? SVG magician, who is dipping their toe into the generative art ocean? There is something here for everyone! Be sure to check out the issue here for more generative treats. Psst! I wrote this article after talking about generative SVG in the wonderful viewBox newsletter. Rather, we will be examining a collection of libraries, utility functions, and techniques that once learned can be used to create anything you like! Unlike my other tutorials, we won't be creating one single example here. This post aims to provide you with all the tools you need to start creating your own generative SVG art/design. It can scale to any resolution, is a joy to debug, and has a multitude of incredible filters/effects built-in.

SVG is a fantastic medium for generative art.

Vec2 pack free download