Spirograph

The spirograph effect draws hypotrochoid curves — the mathematical patterns produced by a pen tracing inside a rolling circle. Multiple curves draw simultaneously, each slowly fading before being replaced by a new pattern with different radii, creating an endlessly evolving geometric display.

Examples

Basic

Three simultaneous spirograph curves with default colors.

Preview

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
    </EffectDemo>
</template>

<script
    setup
    lang="ts">
    import { onMounted, onUnmounted, ref } from 'vue';
    import { createSpirograph } from '@basmilius/sparkle';

    const canvasRef = ref<HTMLCanvasElement>();
    let sim: ReturnType<typeof createSpirograph> | null = null;

    onMounted(() => {
        if (canvasRef.value) {
            sim = createSpirograph();
            sim.mount(canvasRef.value).start();
        }
    });

    onUnmounted(() => {
        sim?.destroy();
        sim = null;
    });
</script>

Configuration

import { createSpirograph } from '@basmilius/sparkle';

const spirograph = createSpirograph({
    speed: 1,
    curves: 3,
    colors: ['#ff3366', '#33aaff', '#ffcc00', '#66ff99', '#cc66ff', '#ff6633'],
    lineWidth: 1.5,
    fadeSpeed: 0.003,
    complexity: 5,
    scale: 1
});
spirograph.mount(canvas).start();

Number of Curves

// Single focused curve
createSpirograph({ curves: 1 });

// Many overlapping patterns
createSpirograph({ curves: 6 });

Complexity

Controls which denominator values are used when computing the gear ratio, affecting how intricate the patterns are:

// Simple, few-pointed stars
createSpirograph({ complexity: 2 });

// Complex, many-petalled flowers
createSpirograph({ complexity: 8 });

Line Width

// Thin, delicate lines
createSpirograph({ lineWidth: 0.5 });

// Bold, thick strokes
createSpirograph({ lineWidth: 3 });

Fade Speed

Controls how quickly a curve fades before being replaced:

// Long-lived patterns
createSpirograph({ fadeSpeed: 0.001 });

// Fast turnover
createSpirograph({ fadeSpeed: 0.01 });