JSFiddle - React, Tailwind, and code Playground

by Akshay U

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg width="1500" height="1500" id="svg" ></svg>

CSS

*{
    margin:0;
    padding:0;
}

circle{
    opacity:0;
}

JavaScript

var s = Snap('#svg');
var rect=s.rect(0,0,1500,1500);
for (var x = 10; x < 1500; x = x + 30) {
    for (var y = 10; y < 1500; y = y + 30) {
       var circle=s.circle(x,y,5)
       circle.attr({
           fill:'green'//'#8BFE03'
       })
      var line=s.line(x,y,x,y).attr({
          stroke:'green',
          'stroke-width':2
      })
    }
}
s.mousemove(function(e){
    var x=e.pageX;
    var y=e.pageY;
    $('circle').each(function(){
      
        if($(this).attr('cx') < x + 80 && $(this).attr('cx') > x - 80 && $(this).attr('cy') > y + 80 && $(this).attr('cy') < y - 80){
            $(this).css('opacity',1)
        }
        else{
            $(this).css('opacity',0)
        }
    })
    $('line').each(function(){
        
        if($(this).attr('x1') < x+ 80 && $(this).attr('x1') > x - 80 && $(this).attr('y1') > y -80 && $(this).attr('y1') < y + 80){
            $(this).attr('x2',e.pageX)
            $(this).attr('y2',e.pageY)
        }
        else{
            var newx=$(this).attr('x1');
            var newy=$(this).attr('y1');
            $(this).attr('x2',newx)
            $(this).attr('y2',newy)
        }
    })
})