pavellaptev / warp-svg

Warp and distort SVG files online

Warp SVG Online

How to Use

A simple online tool that allows you to warp 🌀, bend, and distort SVG files.

🎥 WARP SVG In action

You can use Figma online tool to prepare your SVG file.

📖 Tutorial

REFS

Warp code based on Warp.js and took from this issue

warp-svg's Issues

Scroll/zoom not working properly in Firefox

Using the scroll option on the mouse is supposed to zoom in or out depending on if you scroll up or down. This works fine in Chrome but in Firefox the zoom always zooms out, even if you scroll the other direction.

Tested in latest stable Firefox (v79) on Windows 10 and latest stable Brave and Chrome on Win10.

Change size of bounding box to account for warped size

In every instance I've tried the exported SVG is warped off the bounding rectangle. When I export it, it's off the screen. I tried making a larger svg with the shape in the middle, and the bounding box for the warp goes around the outer boarder, not the inner shape.

Weight, and repos Function

Checking your code for the nut.
How are the new coordinates of the path points calculated?
Very hidden, it's like entering a puzzle.
I just wanted to understand the logic to calculate the new coordinates.

I see that warp.transform is applied to each point of the path text.. (ok).

Could you explain what the concept "Weight" means?
Could you explain the function reposition(_ref) which I see is in change of computing the new coordinates.

I understand that the function warp.Transform() is executed by: https://github.com/benjamminf/warpjs

Has no effect on <text elements

Add SVG text, warp see no warping