primitive.js

This is a JavaScript port of the https://primitive.lol app, originally created by Michael Fogleman. Its purpose is to re-draw existing images using only primitive geometric shapes.

You can find some additional (technical) information in the GitHub repository. This page acts as a small demo where you can experiment with the algorithm.

Try it in your browser!

Pick an image file

From your computer:
From URL (must be CORS-enabled):

Check or adjust various rendering options

Add geometric shapes (large number: better results, slower)

Use these shape types:

Triangles
Rectangles
Ellipses
Smileys

Fill background with:

an auto-detected color
a fixed color:

Starting opacity:

Adjust opacity automatically

Computation size: pixels (smaller is faster)

Viewing size: pixels

Start every iteration with random shapes (larger number: more precise results, slower)

Stop shape optimization after failures (larger number: more precise results, slower)

Hit the button to start

This is a CPU-intensive process. It might take a while.

Original

Result

Raster image: right-click to save
Vector image: copy&paste data from the text area below