> 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

Clear/Wind today!

With a high of F and a low of 67F. Currently, it's 81F and Clear/Wind outside. Current wind speeds: 20 from the South Pollen: 0 ...