How to Turn an SVG Dieline into a 3D Mockup (Beginner Tutorial)

Click Open the editor below or hit mockfold.com/editor directly. Upload your own SVG or download it from the above link (see note)

The editor is split into four areas:

• Center: two viewports side-by-side, the flat 2D dieline on the right and the 3D preview on the left.
• Right sidebar: the properties panel with four tabs across the top: Dieline (upload + SVG prep), Artwork (exterior + interior images), Export (output formats), and Settings (material, folding setup, keyframes).
• Bottom: the fold controls strip with a slider, play, and reset.
• Left edge: a thin tool strip for visibility toggles (fold lines, cut lines, grid) and presentation modes (panel colour, shadow, edge colour). These are Pro-gated.

A dieline is the flat 2D blueprint of a box before it's folded. MockFold reads two stroke types in your SVG to know where to cut and where to fold:

• Solid black lines are cuts, the places where the cardboard gets cut by the die.
• Red dashed lines are folds, the places where the cardboard creases.

The editor auto-detects these by stroke colour and dash pattern. You can see them highlighted in the badge counts on the left tool strip.

Before MockFold can fold anything, it needs to know which panel stays flat. That panel is the bottom, and every other panel folds around it.

1. Open the Settings tab in the right sidebar (the control icon).
2. Under Folding Setup, click Pick bottom panel. The 2D view becomes click-aware.
3. Click the panel in the 2D dieline that should stay flat.
4. A green "Bottom panel pinned" indicator appears once it's set.

With a bottom panel pinned, drag the fold slider which can be found under the bottom pannel section from 0% to 100%. The 3D preview animates from flat to fully folded as you scrub. Hit Play to watch the fold play through automatically, or Reset to snap back to flat.

You can also save keyframes under Folding Setup to capture specific fold poses (flat, half-folded, fully folded) and animate between them. If you just want a quick fold animation video, skip the keyframes, the MP4 / WebM export in Step 7 records the slider sweep automatically.

Open the Artwork tab in the right sidebar. There are two upload slots:

• Exterior is the printed outside of the box, the side a customer sees.
• Interior is what shows when the box is opened.

Drop a PNG or JPG into either slot (or both). The image gets mapped onto the dieline using the SVG's viewBox as the canvas, so artwork you designed at the dieline's exact dimensions lines up pixel-perfect with each panel.

You can also use the swap action to flip which file goes on which side without re-uploading.

In the same Settings tab where you pinned the bottom panel, the Material section controls how the cardboard looks: corrugated, paperboard, kraft, or none (single-layer). Each one has its own thickness, flute size, and surface texture, and they all affect how light bounces off the box in 3D.

For a typical product box, paperboard at 1mm thickness reads close to retail folding-carton stock. For a shipping box, corrugated at 3mm with a 6mm flute reads B-flute cardboard. The slider previews update live, so adjust until the box feels right.

Use your mouse or trackpad to orbit around the 3D preview:

• Left-drag (or one-finger drag on trackpad) to rotate.
• Right-drag (or two-finger drag on trackpad) to pan.
• Scroll (or pinch) to zoom.

MockFold automatically remembers your camera position every time you finish a drag or zoom, so you don't need to "save" anything manually. The framing comes back the same when you reopen the project, save the file, or come back to the tab later.

You're ready to export your mockup. Open the Export tab in the right sidebar:

• PNG / JPEG for hero shots, social, decks. Pick a custom resolution and DPI for print.
• MP4 / WebM to record the fold animation as a video clip, up to 4K. Pick the length, frame rate, and whether the box folds once or folds-and-unfolds. Great for ProductHunt videos, Twitter/X posts, and pitch decks.
• GLB / glTF / OBJ to drop the 3D model into Blender, Cinema 4D, Maya, Unity, or any AR pipeline. MockFold gets you a folded, textured starting point in seconds, so you can spend your time on lighting, animation, and final polish in your tool of choice.
• HTML viewer for sharing an interactive 3D model with a client over a link.