Simple 3D SVG
https://github.com/tscircuit/simple-3d-svg- Category
- Developer Tools
- Rank
- No. 1621Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- tscircuit
- GitHub
- 79 stars
- Date
About
An extremely simple 3D SVG renderer in just 20KB minified. Render 3D scenes as inline SVG without WebGL.
What it does
You describe boxes or imported triangle meshes, position a camera, and receive SVG markup. The renderer projects geometry into two dimensions, shades faces, sorts scene elements by depth, and can add labels, textures, grids, origins, or axis guides.
Why it's ranked here
Its narrow output model makes it useful for portable previews and visual snapshots. It handles ordinary boxes plus STL, OBJ, and 3MF meshes without requiring an interactive 3D viewer. The package metadata does weaken the README’s zero-dependency claim by listing two runtime dependencies.
What's good
The input model stays compact: positions, dimensions, colors, rotations, camera settings, and optional model URLs. Meshes can be centered, rotated, positioned, or uniformly fitted inside box dimensions. Top-face images use subdivided clipped triangles for better perspective mapping, while repeated model URLs are cached.
Tradeoffs
This is a projected illustration system, not a general 3D engine. SVG only offers affine text transforms, so labels on angled box tops can look wrong. Geometry behind the camera is skipped rather than clipped. Model loading catches failures and logs warnings, which can leave a requested box without its mesh.
How to use it well
Use it for deterministic diagrams, lightweight previews, PCB-oriented snapshots, and pages that need inspectable SVG output. Keep scenes modest, choose the camera explicitly, and raise texture subdivision only when image projection needs more accuracy. Choose another tool for interactive navigation, physically based rendering, or exact perspective text.
Technical notes+
package.json defines an ESM package built from lib/index.ts with tsup and generated declarations. lib/index.ts exports the renderer, public scene types, and STL, OBJ, and 3MF loaders. lib/render-elements.ts projects camera-space geometry, caches fetched meshes by URL, shades triangle normals, and associates subdivided texture triangles with clipped SVG images. lib/render-svg.ts serializes those elements and optional grid, origin, and axis overlays. lib/loaders/threemf.ts uses fflate and fast-xml-parser, matching the two runtime dependencies declared in package.json and contradicting README.md’s zero-dependency wording.
Observed
- Primary language
- TypeScript
- Packaging
- ES module package published as @tscircuit/simple-3d-svg
- Interface
- Library API returning SVG markup asynchronously
- Model formats
- Built-in URL loaders for STL, OBJ, and 3MF
- Runtime dependencies
- fast-xml-parser and fflate
- Output surface
- Inline SVG markup with optional background, grid, origin, and axis guides
Read from README.md, package.json, lib/mesh.ts, lib/vec3.ts, lib/index.ts, lib/color.ts, lib/types.ts, lib/affine.ts, lib/render.ts, lib/geometry.ts, lib/render-svg.ts, lib/render-elements.ts, lib/loaders/obj.ts, lib/loaders/stl.ts, lib/loaders/threemf.ts.
What it can do
Render 3D scenes as SVG
3D scene data → Inline SVG graphics
Convert 3D models to vector graphics
3D model data → SVG vector elements
Generate lightweight 3D visualizations
3D geometry and scene parameters → Scalable vector graphics representation
Create browser-compatible 3D graphics
3D scene definitions → Web-ready SVG elements
Produce WebGL-free 3D rendering
3D objects and lighting data → Pure SVG 3D visualization
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.