JSFiddle - React, Tailwind, and code Playground

by Animesh Shaw

HTML

<script type="text/processing" data-processing-target="processing-canvas">
    float num = -270;

    void setup() {
        size(560, 440);
        background(0);
        stroke(#996699, 60);
    }

    void draw() {
        translate(width / 2, height / 2);
        for (int i = 0; i < 360; i += 6) {
            float x = cos(radians(i + num)) * num;
            float y = sin(radians(x)) * num;
            point(x, y);
            point(-x, -y);
            point(y, x);
            point(-y, -x);
        }

        if (num < 270) {
            num += 0.5;
        }
    }
</script>
<canvas id="processing-canvas"></canvas>