Isoform
Get the skill

Isoform

Isometric icon specimen

Vol. 01 · 8 figures

Drawings: Isocons, CC BY 4.0

MMXXVI

Isoform.

Turn isometric icons into animated illustrations.

An agent skill for the 1,007 free Isocons. Name an icon, get one HTML file that plays.

$ npx skills add choicealex/isoform
Browse the figuresHow it works →

Fig. 03 — Rocket

rocket · rounded-left

146 lines · plays on its own, hover or tap takes over

Direction

01The set.

Every figure, small. Each is an Isocons icon, taken apart and made to act.

01water-bottle
02bolt
03rocket
04shopping-cart
05cart-push
06house
07car
08local-gas-station

02Six views.

Isocons draws every icon with rounded or sharp edges, from the left, the top and the right. The skill works from any of them.

Edge
Edge
Rounded edges
Sharp edges
Left
Top
Right
Left
Top
Right
house
House, rounded edges, from the left
House, rounded edges, from the top
House, rounded edges, from the right
House, sharp edges, from the left
House, sharp edges, from the top
House, sharp edges, from the right
settings
Settings, rounded edges, from the left
Settings, rounded edges, from the top
Settings, rounded edges, from the right
Settings, sharp edges, from the left
Settings, sharp edges, from the top
Settings, sharp edges, from the right
rocket
Rocket, rounded edges, from the left
Rocket, rounded edges, from the top
Rocket, rounded edges, from the right
Rocket, sharp edges, from the left
Rocket, sharp edges, from the top
Rocket, sharp edges, from the right
shopping-cart
Shopping cart, rounded edges, from the left
Shopping cart, rounded edges, from the top
Shopping cart, rounded edges, from the right
Shopping cart, sharp edges, from the left
Shopping cart, sharp edges, from the top
Shopping cart, sharp edges, from the right
key
Key, rounded edges, from the left
Key, rounded edges, from the top
Key, rounded edges, from the right
Key, sharp edges, from the left
Key, sharp edges, from the top
Key, sharp edges, from the right
credit-card
Credit card, rounded edges, from the left
Credit card, rounded edges, from the top
Credit card, rounded edges, from the right
Credit card, sharp edges, from the left
Credit card, sharp edges, from the top
Credit card, sharp edges, from the right

A figure is made from one view; ask for another by name, /isoform-animate key sharp-top. All 1,007 icons, in every view

03Specimen sheet.

One figure in full: its story as frames, the six ways Isocons draws it, the sizes it reads at.

Specimen of
a.

Frames

One loop, held at five moments.

0.0srest
0.0sact
0.0sact
0.0shold
0.0sreturn
Bolt · one loop of 0.0s, then it starts again
b.

Views

Isocons draws every icon six ways. The figure animates the marked one.

Rounded · leftanimated
Rounded · top
Rounded · right
Sharp · left
Sharp · top
Sharp · right
c.

Sizes

The same figure, playing at each width.

320px

200px

120px

72px

Every figure is checked at 240px wide. Below that the story still plays; the detail is the first thing to go.

04The wall.

Every figure, playing. Hover for the file and the prompt; open one to inspect it.

Fig. 01Social · 155 lines

Water Bottle

A fill, a quota, a balance

Inspect
Fig. 02UI Actions · 153 lines

Bolt

A connection, live

Inspect
Fig. 03Social · 146 lines

Rocket

Launch, deploy, go live

Inspect
Fig. 04Business & Payments · 98 lines

Shopping cart

Added to cart

Inspect
Fig. 05Business & Payments · 116 lines

Shopping cart

A purchase on its way

Inspect
Fig. 06UI Actions · 137 lines

House

Welcome home

Inspect
Fig. 07Transportation · 158 lines

Directions car

Lights on, drive mode

Inspect
Fig. 08Maps · 144 lines

Local gas station

A running total, a balance

Inspect

Fig. 09 · yours

Pick any of the 1,007 Isocons. Your agent draws the next one.

$ /isoform-animate a lighthouse
Get the skill

05Inspect.

One figure on its construction grid, solid or in parts, with its controls and its code.

Fig. 06

house · sharp-top

intensity 0.50 → 55

House

Fig. 06 · UI Actions

A house, seen from the top: the lights come on and spill out of the doorway. Bring the pointer near to hold the light.

Style
Download ↓
/isoform-animate house sharp-top

Icon “House” (sharp-top) from Isocons, CC BY 4.0. The credit travels inside the file.