Click & Wait 2 secs

by Milan Gladiš

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="circle" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 1C30.4934 1 39 9.50659 39 20C39 30.4934 30.4934 39 20 39C9.50659 39 1 30.4934 1 20C1 9.50659 9.50659 1 20 1Z" stroke="#C4C4C4" stroke-width="2"/>
</svg>

SCSS

html,body {
  width: 100vw;
  height: 100vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  position: absolute;
  stroke-dasharray: 210;
  stroke-dashoffset: -210;
  background-color: #fbfbfb;
  border-radius: 100%;
  animation: animation 1.5s ease-in-out forwards;
  &.backflip {
    
  }
}

@keyframes animation {
  0% {
    transform: scale(1);
    stroke-dasharray: 210;
    stroke-dashoffset: -210;
  }
  5% {
    transform: scale(0.8);
  }

  85% {
    stroke-dashoffset: -415;
  }
  87% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -415;
    transform: scale(1.5);
    opacity: 0;
  }
}


@keyframes animationBackflip {
  100% {
    stroke-dasharray: 210;
    stroke-dashoffset: -210;
    transform: scale(1);
  }
}

JavaScript

var mousedown;
var circle = '<svg class="circle" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 1C30.4934 1 39 9.50659 39 20C39 30.4934 30.4934 39 20 39C9.50659 39 1 30.4934 1 20C1 9.50659 9.50659 1 20 1Z" stroke="#C4C4C4" stroke-width="2"/></svg>';


var startingTop, startingLeft, math;
$(document).on("mousedown", function(e) {
    mousedown = Date.now();
    $('body').append(circle);
    
    $('.circle').css({
	    'top': e.pageY-20,
      'left': e.pageX-20
    });
  startingTop = e.pageY;
	startingLeft = e.pageX;
});

$(document).on("mouseup mousemove", function(e) {

  math = Math.round(Math.sqrt(Math.pow(startingTop - e.clientY, 2) +Math.pow(startingLeft - e.clientX, 2)));
  if (math > 20) {
    $('.circle').remove();
  }

});

$(document).on("mouseup", function(e) {

$('.circle').remove();

});