如何使此贝塞尔曲线与图像中的曲线相似

Question

我一直在一遍又一遍地尝试产生一条贝塞尔曲线，它类似于这条最终太阳移动的路径。 I was guided to use SVG in producing the effect, and then add CSS to fill the hollowness of the shape after the shape has been drawn with javascript or in this case SVG.

有人可以帮助我最终如何在代码中制作形状，就像我尝试使用 SVG 一样，但无论如何，与图像相比，形状不会产生平滑度，并且会在贝塞尔线中留下一些凸起。

这是 SVG。 它正在开发中，但想法是贝塞尔曲线与图像上的曲线具有相同的平滑度，后来适用于 CSS 效果，可以在需要时随机停止和启动。 CSS 甚至可以采取这种行动吗？ 意思是用图像中描绘的方式填充 SVG 形状。

 // The smoothing ratio const smoothing = 0.2 const points = [ [15, 35], [40, 30], [65, 10], [95, 5], [115, 20], [125, 25], ] //there should be more attributes here eventually. const line = (pointA, pointB) => { const lengthX = pointB[0] - pointA[0] const lengthY = pointB[1] - pointA[1] return { length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)), angle: Math.atan2(lengthY, lengthX) } } const controlPoint = (current, previous, next, reverse) => { const p = previous || current const n = next || current const o = line(p, n) const angle = o.angle + (reverse? Math.PI: 0) const length = o.length * smoothing const x = current[0] + Math.cos(angle) * length const y = current[1] + Math.sin(angle) * length return [x, y] } const bezierCommand = (point, i, a) => { const cps = controlPoint(a[i - 1], a[i - 2], point) const cpe = controlPoint(point, a[i - 1], a[i + 1], true) return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}` } const svgPath = (points, command) => { const d = points.reduce((acc, point, i, a) => i === 0? `M ${point[0]},${point[1]}`: `${acc} ${command(point, i, a)}`, '') return `<path d="${d}" fill="none" stroke="black" />` } const svg = document.querySelector('.svg') svg.innerHTML = svgPath(points, bezierCommand)

 <svg viewBox="0 0 200 50" class="svg"> </svg>