Six — een muur van tekeningen als lichtkrant

2026

Een one-page site met een muur van honderden tegels, gesneden uit vier tekeningen die ik zelf heb gemaakt. Tegels lichten op als pixels van letters: eerst SIX, daarna loopt "a website by Erik van de Blaak" als lichtkrant door de muur. Gebouwd met SvelteKit en Canvas 2D.

Six is een designstudie op één scherm. De muur bestaat uit honderden kleine tegels. Elke tegel is een uitsnede uit een van vier tekeningen die ik zelf heb gemaakt: een hond, een jongen met pony, een vel vol gezichten en een olifant met ruiter. In rust is de muur donker en grijs.

Letters worden gevormd met tegels. Elke pixel van een eigen 5×7-lettertype is een tegel die oplicht in de kleuren van de tekening; bij de grote SIX op een breed scherm is dat een blok van twee bij twee tegels. Eerst bouwt SIX zich letter voor letter op. Daarna loopt de zin 'a website by Erik van de Blaak' als lichtkrant door de muur. De tegelgrootte volgt uit de schermbreedte, zodat er op een breed scherm altijd acht tekens tegelijk te lezen zijn en op een telefoon vijf. De hele muur golft rustig, als een vlag die aan de linkerkant vastzit, en tegels die oplichten geven een zachte gloed af op hun buren.

Met je muis of vinger teken je lichtsporen over de muur. Een klik op een tegel opent de hele tekening waar die uit komt: de tekening groeit uit de tegel en de uitsnede wordt even gemarkeerd. Alles wordt getekend met Canvas 2D in één requestAnimationFrame-lus, zonder WebGL of animatiebibliotheek. Met 'minder beweging' aan staat SIX stil en staat de zin eronder als gewone tekst.

Technologieën

SvelteKit Canvas 2D TypeScript sharp

Meer van mijn werk

Bekijk het hele portfolio of lees het blog.

Meer werk