<!-- forked from <a href="https://codepen.io/osublake/">Blake Bowen.</a>
 -->
<svg id="svg" viewBox="0 0 400 400">

  <defs>
    <circle class="handle" r="10" />
    <circle class="marker" r="4" />  
    
    <linearGradient id="grad-1" x1="0" y1="0" x2="400" y2="400" gradientUnits="userSpaceOnUse">
       <stop offset="0.2" stop-color="#00bae2"></stop>
       <stop offset="0.8" stop-color="#fec5fb"></stop>
    </linearGradient>
  </defs>
  
  <polygon id="star" stroke="url(#grad-1)" points="261,220 298,335 200,264 102,335 139,220 42,149 162,148 200,34 238,148 358,149" />  
  <g id="marker-layer"></g>
  <g id="handle-layer"></g>
</svg>

body {
  background: #0e100f;
  font-family:sans-serif;
  color:#7c7c6f;
}

#svg {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  overflow: visible
}

#star {
  stroke-width: 20;
  stroke-linejoin: round;
  fill: none;
}

.handle {
  fill: transparent;
  stroke-width: 4;
  stroke: #fff;
}

.marker {
  fill: #fec5fb;
  stroke: #fec5fb;
  pointer-events: none;
}



a:link, a:visited, a:active {
  color:#7c7c6f;
  text-decoration:none;
}

a:hover {
  color:#00bae2;
}

//original by Blake Bowen https://codepen.io/osublake/
var star = document.querySelector("#star");
var markerDef = document.querySelector("defs .marker");
var handleDef = document.querySelector("defs .handle");
var markerLayer = document.querySelector("#marker-layer");
var handleLayer = document.querySelector("#handle-layer");

var points = [];
var numPoints = star.points.numberOfItems;

for (var i = 0; i < numPoints; i++) {  
  var point = star.points.getItem(i);
  points[i] = {x:point.x, y:point.y};
  createHandle(point);
}

function createHandle(point) {
    
  var marker = createClone(markerDef, markerLayer, point);
  var handle = createClone(handleDef, handleLayer, point);
  var update = function() { point.x = this.x; point.y = this.y; };
  
  var draggable = new Draggable(handle, {
    onDrag: update,
    onThrowUpdate: update,
    inertia: true,
    bounds: window,
    liveSnap:{
      points:points,
      radius:15
    }
  });
}

function createClone(node, parent, point) {
  var element = node.cloneNode(true);
  parent.appendChild(element);
  gsap.set(element, { x: point.x, y: point.y });
  return element;
}