[Javascript] Grafik entlang einer Kurve verzerren

Ahoi!

Ich arbeite gerade an einem Projekt bei dem es darum geht Winddaten durch Pfeile zu visualisieren. Dazu werden Streamlines berechnet um dann Pfeile entlang dieser Linien zu zeichnen. Die einfache Möglichkeit wäre wohl an das Ende einer solchen Streamline einen Pfeilmarker zu setzen. Aber ich würd lieber eine Pfeilgrafik entland der Linie verzerren.

Hab mir dazu mal nen SVG Pfeil in Inkscape gezeichnet. Dort kann ich den dann auch unter "Path Effect Editor" -> "Bend" mittels Bezier Kurve beliebig verzerren. Schaut dann zb. so aus:


Jetzt such ich ne Javascript Library die genau das kann. Aber irgendwie werd ich nicht fündig. Entweder gibts sowas tatsächlich nicht oder ich finds nicht. CSS3 kann sowas mit Text, aber für beliebige SVG-Grafiken wirds damit nicht funktionieren. Und alles was ich an javascript-Libraries im Zusammenhang mit SVG finde, is entweder sehr basic (zeichnen von einfachen Shapes) oder kann zwar alle möglichen Animationen, aber keine Verzerrung entlang einer Kurve.

Hat hier vllt jemand ne Idee?

tia!

Danke, damit sind einfachen Pfeile problemlos möglich. Bei dem Pfeil aus meinem Beispiel oben bin ich mir aber nicht ganz sicher. Der besteht ja aus 7 Knoten mit Pfaden dazwischen die entsprechend verzerrt werden müssen.

Wobei, ich könnt den auch aus zwei einfachen zusammen setzen. Also ein größerer blauer mit nem kleineren weißen innerhalb. Werd mich mal rumspielen. Danke auf jeden Fall, hat mir gleich nen neuen Ansatz gebracht!

Ja, da auf cesiumjs aufgebaut wird.