Reintroducing Snap.svg: A Shape‑First Alternative to D3.js in 2025 (With Geometry, 3D, and TypeScript)
Source: Dev.to
The short version
- The original Snap.svg repo at Adobe has been effectively frozen for years.
- Over the last decade I’ve been extending a fork of Snap.svg with geometry utilities, interaction primitives, UI‑building helpers, and TypeScript types, while keeping the original API intact.
- On top of that, there is now a growing toolkit for non‑linear warps, 3D‑ish transforms, and Bezier‑based 3D projections.
This post is the first in a series that will unpack those pieces and show how to use them in practice.
A brief history: Snap.svg and why it mattered
Snap.svg was originally created by Dmitry Baranovskiy (of Raphaël fame) and hosted at Adobe as part of their web platform work:
- Official Adobe repo:
The core design assumption of Snap.svg was simple but powerful: if the browser already gives you SVG as a first‑class scene graph (paths, groups, transforms, events, etc.), then the JavaScript library should help you work with that directly, not replace it with its own retained‑mode canvas abstraction.
What Snap.svg gives you
- Thin wrapper around native SVG elements – Snap returns a “paper”; you create shapes, group them, style them, and animate them directly as SVG.
- Coherent API for transforms and groupings – Work with groups, transforms, and bounding boxes in a uniform way.
- Minimal mental model – You are still working with SVG; Snap just makes that pleasant.
These qualities made Snap.svg a good fit for icons, dashboards, micro‑interactions, and “SVG as UI” long before “SVG UI” was fashionable. The official repository, however, has been stagnant for years: no modern builds, no TypeScript, and no evolution of the geometry layer. The core ideas are still sound; the ecosystem around them just stopped moving.
Why Snap.svg (rather than D3.js) in 2025?
The obvious question is why you would reach for Snap.svg when D3.js (and a crowd of successors) exists.
- D3 is data‑first. It shines when you have a non‑trivial data model, need a flexible layout pipeline, and want to bind everything to selections.
- Snap.svg is shape‑first. It shines when you already know the shapes you want (icons, widgets, diagrams, controls) and you want to manipulate them as SVG primitives with a rich geometry API.
If you need:
- A draggable diagram editor
- Interactive icons, badges, and widgets
- Geometry‑heavy UIs (flow fields, Voronoi overlays, hulls, 3D‑ish curves)
- SVG‑based UI components that you want to ship as part of a design system
then the friction of going through D3’s data join model can be more of a distraction than a benefit. At that point, a library that says “give me an <svg> element, I will give you a useful geometry/animation/interaction layer” is often closer to what you want. That is exactly the design stance of this fork.
The fork: geometry, interaction, UI, and typing on top of Snap.svg
The extended fork lives here:
- Forked + extended Snap.svg:
The central constraint is conservative: the original Snap.svg API remains intact. On top of that, the fork adds:
Bezier / PolyBezier tooling
Higher‑level Bezier helpers (including 3D‑ish curves) and utilities for constructing and editing curves.
Polygon operations
Convex and concave hulls, SAT‑style overlap checks, and helpers for morphology‑like operations on polygonal regions.
Robust BBox and geometry helpers
Bounding‑box extensions that behave well under transforms, plus richer geometry primitives exposed on elements and the paper.
Element and Paper extensions
Higher‑level drawing and layout helpers (e.g., grid construction and generalized transforms).
Interaction & GUI primitives
“Smart drag” behavior, constrained motion, localized warp fields, and Bezier control‑point editing, all expressed in terms of SVG primitives.
Color palettes and UI utilities
Practical helpers for building in‑SVG UI: grids, overlays, control panels, labels, etc.
Comprehensive TypeScript types
A proper type layer for the Snap API and the new geometry/interaction extensions, which makes working in modern tooling substantially more tractable.
The point is not to turn Snap into something else; it is to make the “shape‑first” approach viable for the kinds of problems front‑end developers actually face now.
Towards 3D and non‑linear transforms
So far the discussion has been abstract: geometry, interaction, “UI helpers”. To make this more concrete, let’s look at the new non‑linear transform and 3D‑ish tools, because they stress‑test everything else.
Non‑linear transform gallery
The non‑linear demo page wires Snap into a set of animated “fields” that bend a grid in time:
- Some presets sweep a sine wave along a diagonal axis.
- Others behave like a cantilever, with the grid “hinging” around a line.
- There are radial ripples, bulges, and compound warps combining several effects.
You can see them here:
Conceptually, each demo defines a time‑dependent transform over the SVG plane and asks Snap to apply it to every point of a grid. Many of these fields internally use 3D transforms (rotations in depth, perspective projection) and then project back to 2D, which is why they feel “3D‑ish” even though they are rendered in plain SVG.
The point is not that every UI will use such warps; it is that the extension layer can describe genuine fields over the SVG plane, rather than only global affine transforms.
Localized warps and “warp fields”
The warp demo takes the same machinery but makes it local and interactive:
- A circular “warp field” is drawn on the stage.
- A smaller “probe” grid can be dragged around inside that field.
- Depending on the preset (twist/pinch, bulge, ripple, 3D sine depth), a localized warp is applied only where the probe intersects the field.
Try it here:
Warp fields (localized non‑linear warps) demo
This is the sort of interaction Snap.svg is particularly suited for: SVG is your scene graph, and the library gives you a programmable metric on that graph. Warp fields are defined declaratively; dragging and bounding‑box helpers do the bookkeeping.
3D Bezier projection demo
Non‑linear warps are one axis of extension; the other is explicit 3D curves and projections. The Bezier projection demo illustrates this:
- You control a 3D Bezier curve via sliders for the Z‑coordinates and direct manipulation of control points in multiple orthographic views.
- The same curve is shown simultaneously in XY, XZ, and YZ orthographic projections, a perspective camera view, and a custom “isometric‑like” projection.
See the demo here:
Internally, the curve is represented by an extended Bezier object that supports 3D coordinates, projection math, and interactive editing, all built on top of the original Snap.svg element model.