JSFiddle - React, Tailwind, and code Playground

by Sreekesh S K

HTML

<div id="wrapper">
    <div id="ball" class="border"> 
        <div class="blue ball"> </div>
    </div>
    <canvas id="myCanvas" class="line"></canvas>
    <div id="ball1" class="border"> 
        <div class="green ball"> </div>
    </div>
</div>

CSS

.border
{
    position: relative;
    width: 115px;
    height: 115px;
    background: #e7e9e9;
    border-radius: 100px;
    border: 2px solid #d1d1d1;
}

.ball
{
    position: absolute;
    left: 9%;    
    top: 9%;
    
    width: 90px;
    height: 90px;

    border-radius: 100px;
}

.blue
{
    background: #2f9bc1;
    border: 2px solid #266a8e;
}

.green
{
   background: #00c762; 
   border: 2px solid #00be58;
}

#ball
{
    top: 200px;   
    left: 300px;
}

.line
{
    position: absolute;
    width: 320px;
    z-index: -1;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(350, 150);
context.lineTo(50, 50);
context.stroke();