Skip to workshop
f flexiforge
SVG to 3D print
Loading geometry…
Preparing preview…
Drag to orbit · Scroll to zoom
Flat print footprint · not screen scale

Calculating the flat footprint…

0°Demo only · STL stays flat
OVERALL PRINT SIZE—
PIECES / HINGES—
JOINT TYPECaptive pin
Preparing the geometry engine…

UNDER THE HOOD · NO CODING EXPERIENCE NEEDED

How your drawing becomes a 3D print

Start with one small tag. At each step, see what changes, what stays, and why. Open the numbers and code when you want to look closer. Student mode adds predictions and questions beside the example.

Add explanations and design prompts.

Back to the studio ↑

Every print: drawing → give it height → export a model for slicing.

For a Flexi object: also divide it into pieces and add interlocking hinges. Solid / separate items skips those steps. Two-layer keychains joins a base and raised top for STL, or keeps them as two filament parts for a two-color 3MF.

Start with 01. Then try the same steps on your own artwork. These lessons do not change your studio design unless you choose “Try this shape in the studio.”

01Follow one shapeSeven steps from SVG to STL · interactive example

ONE SHAPE · FOLLOW ITS DATA

From a little tag to a hinged object

Follow a rectangle with one circular hole. We choose a physical size of 60 × 30 mm (2.36 × 1.18 in). Its 3D stages are built by the same engine as your designs; the first three diagrams explain the flat drawing.

This tag uses an exact layout and 0.35 mm clearance. Predict what one change will do, then compare. No automatic fitting is used here.

Drag to orbit · Scroll to zoom · Drawings use an overhead view

STEP 1 OF 7

What changes
What stays

See the code and real data

What comes in
What comes out


Preparing the example…


02Explain my objectFollow your current artwork through the geometry engine
Take a snapshot of your current artwork and settings, then follow the same ideas on your design. This lesson runs separately from the studio. Flexi stages share one fitted hinge layout so the pieces stay consistent between steps.
See this stage’s recipe and result
When interactive 3D is available, drag to orbit and highlight one piece. Orange markers locate hinges. A static view shows the same generated model without highlighting. Reload this lesson after changing your studio design.
03Understand raised details and pocketsAn optional side-view experiment · see the height and the floor
This is a separate example with a ¼-inch (6.35 mm) base. It does not add decorations to the tag or change your studio settings.
Worked equations keep the exact values. Diagram labels round to hundredths; ≈ means approximately.
Connect the drawing colors to these operations
SVG studio: enabled red artwork adds height; enabled green artwork makes pockets. If an operation is off, those regions remain part of the base interpretation. A closed outline describes an area, not a pen-width groove.
Fall: choose Raise or Carve in for each detail. Blue and striped purple identify operations in the drawing. Two-layer keychains: the second SVG always adds height. Choose its filament color separately; the two-color 3MF stores that choice. The color inside either uploaded SVG does not set its operation here.
Details may be trimmed near boundaries or hinges. Pockets are applied first; raised artwork is clipped to the remaining top surface, so an overlapping pocket stays open. These diagrams show the idea before that trimming. STL stores surfaces, not these instruction colors.

04Make a two-color keychain fileTwo SVGs, two heights, two filament parts · pause the 3MF flow

In Two-layer keychains, upload the base and raised artwork as separate SVGs. This fixed example uses a 60 × 30 mm tag, a 2 mm white base, and a 2 mm Carolina blue star. Choose a step to slow down what the app does. For a name with no SVG, use Bubbly name keychains.





Read the code as a recipe

This readable version is teaching shorthand. Intersection means keep the area that belongs to both shapes; translate means move it without changing its size.


supportedArt = intersection(topDrawing, baseDrawing)
basePart = extrude(baseDrawing, baseHeight)
topPart = moveUp(extrude(supportedArt, addedHeight), baseHeight)
3MF = package(basePart → filament 1, topPart → filament 2)


  1. Find support in X and Y. Intersect the top drawing with the base. Artwork outside the base or over a keyring hole is removed.
  2. Build the base in Z. A 2 mm extrusion occupies Z = 0–2 mm.
  3. Lift the second part. Another 2 mm extrusion starts at Z = 0–2 mm; moving it upward by 2 mm places it at Z = 2–4 mm. They meet at Z = 2 mm. Total height is 2 + 2 = 4 mm.
  4. Attach material instructions. Both parts retain the same X/Y placement. The file names them Base and Raised top and assigns filament 1 and 2. Color choices change the preview color stored for each assignment, not the geometry.


Actual source excerpt · geometry and 3MF assembly

layers-geometry.js builds the color top after clipping the artwork. keep() tracks temporary shapes so the engine can release them later.


const colorTop = keep(
  keep(supported.extrude(topThickness))
    .translate([0, 0, baseThickness])
);
// Returned as two named meshes:
colorParts: [
  { name: 'Base', ...asMesh(body) },
  { name: 'Raised top', ...asMesh(colorTop) }
]


layers-3mf.js writes each mesh’s vertices and triangles. Its assembly then refers to both objects, preserving their shared coordinates:


<object id="4" type="model" name="Keychain">
  <components>
    <component objectid="2"/>  <!-- Base -->
    <component objectid="3"/>  <!-- Raised top -->
  </components>
</object>
The object name follows your base filename. The IDs above connect the assembly to its two mesh objects; Creality metadata assigns their filaments.


What is inside the 3MF, and what happens next?

Package entryIts job
3D/3dmodel.modelTriangle surfaces, millimetre units, two material colors, and the assembly.
Metadata/model_settings.configNames the parts and assigns Base to filament 1, Raised top to filament 2.
Metadata/project_settings.configThe two preview colors and a generic PLA palette. Choose profiles for your actual spools in Creality Print.
[Content_Types].xml and _rels/.relsTell the 3MF reader what the package contains and where its model is.


Creality Print supplies your printer/nozzle profile and slicing settings. Confirm the two part assignments, slice, inspect the layers, then map the filaments to the loaded CFS slots. Filament numbers are not physical slot numbers. This export contains no sliced toolpaths.


Try the two-layer keychain workshop


05Connect the steps to the codeWhat each part of the app receives, changes, and returns
Reference diagrams: these paused illustrations use a fixed tag: 60 × 30 mm, 6.35 mm thick, three pieces, up/down hinges. They do not change with the live example above. The small code blocks are teaching shorthand.
    

  1. 01
    Read the drawing
    You choose an SVG. svg-import.js reads its paths and turns curves into many short edges. It applies transforms and basic styles, treats closed outlines as filled shapes, and keeps enclosed holes—like a ghost’s eyes.
    Result: a list of 2D points describing the outside edges and holes.
    2. 

  2. 02
    Send the recipe
    app.js collects your size, thickness, segment count, cut direction, bend direction, and clearance. Inches are converted to millimetres internally using 1 inch = 25.4 mm. It sends the recipe to worker.js, a background helper that keeps the page responsive while the maths runs.
    Result: the outline plus your settings, ready for the geometry engine. With Bonus · raised red details enabled, red shapes travel separately as the raised layer; other colors supply the base. Enabling green pockets sends those shapes as cutting regions: pocket depth is measured from the base’s top, while red adds height above it.
    3. 

  3. 03
    Make a solid
    geometry.js uses Manifold, a library for making 3D shapes. It combines overlapping filled areas, scales the active base to your chosen longest dimension, and extrudes it: pulling a flat shape upward to the thickness you chose. A ¼-inch extrusion is 6.35 mm deep.
    Result: solid bodies with the original cutouts running through them. Solid / separate items keeps disconnected artwork as separate pieces.
    In Solid / separate items, optional Edge finish cuts a flat bevel (chamfer) or a rounded transition (fillet) along outside top rims or green pocket rims. The finish size is the bevel width or curve radius. The bottom and pocket floors remain flat. The app checks that a finish does not erase a thin top, open a through-hole, or merge pocket rims across a narrow divider.
    4. 

  4. 04
    Cut, then connect
    In Flexi mode, Segment divides the body with parallel seams. Join adds a central tongue and axle on one side, and two knuckles with holes on the other. Small empty gaps let the parts move. With Sideways / in-plane selected, the axle points vertically: retaining heads hold a receiving ring, and wider, angled seams make room for left/right swing. This changes the generated STL, not just the animation. Automatic fitting can shift a nearby seam when a bevel leaves a lobe connected only through the middle. Each candidate is rebuilt and checked before trying other directions or fewer pieces.
    The branching leaf is a special recipe: several hinged lobes share one central body. Imported SVGs use the parallel-seam recipe.
    Result: separate, interlocking bodies checked for disconnected pieces and overlaps in the flat print pose. Enabled pockets and raised details are then applied to these bodies, keeping room around the joints.
    5. 

  5. 05
    Show it and save it
    The engine returns a mesh—lots of tiny triangles describing the surface. Three.js draws those triangles in the preview. The bend control rotates the pieces around their hinges. The blue size rectangle shows the flat model’s width and height; zooming the screen doesn’t change its real dimensions.
    binarySTL() writes the flat mesh to an STL file for your slicer. STL does not store a unit label, so this app always writes millimetre coordinates. Choose millimetres in your slicer, even when you designed in inches.
    Result: an STL of the flat assembly. The preview bend never changes the export. The two-layer keychain page also offers 3MF: two aligned parts with separate filament assignments. layers-3mf.js packages those meshes with their colors and millimetre units.
    6. 



06Check the result and prepare to printAutomatic fitting, dimensions, and what the preview can tell you
Requested recipe → fitted result → evidence
Check what was actually made. “Find a layout that fits” can move a nearby seam, change the cut direction, or reduce the number of pieces. Read the result message and rigid-section count. Turn it off when you want to test an exact recipe.
Two different directions. Cut direction turns the seams across the drawing. Bend direction chooses the hinge axis: a horizontal pin folds up/down; a vertical pivot swings sideways. The blue rectangle measures the flat footprint, not the bent pose.
Preview → model file → slicer → print. Flexi and solid studio exports use STL for surfaces; the two-layer page also offers a two-color 3MF with separate filament parts. Your slicer turns the model into printer instructions. For a Flexi object, a physical joint test supplies evidence about fit and movement.
Where does the work happen? In your browser. Your uploaded SVG is parsed locally and the geometry runs in a background worker; the app doesn’t upload your drawing.
What still needs a real-world check? The flex preview illustrates motion; it doesn’t simulate collisions, material strength, printer tolerances, or support needs. Print the joint coupon to check clearance before printing the whole object.