Warp SVG Online

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

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 →