Gary Sieling

Generate an SVG sunburst from JavaScript

I want to generate a sunburst to use with a laser-cutting service, like below:

This has a couple of important features:

The code is below – this works with Paper.js:

var postyle = { fillColor:'grey', strokeColor: 'black'}

const size = 200;
const rect = [0, 0, [ size, size]];
const ratio = 0.25;
const radius = size * ratio;
const spokes = 48;
const pi = 3.14;

const center = [0, 0]

var path = new paper.Path();
path.strokeColor = "#000";
path.closed = true;

function ip(a) {
    return [
        radius * Math.cos(a),
        radius * Math.sin(a)
    ];
}

function intersect(x1, y1, x2, y2, mixX, minY, maxX, maxY) {
    var point = rectangleIntersect(maxX - x1, maxY - y1, x2 - x1, y2 - y1);
    return point && { x: point.x + x1, y: point.y + y1 };
}

function rectangleIntersect(w, h, x, y) {
    var sx = x > 0 ? 1 : -1;
    var sy = y > 0 ? 1 : -1;

    x *= sx;
    y *= sy;

    if (x < w && y < h) return null;

    var m = x * h;
    var n = y * w;

    if (m < n) w = m / y;
    if (m > n) h = n / x;

    return [ Math.round( sx * w ), Math.round(sy * h ) ];
}

function outer(a) {
    return rectangleIntersect(
        size,
        size,
        100000 * Math.cos(a) + size/2,
        100000 * Math.sin(a) + size/2,
    );
}

function maybeCorner(p1, p2, a1) {
    const corners = [
        [1 * size, -1 * size],
        [1 * size, 1 * size],
        [-1 * size, 1 * size],
        [-1 * size, -1 * size], 
    ];
    
    if (p1[0] != p2[0] && 
        p1[1] != p2[1]) {
        const idx = Math.round(2*a1/pi) % 4;
        return corners[idx];
    }
}

for (let i = 0; i < spokes; i++) {
    const a1 = pi / spokes * (2 * i);
    const a2 = pi / spokes * (2 * i + 1);
    
    const inner1 = ip(a1);
    const inner2 = ip(a2);
    const outer1 = outer(a1);
    const outer2 = outer(a2);
    
    const points = [
        inner1, 
        outer1,
        maybeCorner(outer1, outer2, a1),
        outer2,
        inner2].filter(
        (p) => !!p        
    );
        
    points.map(
        ([x, y]) => {
            path.add(new paper.Point(x + center[0], y + center[1]));
        });
}
Exit mobile version