oddlySatisfying

by Andrew Maxwell

HTML

<body style="background:black;margin:0;overflow:hidden"><canvas id="C"></canvas>

JavaScript

var T = C.getContext('2d')

var speed = 0.05
var num = 30
var precision = 50

var time = 0

function loop(){
    requestAnimationFrame(loop)
    
    var W = C.width = innerWidth
    var H = C.height = innerHeight
    var spacing = W / num / 2
    T.lineWidth = spacing / 2
    T.lineCap = "round"
    T.strokeStyle = "white"
    T.beginPath()
    
    for (var i = 0; i < num; i++){
        var rad = i * spacing
        var len = Math.sin(time * speed + i / num * 2 * Math.PI) / 2 + 0.5
        T.moveTo(W / 2 - rad, W / 2)
        for (var j = 0; j < precision; j++){
            var angle = Math.PI + Math.PI * len * j / precision
            T.lineTo(W / 2 + rad * Math.cos(angle), W / 2 + rad * Math.sin(angle))
        }
    }
    
    T.stroke()
    
    time++
}

loop()