Ball Coverage with SVG segments

by Marco Abate

HTML

<div class="pitch">
  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  
    <g id="point_1">
      <circle cx="40%" cy="35%" r="4" fill="yellow"/>
    </g>
    <g id="point_2">
      <circle cx="50%" cy="10%" r="4" fill="yellow"/>
    </g>
    <g id="point_3">
      <circle cx="60%" cy="30%" r="4" fill="yellow"/>
    </g>
    
    <g id="current_point">
      <circle id="point_4_outer" cx="20%" cy="80%" r="8" fill="blue"/>
      <circle id="point_4_inset" cx="20%" cy="80%" r="4" fill="white"/>
    </g>
    
    <g id="line_1_2">
      <line x1="40%" y1="35%" x2="50%" y2="10%" stroke-width="1" stroke="yellow"/>
    </g>
    
    <g id="line_2_3">
      <line x1="50%" y1="10%" x2="60%" y2="30%" stroke-width="1" stroke="yellow"/>
    </g>
    
    <g id="line_3_4">
      <line x1="60%" y1="30%" x2="20%" y2="80%" stroke-width="1" stroke="yellow"/>
    </g>
    
  </svg>
</div>

SCSS

.pitch {
    width: 100vw;
    height: 100vh;
    background-color: green;
    display: flex;
    g {
      &.animated {
        line {
          animation: animateSvg 2.5s linear forwards;
        }
      }
      line {
        stroke-dashoffset: 1000;
        stroke-dasharray: 1000;
      }
    }
    
}

@keyframes animateSvg {
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

var line_1_2 = document.getElementById('line_1_2');
var line_2_3 = document.getElementById('line_2_3');
var line_3_4 = document.getElementById('line_3_4');

var k = 0;
var interval = setInterval(function() {
	var line = null;
  switch(k) {
  	case 0:
    	line = line_1_2;
    	break;
   	case 1:
    	line = line_2_3;
	    break;
   	case 2:
	    line = line_3_4;
	    break;
    default:
    	break;
  }
  if(line) {
		line.classList.add('animated');
  }
  k++;
  if(k > 2) {
  	clearInterval(interval);
  }
}, 300);