◯ tracey — an SVG line art generator

+ about - hide this

What's this?

Tracey is an online tool to transform (boring) raster images into SVG line art. To get started, simply upload a PNG or JPG image. Then, play around with the settings until you're ready to download the final product.


How it works

upload raster image ⟶ convert to grayscale ⟶ apply Gaussian blur ⟶ apply threshold & Canny edge detection ⟶ map contours ⟶ smooth contours ⟶ convert to SVG paths ⟶ Bézier curve splining ⟶ export as SVG

upload

drag/drop anywhere or click here to upload an image ( hint: portraits & headshots work the best )

customize

[[ params.threshold_value ]]
[[ params.min_edge_value ]]
[[ params.max_edge_value ]]
[[ params.min_path_area ]] px2
[[ params.max_path_area ]] px2
[[ params.path_complexity ]]
[[ params.stroke_width ]] px
[[ params.roundness ]]

result

WARNING — too many paths can result in a large file size Drag to select paths and hit delete ⌫ to remove them.
path { animation: dash 2s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } }