benjamminf / warpjs

Warp, distort, bend, twist and smudge your SVG’s directly in the browser
https://benjamminf.github.io/warpjs
MIT License
480 stars 33 forks source link

Which formula can bend SVG via arc (circular) path? #24

Open leodevbro opened 5 months ago

leodevbro commented 5 months ago

Hello @benjamminf, I want to achieve this but not only for texts but for any shape of SVG.

With only text, it is easy with textPath element, but instead of text, I have any SVG shape.

text_on_circular_arc

In this demo: https://codepen.io/benjamminf/pen/NpZLeb

This is the formula for wave warping (not for circular warping): warp.transform(([ x, y ]) => [ x, y + 4 * Math.sin(x / 16) ])

Could you please provide a formula to bend any SVG circularly?