Cube Icons

Pixel drawings built from cubes that fly in, settle and fly apart. Point at an icon to build it, and shape it with everything on the right: start from a preset, then change the look, colour, depth and motion. The code under the controls always matches what you see. New here? Get started takes two minutes. Draw your own icons, or turn an image into one, in the editor, and see twenty-eight ways to use them in the recipes.

Presets
Look
Style
Background
Colour
Shadow
Shape
View
Motion
Easing
Fly in from
As code · —

        

Icons

Drawn in the current settings. Point at one to build it above; click to keep it there.

In use

A few of the twenty-eight recipes, running live. Each one opens with its code.

Live clockThe time, re-forming every second WeatherOne stage, four forecasts LoadingProgress you can watch build Text in cubesAny word, in a pixel font Star ratingStars that light up as you hover Eleven looksOne option changes the style

In a menu

Nothing shows until you hover; each item builds its own object.

Scroll assembly

Each object builds as its section reaches the middle of the screen and comes apart as it leaves. Scrub ties the build to the scroll, cube by cube from the bottom row up; Trigger flies the whole icon in once half of it is in view. One line each: CubeIcons.scroll(stage, "rocket").

01

An idea

It starts as a few cubes and a hunch.

02

Build it

Row by row, the thing takes shape.

03

Launch

Then it leaves, and the cubes go with it.

Interactions to try next

Explode, magnet, morph sequences and text are built now: see the recipes.

Dither colourDraw every other cube in a second colour for a halftone feel, in a one-ink style.
Icon from an imageDrop a small PNG on the editor, snap each pixel to the nearest palette colour, and get rows back.
Drag to turnDrag the stage to swing the depth further than mouse tilt does, and let it ease back on release.
Export a clipRecord a stage's canvas while it builds and save a GIF or WebM for places that can't run scripts.