如何使此貝塞爾曲線與圖像中的曲線相似

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>