JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<canvas id="out" width="512" height="512">

JavaScript

(function () {
    "use strict"

    var canvas = document.getElementById("out").getContext("2d")
    
    canvas.translate(256, 256)
    
    var r0 = 80, r1 = 90, nt = 8
    
    var as = (Math.PI + Math.PI) / nt, at = 0.05
    
    canvas.rotate(0.25 * as)
    
    canvas.beginPath()
    
    for (var i = 0; i < nt; ++i) {
        canvas.arc(0, 0, r0, i * as, (i + 0.5) * as, false)
        canvas.arc(0, 0, r1, (i + 0.5) * as + at, (i + 1) * as - at, false)
    }
    
    canvas.closePath()
    
    canvas.fillStyle = "rgba(127, 0, 255, 0.25)"
    canvas.fill()
    
    canvas.lineWidth = 2
    
    canvas.strokeStyle = "rgb(127, 0, 255)"
    canvas.stroke()
})()