// project 04 - teardown

Constructor — print-on-demand SVG editor

An SVG editor for customizing prints across dozens of apparel and accessory products — T-shirts, hoodies, caps, bags, shorts, mugs, and more. My first Vue application, so the editor's logic and the framework were both being learned at once. Still the hardest thing I've written.

Role

Front-End Engineer

Stack

Vue 2 · Hand-written SVG geometry

Products

Apparel & accessory types

Output

Print-exact SVG → production

Vue 2
SVG
Vector transforms
Layer ordering
Print serialization
01

The editor

Constructor — Product Editor
T-ShirtHoodieCapMugTote BagShorts+34 more
Add
Arrange
Export
BTM
Layers
Logo textZ 3
Sleeve markZ 2
Base garmentZ 1
Transform
Rotate-6°
Scale1.15×
X70px
Y100px
02

The geometry layer

Rotation

Matrix transform per layer, not CSS

Scale

Proportional resize, origin-aware

Layer order

Explicit z-stack, hand-managed

Serialization

Canvas state → exact print-ready SVG

03

Build notes

Two learning curves at once

First Vue app and hardest editor logic, at the same time — component architecture and vector math were both being figured out together.

Hand-written vector transforms

Rotation, scaling, and layer ordering were built directly on SVG's own coordinate system rather than a library — full control over exactly what shipped.

The file was the product

What the user assembled serialized straight to SVG and went to print — no intermediate rendering step, so the geometry had to be exact, not approximate.

One editor, dozens of garments

T-shirts, hoodies, caps, bags, shorts, mugs and more each needed their own print area and outline, but shared the same layer/transform engine underneath.

No AI copilot for this one

Built before LLM coding assistants existed — the transform math and layer-ordering edge cases got worked out through spec-reading, forums, and trial and error, not a quick prompt.