JSFiddle - React, Tailwind, and code Playground

by hakim

CSS

html, body {
    margin: 0;
    padding: 0;
}

canvas {
    display: block;
    margin: 50px auto;
}

JavaScript

/**
 * Hypnos by Hakim El Hattab (@hakimel, http://hakim.se)
 *
 * Inspired by http://patakk.tumblr.com/post/33304597365
 */

(function() {

    var canvas = document.body.appendChild( document.createElement( 'canvas' ) ),
        context = canvas.getContext( '2d' ),

        detail = 180,

        layers = [],

        layerSize = 70,
        layerSize2 = layerSize / 2,

        width = 500,
        height = 500,
        radius = ( Math.min( width, height ) * 0.5 ) - layerSize;

    function initialize() {

        for( var i = 0; i < detail; i++ ) {
            layers.push({
                x: width/2 + Math.sin( i / detail * 2 * Math.PI ) * radius,
                y: height/2 + Math.cos( i / detail * 2 * Math.PI ) * radius,
                r: i / detail
            });
        }

        // var x1 = width * 0.5,
        //     y1 = height * 0.2,

        //     x2 = width * 0.8,
        //     y2 = height * 0.8,

        //     x3 = width * 0.2,
        //     y3 = height * 0.8;

        // for( var i = 0; i < detail; i++ ) {
        //     layers.push({
        //         x: x2 + ( ( i / detail ) * ( x3 - x2 ) ),
        //         y: y2 + ( ( i / detail ) * ( y3 - y2 ) ),
        //         r: i / detail
        //     });
        // }

        // for( var i = 0; i < detail; i++ ) {
        //     layers.push({
        //         x: x1 + ( ( i / detail ) * ( x2 - x1 ) ),
        //         y: y1 + ( ( i / detail ) * ( y2 - y1 ) ),
        //         r: i / detail
        //     });
        // }

        // for( var i = 0; i < detail; i++ ) {
        //     layers.push({
        //         x: x3 + ( ( i / detail ) * ( x1 - x3 ) ),
        //         y: y3 + ( ( i / detail ) * ( y1 - y3 ) ),
        //         r: i / detail
        //     });
        // }

        resize();
        update();

    }

    function resize() {

        canvas.width = width;
        canvas.height = height;

    }

    function update() {

        requestAnimationFrame( update );

 ...