Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paper.js</title>
<link rel="stylesheet" href="./../PaperJSEngine/style.css" />
<script type="text/javascript" src="./../PaperJSEngine/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var amount = 100
var group = new Group()
var path = new Path()
path.strokeColor = 'blue'
path.strokeWidth = 0
path.selected = true
path.add(new Point(view.center.x - 120, view.center.y))
path.add(new Point(view.center.x - 0, view.center.y + 100))
path.add(new Point(view.center.x + 60, view.center.y + 30))
path.add(new Point(view.center.x - 100, view.center.y + 60))
path.smooth({ type: 'geometric', factor: 0.2 })
function lerpRGB(color1, color2, t){
var c1R = color1.components[0]
var c1G = color1.components[1]
var c1B = color1.components[2]
var c2R = color2.components[0]
var c2G = color2.components[1]
var c2B = color2.components[2]
var colorR = c1R + ((c2R - c1R) * t)
var colorG = c1G + ((c2G - c1G) * t)
var colorB = c1B + ((c2B - c1B) * t)
var color = new Color(colorR, colorG, colorB)
return color
}
var color1 = new Color(49, 132, 84)/255
var color2 = new Color(224, 211, 0)/255
var group = new Group()
for (var i = 1; i < amount; i++){
var step = path.length / i
var circle5 = new Path.Circle({
radius: 35,
fillColor: 'blue',
center: path.getLocationAt(i * (path.length/amount)).point,
// selected: true,
parent: group,
})
circle5.sendToBack()
var fillColor = lerpRGB(color1, color2, i/amount)
circle5.fillColor = fillColor
}
</script>
</head>
<body>
<canvas id="canvas" resize>
<svg id="svg" width="598" height="363" viewBox="0 0 598 363" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M220 362C405 358.5 486.5 342 597 180C429 268.4 188.667 97.8333 89.5 1.5C74.6667 13.6667 36.1 70.4 0.5 200" stroke="black"/>
</svg>
</canvas>
</body>
</html>
