Generating SVG with vanilla Javascript

Creating SVG files is a wonderfull way to get started with generative art. Lets Explore some Basics.

SVG is simply an amazing format. A web standart to create vector graphics.

Learing write SVG files sometimes feels like magic. For Designers and Artists it's a huge step in term of creative freedom. Learning to create these kinds of code adds another layer of fun to the design game. You can practically create your own design tools.

Yeah. You're right. I belong with those people. I think artists and designers gain a lot of freedom by learning to code. You don't have to produce production-ready code that meets the highest standards. You get a new tool in the box. Another means to express yourself and your idea.

Enough of that Let's get started.

Starting with a function

Lets setup a function, that will produce out SVG File. The name at this point isn't important at this. I called it myArt. I use We start with a simple set of parameters width and height and give them default values.

function myArt(width=100, height=100){
      /* Our Code goes here*/
}

setting the Stage

Now we add our skeleton code for the SVG. We add the width and height to the viewBox property. I highly recommend reading this article by Sara Soueidan. She explained this much better than I ever could.

function myArt(width=100, height=100) {

    let svg = `<svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">`
    /* Our layers go here*/

    /* Close the SVG Tag*/
    svg += `</svg>`
    return svg
} 

Let's throw in a rectangle to have something to look at.

    /* Our layers go here */
    svg+= `<rect width="${width}" height="${height}"/>`

If you execute the code in your browser, you can now attach the resulting code to the body.

var div = document.createElement("div");
document.body.appendChild(div);

div.innerHTML = myArt()

You can fork this pen if you want.

Loops in Loops

Now to be honest a single square isn's all that impressive. Let's add some more.

First we add another parameter called cell to our function. This is going to be the size of our squares.

  function myArt (width=100, height=100, cell=10){

Now we replace out orginal single Square two nestet loops. One for the X-Axis adding cellto the value x untill the width of the image has been reached. The other one adding cell to variable y untill it hits the heightvalue. Each time the loop runs, we draw a rectangle.

for (let x = 0; x <= width; x +=cell){
    for (let y = 0; y <= height; y+=cell){
        svg += `<rect x="${x}" y="${y}" width="${cell}" height="${cell}"/>`
    }
} 

Well, we are looking at a black wall of tighly packed squares. Now let's make this generative by adding an element of randomness to the process. We apply a random value to the opacity-property of each square.

for (let x = 0; x <= width; x +=cell){
    for (let y = 0; y <= height; y+=cell){
        svg += `<rect x="${x}" y="${y}" width="${cell}" height="${cell}" opacity="${Math.random()}"/>`
    }
} 

Check the result on Codepen