SVG.Path

by rickyt29

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script>

JavaScript

var draw = SVG().addTo('body').size(2000, 2000)

var daytona = draw.path('M1842.6,250.2c-27.9-59.4-67.1-96.6-88-113.5c-106.9-86.6-233.7-87-317.7-87.2c-7,0-13.6,0-19.9-0.1,c-159.1-1.7-470.5-4.9-629-6.2c-21-0.2-48.3-0.5-77.1-0.8c-78.2-0.9-175.5-2-231.8-1.4c-113.1,1.2-194.8,22.4-265,68.8h0,c-50.8,33.6-90,77.1-116.3,129.2c-25.1,49.5-32,94.4-33.9,116.8c-7.7,91.7,17.2,174,74,244.6c51.7,64.2,119,104.8,166.3,127.6,C368.8,759,468.8,799.5,549.1,832c34.9,14.1,67.9,27.5,93.4,38.2c82.1,34.5,204,80,321.3,80c2.7,0,5.5,0,8.2-0.1,c84.7-1.6,153.2-12.8,215.6-35.4l2.1-0.8c119-43.1,318.1-115.2,418.5-164.7c53.5-26.4,109.8-57.1,159-102.8,c28.2-26.2,51.1-55,68.1-85.5c19.7-35.4,32.1-74.3,36.9-115.6C1880.3,374.9,1870.4,309.3,1842.6,250.2z');

daytona.fill('none').move(20, 20)
daytona.stroke({ color: '#f06', width: 15, linecap: 'round', linejoin: 'round' })

var circle = draw.circle(20)

var length = daytona.length();

var percent = 0.70;
var offset = .71;

percent = (percent + offset) - 1;
console.log("Percent: " + percent);
console.log("Length: " + length);

var p = daytona.pointAt((percent * length));
circle.center(p.x -1, p.y);