Vector engineering

How every javii icon
is built.

The geometry paints itself in. Hover any tile to dissolve the engineering and reveal the live icon — then watch the lines redraw on exit.

1u = ¹⁄₃₂ of the canvas · hover to reveal

TextLab

Messaging bubbles · production paths

HeybaselineW = 22uH = 12ur = 22 / Htail · 17×21 vb
01

iMessage

r = 22 (CSS) · tail vb = 17×21

hi9:41TR · sharpbaselinecap-heightW = 22uH = 12ur = 2u
02

WhatsApp — Sent

r = 10 · TR sharp · fin vb = 8×13

StampLab

Perforation paths from stamps.js

Pr = 0.28·P14·P = W14·P = H
03

Postage — Square

postagePath(w,h) · n=14 · r=0.28·P

θ = 15°R = 10un = 24 perforations · θ = 360°/n
04

Postage — Circle

circularPostagePath · n=24 · θ=15°

Instatag

Pill + verified rosette + tip notch

@javiitoolsbaselineW = 21uH = 8ur = 0.34·s12 lobes · 30°tip h = 0.20·s
05

Mention pill — Story

r=0.34·s · tip(h=0.20·s,w=0.34·s) · 12-lobe rosette

LocationLab

Capsule pill + Apple-style location pin

SpainbaselineW = 22uH = 12ur = 8 · s/24tip · (12,22) vb
06

Location pill — gradient pin

W = 22u · H = 12u · pin + label centred · pin vb = 24

ChartLab

Bar trend + concentric gradient rings

baseline · v = 0peak · v = 145W = 22uH = 14un = 12 · gap = 0.4u
07

Trend bars

n=12 · gap=0.4u · radius=min(0.55u, bw/3)

sw = 0.055 · DΔr = 0.075 · D4 rings · stroke linecap = round
08

Gradient rings

4 rings · Δr = 0.075·D · sw = 0.055·D

FolderLab

Cartoony tab folder · 2 photos peeking out

W = 22uH = 13utabpocket · topphoto · rot −8°photo · rot +12°
09

Folder · photos peeking

tab + pocket · 200×150 vb · photos rot ±10°

made by javitools.javii.es