<!-- 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;
}
This Pen doesn't use any external CSS resources.