Version 1.2.0

domo3D

A tiny standalone JavaScript library that mounts compact rotating 3D wireframe solids on any web page. One file, one call, no dependencies.

Try the playground

A live trefoil knot, drawn by the library right now. Hover it.

"I have always wanted 3D solids and animation to be easy on the web. Not a scene graph, not a WebGL engine, not 200 KB of framework - just one file, one call, and a beautiful wireframe object turning quietly in the corner of the page. I could not find a library like that, so I made domo3D."

Obilo Nwokogba · obilo.io · creator of domo3D

Everything grew.

The library keeps its one-file, zero-dependency soul. The catalog, the pointer choreography and the motion system all expanded.

46 new shapes

Fourteen filleted inset-face solids, five ornate pipe-ridge domes, thirteen shapes distilled from SVG icons, a twisted family with coils, spirals and knots, and six novel wireframes including a tesseract projection and the trefoil knot. 106 in all.

Eight new hover effects

face, thicken, vibrate, extrude, lighten, darken, deform and twist join the original seven - fifteen ways for a solid to answer the pointer.

Eleven rotation types

x, y, z, xy, xz, yz, tumble, wobble, bounce, xyz and bounceWobble - from a flat turntable spin to a full drifting carnival ride.

A human speed scale

Speeds run from 1 (barely alive) to 8 (a blur). Plus five named line weights and six new palettes.

LIVE EXHIBIT - filletDodeca, coral, hover: face

One line to install.

domo3D is a single standalone file with zero dependencies. Download it, drop it anywhere in your project, and reference it like any other script. That is the whole install.

html

<script src="domo3d.js"></script>

Try out all the shapes and styles

Cycle every option with the pill controls, then watch the code underneath change - it is the exact code responsible for the image you see.

LIVE PREVIEW - HOVER THE SOLID

javascript

Tip: try the bounce and bounceWobble axes on a star or a gem - the full carnival ride.

Fifteen ways to answer the mouse.

Set hover to any of these. The face-seeking modes - face, thicken and extrude - track the exact polygon under the cursor as the solid turns. On a dark site, add background: 'dark' so the face wash glows instead of shading.

hover	what happens
`none`	No pointer events at all: the canvas is fully click-through.
`pause`	The object stands still while the pointer is over it.
`slow`	The rotation slows while the pointer is over it.
`fast`	The rotation speeds up while the pointer is over it.
`grow`	The object scales up slightly. The default.
`shrink`	The object scales down slightly.
`glow`	The neon glow intensifies.
`face`	The polygon under the pointer is washed with a flickering translucent tint - dark on light pages, luminous white on dark pages (see background). The flicker follows the cursor from face to face as the solid turns.
`thicken`	The edges of the polygon under the pointer swell until it rotates away or the pointer leaves.
`vibrate`	The solid shivers with a nervous, non-metronomic jitter.
`extrude`	The face under the cursor bulges outward and eases back flush when it rotates away.
`lighten`	The whole solid turns translucent, as if lit from behind.
`darken`	Every line drops toward ink while the pointer is over.
`deform`	Straight edges bend into living curves. Four flavors via deform: wave, bulge, jitter, swirl.
`twist`	The solid twists like a corkscrew while the pointer is over it.

Eleven rotation types, a 1-to-8 speed scale.

Pick a motion with axis, dial the tempo with speed (1 barely alive, 8 a blur; raw degrees per second still work), and choose one of five named line weights with thickness.

axis	motion
`x`	Spins end-over-end about the horizontal x axis.
`y`	Spins upright, like a turntable, about the vertical y axis.
`z`	Spins flat, like a coin on a table, about the z axis.
`xy`	A diagonal tumble between the x and y axes.
`xz`	A diagonal roll between the x and z axes.
`yz`	A diagonal swing between the y and z axes.
`tumble`	A random diagonal axis, re-rolled every mount. The default.
`wobble`	Spins upright while its axis precesses like a slowing top.
`bounce`	An upright spin plus a vertical hop, twice per revolution.
`xyz`	The axis itself drifts through space on a never-repeating path.
`bounceWobble`	Wobble precession plus axis drift plus the bounce - the full carnival ride.

The speed scale

notch	deg/sec	feel
`1`	1.5	A whisper: one revolution every four minutes.
`2`	3	A very slow drift, museum-glass slow.
`3`	6	Slow and meditative.
`4`	12	Relaxed. The classic gentle embed.
`5`	22	An easy, confident turn.
`6`	38	A touch above the old default.
`7`	65	Energetic.
`8`	110	A blur; the object reads as a spinning emblem.

Line weights

name	px	weight
`hair`	0.7	Gossamer lines, for fine lattices and spheres.
`fine`	1.0	Light, technical drawing weight.
`normal`	1.5	The classic default weight.
`bold`	2.2	Confident, poster-like weight.
`heavy`	3.0	Chunky lines, for hero objects.

LIVE EXHIBIT - starPrism, ice, axis: bounce

Many simple ways to use domo3D on your website.

Every snippet below is complete and ready to copy. Most are a single call - if you can add a script tag, you already know enough to use domo3D.

The absolute minimum

Load the file and call mount() with no arguments. You get a random shape, spinning at the center of the screen.

<script src="domo3d.js"></script>
<script>
  Domo3D.mount();   // one call, done
</script>

The flagship corner object

The classic embed: an icosahedron tumbling in the bottom-right corner of the viewport, growing slightly on mouse-over.

Domo3D.mount({
  shape: 'icosa',
  anchor: 'bottom-right',
  offset: 26,
  size: 260,
  palette: 'tron',
  axis: 'tumble',
  hover: 'grow'
});

Zero-config data attribute

No JavaScript at all. On page load, domo3d.js finds every element with a data-domo3d attribute and mounts the JSON config inside it.

<div data-domo3d='{"shape":"bipyramid","size":300,"palette":"ice","axis":"xz","hover":"grow"}'></div>

Explicit mountAll

Prefer to trigger it yourself? Point mountAll() at any selector; each matched element becomes its own instance.

Domo3D.mountAll('.demo-slot');

// with markup like:
// <div class="demo-slot" data-domo3d='{"shape":"torus"}'></div>

Dead center of the screen

A dodecahedron spinning upright in the middle of the viewport, in ultraviolet dusk colors.

Domo3D.mount({
  shape: 'dodeca',
  anchor: 'center',
  size: 340,
  palette: 'violet',
  axis: 'y'
});

Inside any container div

Position container anchors the object inside an element of your page. It follows that element as the layout reflows.

// <div id="hero-slot"></div>
Domo3D.mount({
  position: 'container',
  target: '#hero-slot',
  anchor: 'center',
  shape: 'sphereGrid',
  palette: 'ice'
});

Scroll with the page

Position page attaches the object to the document itself, so it travels with your content instead of hovering over it.

Domo3D.mount({
  position: 'page',
  anchor: 'top-right',
  offset: 40,
  shape: 'tower',
  palette: 'mono',
  hover: 'none'
});

Every anchor point

Nine anchors: center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right.

Domo3D.mount({
  shape: 'frustum',
  anchor: 'bottom-left',   // try each of the nine
  offset: 18,
  palette: 'amber'
});

Manual nudge

offset is the gap from the anchored edges; x and y push the object further, in pixels.

Domo3D.mount({
  shape: 'octa',
  anchor: 'bottom-right',
  offset: 60,
  x: -40,    // further left
  y: -90     // further up
});

The speed scale, 1 to 8

v1.2.0 replaces raw degrees with a human scale. 1 is barely alive, 8 is a blur. 4 equals the old slow, 6 the old medium, 7+ the old fast.

Domo3D.mount({
  shape: 'capsule',
  speed: 2,    // try 1 through 8
  axis: 'x',
  palette: 'plum'
});

Raw degrees still work

Any number above 8 is read as exact degrees per second, for when you want precisely 40.

Domo3D.mount({
  shape: 'cubocta',
  speed: 40,    // exactly 40 deg/sec
  palette: 'violet'
});

Wobble mode

The object spins upright while its axis precesses like a slowing top. wobble is the swing in degrees, wobbleSpeed how fast the axis traces its cone.

Domo3D.mount({
  shape: 'domeTower',
  axis: 'wobble',
  wobble: 18,
  wobbleSpeed: 30,
  palette: 'money'
});

Bounce rotate

New in v1.2.0: an upright spin with a vertical hop, twice per revolution, like a spinning ball being dribbled.

Domo3D.mount({
  shape: 'starPrism',
  axis: 'bounce',
  speed: 5,
  palette: 'cobalt'
});

The drifting xyz axis

The rotation axis itself drifts through space on a never-repeating path, so the tumble stays interesting forever.

Domo3D.mount({
  shape: 'icosa',
  axis: 'xyz',
  speed: 4,
  palette: 'magma'
});

The full carnival ride

bounceWobble stacks the wobble precession, the axis drift and the bounce hop into one joyride.

Domo3D.mount({
  shape: 'gem',
  axis: 'bounceWobble',
  speed: 6,
  palette: 'steel'
});

Five line weights

v1.2.0 adds named thickness presets: hair, fine, normal, bold, heavy. Numeric pixels still work.

Domo3D.mount({
  shape: 'fineSphere',
  thickness: 'hair',   // or fine/normal/bold/heavy
  glow: 6,
  palette: 'orchid'
});

Hover: illuminate the face

The polygon under the pointer flickers with a translucent wash. On a light page the wash is dark; set background: dark on dark pages for a luminous white one. The flicker follows the cursor from face to face as the solid turns.

Domo3D.mount({
  shape: 'icosa',
  hover: 'face',
  background: 'light',   // or 'dark'
  speed: 5
});

Hover: thicken the face

The edges of the polygon under the pointer swell while the cursor is there, and relax when it leaves.

Domo3D.mount({
  shape: 'dodeca',
  hover: 'thicken',
  thickness: 'fine',
  speed: 5
});

Hover: vibrate

A nervous, non-metronomic shiver while the pointer is over the solid.

Domo3D.mount({
  shape: 'truncOcta',
  hover: 'vibrate',
  speed: 4
});

Hover: extrude the face

The face under the cursor bulges outward and eases back flush when it rotates away. Faces slide out and sink in smoothly.

Domo3D.mount({
  shape: 'cubocta',
  hover: 'extrude',
  speed: 4
});

Hover: lighten

The whole solid turns translucent while the pointer is over it, as if lit from behind.

Domo3D.mount({
  shape: 'spiral',
  hover: 'lighten',
  opacity: 0.95
});

Hover: darken

Every line drops toward ink while the pointer is over the solid.

Domo3D.mount({
  shape: 'hexTorus',
  hover: 'darken',
  palette: 'honey'
});

Hover: deform, four flavors

Straight edges bend into living curves while the pointer is over. Pick the flavor with deform: wave, bulge, jitter or swirl.

Domo3D.mount({
  shape: 'sphereGrid',
  hover: 'deform',
  deform: 'swirl',   // wave | bulge | jitter | swirl
  speed: 4
});

Hover: twist

The solid twists like a corkscrew while the pointer is over it, and untwists as it leaves.

Domo3D.mount({
  shape: 'twistBarrel',
  hover: 'twist',
  speed: 4
});

One flat line color

Drop the palette entirely: colorMode: flat draws every edge in a single color.

Domo3D.mount({
  shape: 'ziggurat',
  colorMode: 'flat',
  line: '#a0303a'
});

Your own palette

Pass an array of 3 or more hex colors instead of a preset name. The ramp is sampled from far to near.

Domo3D.mount({
  shape: 'waist',
  palette: ['#bc4c00', '#e07a2c', '#f2b04c', '#7c3a12']
});

Colors that drift

colorMode: cycle slowly rotates every edge through the palette; cycleSpeed sets the drift rate.

Domo3D.mount({
  shape: 'torus',
  colorMode: 'cycle',
  cycleSpeed: 0.25,
  palette: 'amber'
});

Orthographic, no depth fade

perspective: 0 gives a flat technical-drawing look; fade: false keeps far edges at full strength.

Domo3D.mount({
  shape: 'prism',
  perspective: 0,
  fade: false,
  opacity: 0.85,
  palette: 'mono'
});

Full randomization

randomize: all throws a random shape, a random axis, a speed jitter and a random preset palette.

Domo3D.mount({ randomize: 'all' });

Deterministic randomness

Add a seed and the same random choices come back every time.

Domo3D.mount({ randomize: 'all', seed: 1234 });

Responsive sizing

size also accepts any CSS size string, so the object can scale with the viewport.

Domo3D.mount({
  shape: 'antiprism',
  size: '40vmin',
  palette: 'ice'
});

Live control with the handle

mount() returns a handle for runtime changes.

var h = Domo3D.mount({ shape: 'icosa', palette: 'tron' });

h.next();                          // new random shape
h.set({ speed: 8, hover: 'glow' });  // live-merge config
h.reseed(42);                      // rebuild with a seed
h.stop();                          // freeze
h.start();                         // resume
h.destroy();                       // remove the canvas

Change speed and weight live

The handle normalizes presets on the fly, exactly like mount().

var h = Domo3D.mount({ shape: 'icosa' });
h.set({ speed: 8 });        // notch 8 = 110 deg/sec
h.set({ speed: 'fast' });   // presets still work
h.set({ thickness: 'heavy' });

Many instances at once

Every mount is independent: different shapes, palettes and placements on the same page.

Domo3D.mount({ shape: 'dodeca',     anchor: 'bottom-right', palette: 'violet' });
Domo3D.mount({ shape: 'domeTower',  anchor: 'bottom-left',  palette: 'money', axis: 'wobble' });
Domo3D.mount({ position: 'container', target: '#header-art', shape: 'twinDomeTower' });

Filleted, inset-face solids

New in v1.2.0: every platonic and archimedean solid has a fillet twin. Each face carries a smaller copy of itself, recessed into the solid, with corner struts.

Domo3D.mount({ shape: 'filletIcosa', palette: 'jade', speed: 4 });
Domo3D.mount({ shape: 'filletCube',  palette: 'denim', speed: 4 });
Domo3D.mount({ shape: 'filletDodeca', palette: 'coral', speed: 4 });

The whole fillet family

Fourteen fillet variants: filletTetra, filletCube, filletOcta, filletDodeca, filletIcosa, filletCubocta, filletIcosidodeca, filletTruncTetra, filletTruncCube, filletTruncOcta, filletRhombi, filletPrism, filletBipyramid, filletAntiprism.

Domo3D.mount({ shape: 'filletTruncOcta', palette: 'indigo' });

Ornate pipe-ridge domes

New in v1.2.0: cathedral domes whose ridges are SOLID PIPES, swept along the silhouette with parallel-transported frames and dressed with ornamental hoops.

Domo3D.mount({
  shape: 'pipeOnion',
  axis: 'wobble',
  palette: 'money',
  hover: 'pause'
});

The pipe basilica

St Basil compressed: a lathe tower under a pipe-ribbed onion cap, with four domed corner towers.

Domo3D.mount({
  shape: 'pipeBasilica',
  axis: 'y',
  speed: 3,
  palette: 'crimson'
});

More pipe work

pipeDome (hooped hemisphere), pipeFlute (eight fluted columns with base and capital) and pipeVase (pipe meridians hugging a lathe silhouette).

Domo3D.mount({ shape: 'pipeVase',  palette: 'wheat', speed: 3 });
Domo3D.mount({ shape: 'pipeFlute', palette: 'moss',  speed: 3 });

Shapes from your SVG icons

New in v1.2.0: thirteen shapes distilled from SVG icon outlines and extruded as prisms and truncated pyramids: shieldPrism, shieldFrustum, starFrustum, roundPrism, mousePrism, zigPrism, earthBall, rainbowArcs, triPrism, rhombPrism, blobPrism, hornPrism, checkPrism.

Domo3D.mount({ shape: 'shieldPrism',  palette: 'steel', speed: 4 });
Domo3D.mount({ shape: 'earthBall',     palette: 'lagoon', speed: 4 });
Domo3D.mount({ shape: 'starFrustum',   palette: 'honey',  speed: 4 });

Twisted prisms and pyramids

Levels that rotate as they rise: twistPyramid, twistBipyramid, twistFrustum and twistBarrel turn simple solids into spun-pot sculptures.

Domo3D.mount({ shape: 'twistPyramid',  palette: 'magma', speed: 4 });
Domo3D.mount({ shape: 'twistFrustum',   palette: 'jade',  speed: 4 });

Coils, spirals and knots

SOLID PIPE, swept along helices and knots: coil (a spring), spiral (a nautilus), mobius (the half-twist band) and trefoil (the classic knot).

Domo3D.mount({ shape: 'coil',    palette: 'cobalt', speed: 4 });
Domo3D.mount({ shape: 'mobius',  palette: 'indigo', speed: 4 });
Domo3D.mount({ shape: 'trefoil', palette: 'ruby',   speed: 4 });

Novel wireframes

rhombicDodeca (the Catalan dual), gem (a brilliant cut), doubleStar (interleaved stars), hypercube (a tesseract projection) and hexTorus (a faceted, twisting ring).

Domo3D.mount({ shape: 'hypercube', palette: 'plum', speed: 4 });
Domo3D.mount({ shape: 'gem',        palette: 'ice',  speed: 4 });

Breathing pulse

pulse swells the whole object on a slow sine wave. pulseSpeed sets breaths per second.

Domo3D.mount({
  shape: 'fineSphere',
  pulse: 0.06,
  pulseSpeed: 0.4,
  palette: 'jade'
});

Pose it: startAngle and scale

startAngle pins the initial rotation in degrees, and scale resizes inside the same canvas.

Domo3D.mount({
  shape: 'duoring',
  startAngle: 20,    // degrees; also settable live
  scale: 1.15,
  palette: 'cobalt'
});

Palettes for light pages

Half the presets are tuned for light backgrounds. The ramp still runs far to near, ending on the darkest tone.

Domo3D.mount({ shape: 'pawn',        palette: 'wheat',  position: 'page' });
Domo3D.mount({ shape: 'helix',       palette: 'forest' });
Domo3D.mount({ shape: 'waterBottle', palette: 'denim'  });
Domo3D.mount({ shape: 'lantern',     palette: 'lagoon' });

The six new v1.2.0 palettes

Dark pages gained magma, plum and steel; light pages gained coral, indigo and moss.

Domo3D.mount({ shape: 'trefoil',     palette: 'magma'  });
Domo3D.mount({ shape: 'onionTower', palette: 'plum'   });
Domo3D.mount({ shape: 'fluteColumn', palette: 'steel' });
Domo3D.mount({ shape: 'vase',        palette: 'coral' });
Domo3D.mount({ shape: 'spiral',      palette: 'indigo'});
Domo3D.mount({ shape: 'goblet',      palette: 'moss'  });

The kitchen sink

Every option at once, with comments. Delete what you do not need.

Domo3D.mount({
  shape: 'filletTruncCube',   // any of the 106 names, or 'random'
  size: 320,              // px, or a CSS string like '40vmin'
  position: 'viewport',   // 'viewport' | 'page' | 'container'
  target: null,           // selector or node, for 'container'
  anchor: 'bottom-right', // one of nine anchors
  offset: 24,             // gap from the anchored edges
  x: 0, y: 0,             // extra manual nudge
  zIndex: 9990,           // stacking above your content
  axis: 'bounceWobble',   // x y z xy xz yz tumble wobble bounce xyz
  speed: 6,               // 1..8 notch, or slow | medium | fast, or deg/s
  direction: 1,           // 1 or -1
  startAngle: 0,          // initial rotation, degrees
  wobble: 15,             // precession swing in degrees
  wobbleSpeed: 35,        // how fast the axis precesses
  palette: 'ice',         // preset name or hex array
  colorMode: 'depth',     // depth | cycle | perEdge | flat
  cycleSpeed: 0.15,       // drift rate for 'cycle'
  line: '#00e5ff',        // flat mode single color
  thickness: 'normal',     // hair | fine | normal | bold | heavy, or px
  glow: 12,               // neon glow radius, 0 = off
  fade: true,             // far edges fade out
  perspective: 0.3,       // 0 .. 0.45
  opacity: 0.95,          // 0 .. 1
  scale: 1,               // overall size multiplier
  pulse: 0,               // breathing amplitude
  pulseSpeed: 0.5,        // breaths per second
  hover: 'face',          // none pause slow fast grow shrink glow face
                          // thicken vibrate extrude lighten darken deform twist
  deform: 'wave',         // wave | bulge | jitter | swirl
  background: 'light',    // light | dark, steers hover 'face'
  hoverScale: 1.1,        // grow / shrink amount
  hoverSpeed: 2.2,        // fast / slow multiplier
  randomize: 'none',      // none | shape | all
  seed: 7,                // deterministic randomness
  dprCap: 2               // max devicePixelRatio
});

Every option, documented.

All 34 configuration keys are optional. Anything you do not pass falls back to the default.

option	type	default	description
`shape`	string	`'random'`	Any name from the shape catalog, or `random` for a fresh pick on every mount and `next()` call.
`size`	number \| string	`400`	Square canvas size in px, or a CSS size string such as `40vmin`.
`position`	string	`'viewport'`	`viewport` fixed to the screen, `page` scrolls with content, `container` anchors inside `target`.
`target`	selector \| element	`null`	The container element. Only used when position is `container`. `mountAll()` sets it for you.
`anchor`	string	`'center'`	One of nine: center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right.
`offset`	number	`28`	Pixel gap between the object and the anchored edges.
`x, y`	number	`0`	Extra manual nudge in px after the anchor is applied.
`zIndex`	number	`9990`	z-index of the transparent canvas.
`axis`	string	`'tumble'`	One of eleven motion types: x, y, z, xy, xz, yz, tumble, wobble, bounce, xyz, bounceWobble.
`speed`	number \| string	`'medium'`	A 1..8 scale notch (1 barely alive to 8 a blur), or slow / medium / fast, or raw degrees per second.
`direction`	number	`1`	`1` or `-1` to reverse the spin.
`wobble`	number	`12`	Precession swing in degrees for axis wobble (and any axis when set above 0).
`wobbleSpeed`	number	`40`	How fast the axis precesses, in deg/sec.
`line`	hex string	`'#00e5ff'`	Single line color, used by colorMode flat and as a fallback when no palette is given.
`palette`	array \| string	`null`	An array of 3 or more hex colors, or one of the 23 preset names.
`colorMode`	string	`'depth'`	`depth` far-to-near ramp, `cycle` drifting colors, `perEdge` fixed color per edge, `flat` one solid color.
`cycleSpeed`	number	`0.15`	Color drift speed for colorMode cycle.
`thickness`	number \| string	`'normal'`	Line thickness in px, or a preset: hair (0.7), fine (1.0), normal (1.5), bold (2.2), heavy (3.0).
`glow`	number	`10`	Neon glow radius in px. 0 disables glow.
`fade`	boolean	`true`	Far edges fade out for a depth cue.
`perspective`	number	`0.28`	0 orthographic up to 0.45 strong perspective.
`opacity`	number	`1`	Overall line opacity, 0..1.
`background`	string	`'light'`	Tells hover `face` which flicker wash to use: a dark wash on light pages, a luminous white wash on dark pages.
`hover`	string	`'grow'`	One of fifteen pointer behaviors: none, pause, slow, fast, grow, shrink, glow, face, thicken, vibrate, extrude, lighten, darken, deform, twist.
`deform`	string	`'wave'`	The deformation flavor for hover deform: wave, bulge, jitter or swirl.
`hoverScale`	number	`1.08`	Size multiplier used by grow / shrink.
`hoverSpeed`	number	`2.2`	Speed multiplier used by fast (reciprocal for slow).
`startAngle`	number	`0`	Initial rotation about the axis, in degrees. Also settable live via `h.set()`.
`scale`	number	`1`	Permanent size multiplier on top of size.
`pulse`	number	`0`	Breathing amplitude. 0.04 is a subtle breath, 0.1 clearly visible.
`pulseSpeed`	number	`0.5`	Breaths per second used by pulse.
`dprCap`	number	`2`	Cap on devicePixelRatio for the canvas backing store.
`randomize`	string	`'shape'`	`none` uses the config exactly as given, `shape` picks a random shape, `all` also randomizes axis, speed and palette.
`seed`	number \| null	`null`	Deterministic randomness: the same seed always produces the same shape and choices.

The handle API

member	description
`h.next()`	Throw a new random shape and seed, redraw immediately.
`h.set({...})`	Live-merge any config keys: shape, palette, axis, speed, thickness, hover, deform, background, and so on.
`h.reseed(n)`	Rebuild the geometry with a specific seed.
`h.start()` / `h.stop()`	Resume / suspend the animation loop.
`h.destroy()`	Remove the canvas completely and free the instance.
`h.canvas`	The live canvas element.
`h.config`	The live config object.

Global inspection

javascript

Domo3D.shapes;     // array of all 106 shape names
Domo3D.palettes;   // the 23 named color presets
Domo3D.speeds;     // { slow: 12, medium: 32, fast: 70 }
Domo3D.speedScale; // the 1..8 speed table
Domo3D.thickness;  // the five named line weights
Domo3D.version;    // '1.2.0'

One hundred and six shapes.

Compact, closed wireframe objects, every mesh auto-normalized to fit inside its square canvas - nothing is ever a tall building. The polygon shapes pick a random n-gon from 3 to 12 sides each build.

family	shapes
Platonic solids (5)	`tetra`, `cube`, `octa`, `dodeca`, `icosa`
Archimedean solids (6)	`cubocta`, `icosidodeca`, `rhombi`, `truncTetra`, `truncCube`, `truncOcta`
Filleted inset-face solids (14)	`filletTetra`, `filletCube`, `filletOcta`, `filletDodeca`, `filletIcosa`, `filletCubocta`, `filletIcosidodeca`, `filletTruncTetra`, `filletTruncCube`, `filletTruncOcta`, `filletRhombi`, `filletPrism`, `filletBipyramid`, `filletAntiprism`
Prisms, stars and petals (7)	`prism`, `antiprism`, `bipyramid`, `insetPrism`, `starPrism`, `petalPrism`, `twistPrism`
Pyramids and steps (5)	`pyramid`, `frustum`, `insetPyramid`, `stepFrustum`, `ziggurat`
Twisted prisms, coils and knots (8)	`twistPyramid`, `twistBipyramid`, `twistFrustum`, `twistBarrel`, `helixPrism`, `coil`, `spiral`, `mobius`
Onion domes and cathedrals (9)	`onionDome`, `onionTower`, `twinOnion`, `spireDome`, `drumDome`, `flutedDome`, `lotusDome`, `basilica`, `pagoda`
Ornate pipe-ridge domes (5)	`pipeDome`, `pipeOnion`, `pipeBasilica`, `pipeFlute`, `pipeVase`
DomoCity towers (6)	`dome`, `doubleDome`, `domeTower`, `twinDomeTower`, `tower`, `lantern`
Shapes distilled from SVG icons (13)	`shieldPrism`, `shieldFrustum`, `starFrustum`, `roundPrism`, `mousePrism`, `zigPrism`, `earthBall`, `rainbowArcs`, `triPrism`, `rhombPrism`, `blobPrism`, `hornPrism`, `checkPrism`
Round solids (8)	`sphereGrid`, `fineSphere`, `torus`, `fineTorus`, `doubleTorus`, `duoring`, `capsule`, `barrel`
Objects (6)	`waterBottle`, `bellJar`, `pawn`, `vase`, `goblet`, `helix`
Fine and decorative (8)	`fineDome`, `latticeCube`, `insetCube`, `ribbedBarrel`, `waist`, `ringInset`, `fluteColumn`, `gimbal`
Novel wireframes (6)	`rhombicDodeca`, `gem`, `doubleStar`, `hypercube`, `hexTorus`, `trefoil`

Twenty-three palettes.

Colors ramp from the first tone (farthest) to the last (nearest). The first group is tuned for dark pages, the second for light pages like this one. The circles show the exact colors.

name	colors	for	mood
`tron`	`#00e5ff #00b0ff #1de9b6 #b2ebf2`	dark	Cyan grid, arcade night
`amber`	`#ffe082 #ffb300 #ff8f00 #ff6f00`	dark	Honey and streetlight
`violet`	`#e0aaff #b5179e #7209b7 #3a0ca3`	dark	Ultraviolet dusk
`ruby`	`#ff3860 #ff7d8f #ffb3bd #ffdfe3`	dark	Neon rose, city rain
`honey`	`#fff4c1 #ffe066 #ffcf1f #f2b200`	dark	Bright gold, brass horn
`jade`	`#00c778 #4de69c #a8f5c9 #e6fff3`	dark	Emerald circuitry
`cobalt`	`#3f6dff #7096ff #a9c1ff #dce5ff`	dark	Cold blue signal
`orchid`	`#c96bff #e0a0ff #f3d1ff #fdf0ff`	dark	Greenhouse dusk
`magma`	`#ffe08a #ffab4a #ff5c4d #ffc2b8`	dark	Volcanic glass
`plum`	`#f0b6e0 #c85fb0 #8a2be2 #cdb6ff`	dark	Orchard after dark
`steel`	`#c8d3e0 #8fa3bd #5d7290 #b0bccd`	dark	Brushed metal, fog
`money`	`#163a27 #2e5e43 #52796f #9fc5ab`	light	Deep bill green
`crimson`	`#7b1e2b #a0303a #c05560 #e8b4bc`	light	Wine and wax
`ice`	`#eaf6ff #b3d9ff #5aa9e6 #2d6a9f`	light	Glacier morning
`ember`	`#ffe3d0 #ffb37a #f0631d #8f2a08`	light	Forge and kiln
`wheat`	`#fdf6dd #efe0a9 #cfa02e #77610d`	light	Grain and brass
`forest`	`#dcead8 #a3c397 #57874a #1f3d1a`	light	Pine and moss
`denim`	`#d8e4f5 #9fb9de #4c6fa8 #20365c`	light	Workshop canvas
`lagoon`	`#d4f0ee #8fd2c8 #3f8f82 #17453f`	light	Shallow sea
`coral`	`#f8d8c8 #f2b098 #cf6a52 #7c2f22`	light	Sunbaked clay
`indigo`	`#c9c2f0 #8a7fd6 #4a3f9e #241a5e`	light	Ink at midnight
`moss`	`#dfe3c0 #b0bd7e #6f7d3f #333f1a`	light	Lichen and olive
`mono`	`#ffffff #c0c0c8 #8a8a96 #4a4a55`	neutral	Graphite on paper