<svg width="400" height="400" viewBox="0 0 400 400">
<path id="targetPath" d="M310.754 155.373L310.755 155.377C322.061 182.613 328.18 213.173 319.152 238.211C310.125 263.079 286.074 282.558 260.905 295.057C235.762 307.543 209.763 313.017 183.413 313.359L183.41 313.36C157.028 313.873 130.428 309.24 113.418 294.272C96.4007 279.296 88.7051 253.893 83.2135 229.353L83.2128 229.349C77.5582 204.846 74.1377 181.399 76.0195 154.879C77.0469 141.61 79.3998 127.596 83.8366 115.843C88.2779 104.078 94.774 94.6633 104.031 90.4551C113.398 86.236 125.608 87.1467 139.231 89.3993C143.22 90.059 147.33 90.8336 151.514 91.6224C161.56 93.516 172.043 95.4919 182.358 96.1594C194.199 96.9256 205.821 95.9435 216.89 95.0082C219.494 94.7882 222.067 94.5708 224.605 94.3793C237.964 93.3715 250.351 93.0822 261.309 96.8198C283.219 104.293 299.614 127.953 310.754 155.373Z" />
</svg>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
svg {
width: 75vmin;
height: 75vmin;
}
path {
fill: none;
stroke: hsl(0, 0%, 90%);
stroke-dasharray: 4;
}
const svg = document.querySelector("svg");
const path = document.querySelector("#targetPath");
// Calculate 15 equally spaced points along #targetPath and loop through them
pointsInPath(path, 15).forEach((point) => {
// Create a circle with a random radius between 2 and 14
const circleEl = circle(point.x, point.y, 2 + Math.random() * 12, svg);
// Give the circle a random fill
circleEl.setAttribute("fill", `hsl(${170 + Math.random() * 60}, 85%, 75%)`);
});
// Create an SVG <circle>
function circle(cx, cy, r, target) {
const el = document.createElementNS("http://www.w3.org/2000/svg", "circle");
el.setAttribute("cx", cx);
el.setAttribute("cy", cy);
el.setAttribute("r", r);
target.appendChild(el);
return el;
}
// Return n equally spaced points plotted along an SVG <path>
function pointsInPath(path, numPoints = 10) {
const pathLength = path.getTotalLength();
const step = pathLength / numPoints;
const points = [];
for (let i = 0; i < pathLength; i += step) {
points.push(path.getPointAtLength(i));
}
return points;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.