JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<canvas id=c width=500 height=500></canvas>

CSS

canvas {
    background: #2A2430;
    display: block;
}

JavaScript

var a = document.getElementById('c'),
    c = a.getContext('2d')

c.translate(250, 250)

c.beginPath()
c.arc(100, -120, 30, 0, Math.PI*2)
c.fillStyle='#FFF9AF'
c.fill()

c.lineWidth=4
c.strokeStyle='#f1c40f'

var points = []

function addp(a, b){
    var d = Math.sqrt(a*a+b*b)
    //points.push(a, Math.sin(d/100)*100-Math.cos(d/25)*8, b)
    var ang = Math.PI/3
    points.push(a * Math.cos(ang) - b * Math.sin(ang),
                Math.sin(d/100)*100-Math.cos(d/25)*8,
                a * Math.sin(ang) + b * Math.cos(ang))
}

var dist = 12

for(var b=dist; b>=-dist; --b)
    for(var a=-dist; a<=dist; ++a){
        addp(10*a-5, 10*b-5)
        addp(10*a-5, 10*b+5)
        addp(10*a+5, 10*b+5)
        addp(10*a+5, 10*b-5)
        points.push(NaN,NaN,NaN)
    }

var f = 250

function K(z){ return f/(f+z) }

c.fillStyle='#2A2430'
c.beginPath()

for(var i=0; i<points.length-2; i+=3){
    if (isNaN(points[i])){
        c.closePath()
        c.stroke()
        c.fill()
        c.beginPath()
        continue
    }
    var k = K(points[i+2])
    c.lineTo(k * points[i], k * points[i+1])
}

c.closePath()
c.stroke()
c.fill()