JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<canvas id='canvas'></canvas>

JavaScript

//creating a random line
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');

function drawCircle(x,y,color){
    iterations = 20;
    ctx.strokeStyle = ctx.fillStyle = color;
    //x = 50;
    //y = 50;
    r = 30;
    amplitude = 3;
    arr = [];
    pathBegin ={
        x: x+Math.cos(0)*r,
        y: y+Math.sin(0)*r
    };
    ctx.moveTo(pathBegin.x,pathBegin.y);
    for(var i=1;i<iterations;i++){
        r += Math.random()*amplitude-amplitude/2;
        angle = Math.PI*2/iterations;
        ctx.lineTo(x+Math.cos(angle*i)*r,y+Math.sin(angle*i)*r);      
    }
    ctx.lineTo(pathBegin.x,pathBegin.y);
    ctx.stroke();
    return;
}


function draw() {
    x = 0;
    arr = [{x:0,y:75}];
    iterations = 10;
    amplitude = 75;
    prev = 75;
    for (var i = 0; i < iterations; i++) {
        x += 350 / iterations;
        dif = Math.random() * amplitude - amplitude / 2;
        y = prev + dif;
        arr.push({
            x: x,
            y: y
        });
        prev = y;
    }


    
    ctx.strokeStyle = 'rgba(0,127,255,'+ (Math.random()*0.15+0.1) +')';
    ctx.moveTo(arr[0].x, arr[0].y);
    for (i = 0; i < arr.length; i++) {
        var x = arr[i].x;
        var y = arr[i].y;
        ctx.lineTo(x, y);
    }
    ctx.stroke();
}

count = 50;
for(var i=0;i<count;i++){
    drawCircle(50+i,50,'rgba('+(255-i)+',0,0,'+0.05+')');
}