Introduction

Status

cseen is early. The core works and is tested, but the API may still change before 1.0.

cseen draws illustrations and animations for the web, in 2D and 3D, as SVG that follows your CSS.

It is for the figure in an article, a portfolio or documentation: a camera looking at a cube, a laptop typing code, a stereo rig recovering depth, a chart that animates in, a matrix bending the plane. You describe a scene in a few lines of TypeScript, animate it on a timeline, and put it on a page.

Building a scene up

FigureCode

IsoFrontSideTopPerspective

Drag to turn, scroll or pinch to zoom, double click to reset.

CopyOpen in playground

import { Scene, Timeline, arrow, draw, fadeIn, ground, seq, stagger, wait } from 'cseen';
import { micStand, monitor, speaker } from 'cseen/devices';

const s = new Scene();
s.add(ground());
const mic = s.add(micStand({ at: [-3, 0, 0] }));
const mon = s.add(monitor({ at: [0, 1, 0], width: 3 }));
const spk = s.add(speaker({ at: [3.2, 0, 0] }));
const a = s.add(arrow(mic.anchor([0, 0, 1.6]), mon.anchor([-1.4, -0.1, 1.1]), { role: 'accent' }));
const b = s.add(arrow(mon.anchor([1.4, -0.1, 1.1]), spk.anchor([0, -0.3, 1.2]), { role: 'accent' }));

const tl = new Timeline();
tl.play(stagger(0.35, fadeIn(mic), fadeIn(mon), fadeIn(spk)));
tl.chapter('connect').play(seq(draw(a, 0.8), draw(b, 0.8)));
tl.play(wait(0.8));

That figure is a window you can turn, scrub and edit. Every figure in these docs works the same way.

What makes it different

Most tools that draw like this either make video, draw to a canvas that CSS cannot reach, or are 2D only. cseen draws real SVG, so:

• Colours come from CSS, and any theme works. Set up to three variables (ink, background, accent) and everything else, including chart palettes, is derived. No theme is built in, so a theme you have not made yet works too. Try the Theme button in the header: it changes this whole site.
• One coordinate system for 2D and 3D. x to the right, y into the scene, z up. A flat diagram is just a scene seen from the front.
• Static first. The same code produces a plain SVG at build time and an animated version in the browser.
• Scrubbable. A scene is a function of time, so playing, pausing, stepping and rendering a single frame all work the same way.
• Drawings that show how they are made. A construction builds a figure from guides, circles and outlines that trace on, fill and turn.
• Diagrams that place themselves. Flowcharts, trees and networks are laid out for you, with edges that trace on and carry a pulse.
• Small and dependency free, split into packs so you only ship what you use.

What it is not

cseen is not a game engine and not a 3D renderer. SVG has no depth buffer, so faces are drawn back to front, which suits floors, walls, boxes and keyboards but not millions of triangles. Depth sorting and limits says exactly where the edges are.

The name

The name is meant to be said aloud: the c is see, and seen sounds like scene, so cseen says see scene. Rearrange its letters and you get scene itself. You describe a scene, and you see it.

Where to go next

• Install the library.
• Draw your first scene.
• Learn the coordinates and cameras.
• Browse the gallery or open the playground.