Cyrus Stoller home about consulting

Basic generative art

In this post, I’ll share a simple tutorial on how to create some basic generative art that looks like it could have been inspired by Damien Hirst. At the end, you’ll have a script that generates an SVG directly in your browser.

Creating your canvas

Because SVGs are vector graphics, they can easily be scaled up an down without any loss of resolution. So, the units we choose are for defining relative proportion. I chose 24x15 since it roughly approximates the golden ratio.

<svg xmlns="" version="1.1"
  viewbox="0 0 2400 1500">

The main thing to note here is that the viewbox defines the coordinates of the top left corner of your image and the aspect ratio. In this case, the top left corner is defined as (0,0) and with 2400 points in the x-direction and 1500 points in the y-direction.

Defining your dots

Next, you need to decide roughly how many dots you’d like to create. Conceptually, I broke the image down into 100x100 squares that can each be filled with a dot of a different color. Then, to make the image feel less rigid, I added a little noise to the location of center of each circle.

<circle cx="150" cy="250" r="50" fill="#000000"
  stroke="white" stroke-width="1" fill-opacity="1" />

To define an svg circle, you need to define the center coordinates and the radius of the circle. In addition, we’ll want to define the fill and stroke colors.

const blockSize = 100;
const xBlocks = 24;
const yBlocks = 15;
const strokeWidth = 5;

let res = `<svg xmlns="" version="1.1"
  viewbox="0 0 ${xBlocks * blockSize} ${yBlocks * blockSize}">`;

function addNoise(radius) {
  const rand = Math.floor(Math.random() * Math.floor(2 * radius));
  return rand - Math.floor(radius); 

function randomFillColor() {
  // 16777215 is equivalent to #FFFFFF 
  return '#' + Math.floor(Math.random() * 16777215).toString(16);

function createCircle(cx, cy, radius, fill){
  const args = `cx="${cx}" cy="${cy}" r="${radius}" fill="${fill}"`;
  const stroke = `stroke="white" stroke-width="${strokeWidth}"`;
  return `<circle ${args} ${stroke} fill-opacity="1" />`;

for (let i = 0; i < xBlocks; i++) {
  for (let j = 0; j < yBlocks; j++) {
    const radius = blockSize / 2;
    const cx = (i * blockSize) + radius + addNoise(radius / 2);
    const cy = (j * blockSize) + radius + addNoise(radius / 2);
    const fill = randomFillColor();
    res += createCircle(cx, cy, radius, fill);

res += "</svg>";

Adding the dots to your canvas

Putting all of this together requires nesting all of these circles inside the svg described above and then either saving that string to disk as a file or adding it to an HTML page. Click here to see the javascript used to create the image at the top of this post.


When I first put this together, I was surprised by how much joy I got from something so simple. I hope you try experimenting with your own generative art. I can’t wait to see what you create.

Category Tutorial