A small example on how to create SVG-graphics in JavaScript.

The code

The HTML is simple:

<svg class="image">

Add some JavaScript:

// create
const NS = ''
const svg = document.querySelector('.image')
const circle = document.createElementNS(NS, 'circle')

// configure
circle.setAttribute('cx', 50)
circle.setAttribute('cy', 75)
circle.setAttribute('r', 50)

// connect

A simple SVG appears:


You can create the SVG-element itself by code too: svg = document.createElementNS(NS, 'svg')

I used the create-configure-connect pattern here which I introduced in: A code pattern for Web Audio.

Now go make some!