svg5.js

svg5 is a tiny JS library to generate static SVGs for plotters, lasercutting, embroidery and more, based on Processing/p5js syntax.

Example

<script src="https://unpkg.com/svg5/svg5.min.js"></script>
<script>
    // Create an SVG element
    createSVG(500, 500)

    // Add content / elements
    background('red')
    stroke(0)
    noFill()
    for(let y = -150; y <= height + 150; y += 5){
        beginShape()
        vertex(-10, height + 100)
        for(let x = -10; x <= width + 10; x += 10){
            vertex(x, y + noise(x/500, y/200) * 50)
        }
        vertex(width + 10, height + 100)
        endShape(CLOSE)
    }

    // Finally, render the svg
    render() 
</script>

More examples here:

Bonus: hatched shapes using the Polygon class from https://observablehq.com/@makio135/utilities
https://editor.p5js.org/makio135/sketches/VHsFuHzRb

Documentation

Start by creating an SVG element using the createSVG function:

createSVG(width, height) Then, simply draw your elements like a Processing sketch!

Global variables

width: width of the SVG.
height: height of the SVG.
CLOSE: used to specify if a path should be closed.

Shapes

circle(centerX, centerY, diameter)
ellipse(centerX, centerY, width, height)
rect(x, y, width, height[, rx, ry])
square(x, y, width)
line(x1, y1, x2, y2)
polyline(x1, y1, x2, y2, x3, y3 [, …, xn, yn])
triangle(x1, y1, x2, y2, x3, y3)
quad(x1, y1, x2, y2, x3, y3, x4, y4)
polygon(x1, y1, x2, y2, x3, y3 [, …, xn, yn])
regularPolygon(centerX, centerY, radius [, startAngle]): optional startAngle is in degrees
arc(centerX, centerY, width, height, startAngle, endAngle): angles are in degrees
spline(x1, y1, x2, y2, x3, y3 [, …, xn, yn [, smoothness [, isClosed]]]): optional smoothness from 0 to 1 (default: 1) and optional boolean isClosed (default: false)

Styling

background(color)
clear()
opacity(amount) where amount goes from 0 to 1.
fill(color),
noFill()
stroke(color)
strokeWidth(n) specifies the width in pixels of the stroke
strokeWeight(n) alias for strokeWidth to keep p5js naming.
strokeCap(style) style can be either butt, square or round
strokeJoin(style) style can be either miter, round or bevel
strokeDashArray(n1, n2 [, …, n])
noStroke()

The color parameter for background, fill and stroke functions can be passed either as:

gray level between 0 (black) and 255 (white): fill(255) (white)
gray and alpha levels between 0 and 255: fill(255, 100) (white with alpha)
red, green and blue levels between 0 and 255: fill(255, 0, 0) (red)
red, green, blue and alpha levels between 0 and 255: fill(255, 0, 0, 100) (red with alpha)
a CSS color string, ie: fill("red"), fill("#ff0000"), fill("rgb(255, 0, 0)"), fill("rgba(0, 0, 0, 0.5)"), fill("hsl(30, 100%, 50%)"), …

Vertex shapes

beginShape() See doc on p5js
vertex(x, y) See doc on p5js
bezierVertex(x1, y1, x2, y2, x, y) See doc on p5js
cubicVertex(x2, y2, x, y) See doc on p5js
quadraticVertex(x1, y1, x, y) See doc on p5js
lineTo(x, y)
moveTo(x, y)
endShape([CLOSE]) See doc on p5js

Groups

beginGroup() starts an SVG group <g>. Transformations are added to the group (-> cleaner SVG).
endGroup() closes an SVG group </g>

Math helpers

lerp(a, b, t) calculates value between a and b at a specific increment between 0 and 1.
map(n, start1, end1, start2, end2) re-maps a number from one range to another.
constrain(value, min, max) constrains a value between a minimum and maximum value.
radians(degrees) converts a value in degrees to radians.
degrees(radians) converts a value in radians to degrees.
random([a, b]) random(), random(max), random(min, max) or random(array).
randInt(a[, b]) randInt(max) or randInt(min, max).
randBool([threshold]) threshold between 0 and 1; returns true if < threshold, else false.
randomSeed(seed) sets the seed value for random().
noise1D(x) computes a value using simplex noise 1D.
noise2D(x, y) computes a value using simplex noise 2D.
noise3D(x, y, z) computes a value using simplex noise 3D.
noise4D(x, y, z, w) computes a value using simplex noise 4D.
noise(x [, y , z , w]) computes a value using simplex noise 1D to 4D, depending on number of arguments.
noiseSeed(seed) sets the seed value for noise.

Matrix transformations

translate(x, y)
rotate(degrees)
scale() scale(n) for uniform scale or scale(x, y).
push() start a new drawing state.
pop() restore previous state.

Render SVG

render([parentCSSSelector]) You can specify a CSS selector as third parameter to let the library know where to append the SVG. By default, SVG is appended to the body of the page.
You can simply right click the SVG to download it 🙂

Save SVG file

save()

SVG helpers

precision(n) sets the number of digits wanted after floating point
getHTML() returns the SVG as an HTML String

Custom methods for modularity

addStyle creates a <style> element and adds content to it
addDef creates a <defs> element and adds content to it
setAttribute
removeAttribute
clearAttributes

NPM

svg5 is also available on NPM: npm i svg5

const svg5 = require('svg5')
svg5.createSVG(500, 500)
svg5.background(0)
svg5.fill(255)
svg5.noStroke()
svg5.circle(svg5.width/2, svg5.height/2, 200)

Examples:

Dependencies

No dependencies but svg5 is using code from simplex-noise.js from Jonas Wagner and Alea from Johannes Baagøe, packaged by Richard Hoffman

MAKIO135 / svg5.js

readme