> All in One 586: Warp SVG Online

Ads

Wednesday, August 5, 2020

Warp SVG Online

The warping is certainly the cool part here. Some fancy math literally transforms the path data to do the warping. But the UX detail work here is just as nice. Scrolling the page zooms in and out via a transform: scale() on the SVG wrapper (clever!). Likewise, holding the spacebar lets you pan around which is as simple as transform: translate() on another wrapper (smart!). To warp your own SVG files, you just drag-and-drop them on the page (easy!).

Direct Link to ArticlePermalink


The post Warp SVG Online appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.



from CSS-Tricks https://ift.tt/3gXjdyf
via IFTTT

No comments:

Post a Comment

Thank You (2025 Edition)

If I had to whittle down my favorite thing about CSS-Tricks to one thing — and like Tom Petty hits, there’s a lot of ’em — it’s that we take...