Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
Oct 3, 2015
Oct 3, 2015
Oct 4, 2015
Jun 20, 2016





(ThreeJS demo) - (source)

A high-level module to convert a SVG <path> string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs.

Built on top of cdt2d by @mikolalysenko, and various other modules.


npm install svg-mesh-3d --save


Here is an example using a simple path:

var svgMesh3d = require('svg-mesh-3d')

var path = 'M305.214,374.779c2.463,0,3.45,0.493...'
var mesh = svgMesh3d(path)

The returned mesh is a 3D indexed "simplicial complex" that can be used in ThreeJS, StackGL, etc. It uses arrays for vectors and follows the format:

  positions: [ [x1, y1, z1], [x2, y2, z2], ... ],
  cells: [ [a, b, c], [d, e, f] ]

Or, to load a mesh in the browser from an SVG file:

var loadSvg = require('load-svg')
var parsePath = require('extract-svg-path').parse
var svgMesh3d = require('svg-mesh-3d')

loadSvg('svg/logo.svg', function (err, svg) {
  if (err) throw err

  var svgPath = parsePath(svg)
  var mesh = svgMesh3d(svgPath, {
    delaunay: false,
    scale: 4



To run the demos from source:

git clone
cd svg-mesh-3d

# install dependencies
npm install

# ThreeJS demo
npm run start

# Canvas2D demo
npm run 2d


mesh = svgMesh3d(svgPath, [opt])

Triangulates the svgPath string into a 3D simplicial complex. The positions in the 3D mesh are normalized to a -1.0 ... 1.0 range.


  • delaunay (default true)
    • whether to use Delaunay triangulation
    • Delaunay triangulation is slower, but looks better
  • clean (default true)
    • whether to run the mesh through clean-pslg
    • slower, but often needed for correct triangulation
  • simplify (default 0)
    • a number, the distance threshold for simplication before triangulation (in pixel space)
    • higher number can produce faster triangulation
  • scale (default 1)
    • a positive number, the scale at which to approximate the curves from the SVG paths
    • higher number leads to smoother corners, but slower triangulation
  • normalize (default true) a boolean, whether to normalize the positions to -1 .. 1
  • randomization (default 0)
    • a positive number, the amount of extra points to randomly add within the bounding box before triangulation
    • higher number can lead to a nicer aesthetic, but slower triangulation

Other options are passed to cdt2d, such as exterior (default false) and interior (default true).

See Also


MIT, see for details.