Boten tegner seg selv. Så ba vi om farge.

Figurene på forsida er ikke bilder. Det er strek som trekkes opp mens du ser på, i én penn og uten fyll. Her er reglene vi ga oss selv, de tre setningene som ba om farge, og feilen ingen så før den blødde inn i naboplansjen.

Boten øverst på forsida er ikke en PNG. Den tegner seg selv hver gang sida lastes: antenne, hode, kropp, den vinkende armen — i den rekkefølgen. Rekkefølgen i fila er tegnerekkefølgen. Flytter du en linje opp, tegnes den tidligere.

Under ligger det ingen kunstig intelligens som genererer bilder. Det er en SVG med streker i, og litt CSS som trekker dem opp.

Én penn, ingen fyll

Hver strek får pathLength="1". Da kan samme regel brukes på en firkant, en sirkel og en kurve: gjør streken til én lang stiplet linje, skyv mønsteret ut av syne, og trekk det inn igjen. Det er hele animasjonen.

Pennen er ett filter. Et støyfelt forskyver streken noen få piksler, så den skjelver som en hånd som ikke helt treffer. Uten det ser tegningen ut som et diagram. Med det ser den ut som noe noen har sittet med.

Ingenting er fylt. Øynene er fylt, og markøren på skjermen er fylt. Det er alt — resten er kontur.

Tre regler vi ga oss selv

Alle tre kom av noe som så feil ut, ikke av en plan.

Tegn aldri skjulte streker. En tidlig versjon hadde boten som leser med hele kroppen tegnet ferdig, og boka lagt oppå. Streken fra magen gikk tvers gjennom sidene. Vi brøt kroppen rundt boka i stedet, så det som ikke skal sees, aldri blir tegnet. Samme grep ved pulta: beina stopper der bordplata begynner.

Hodet er alltid det samme. Fire ansikter deler nøyaktig samme hodeskall, antenne og skygge. Bare øyne og munn byttes. Det er derfor de fire hodene ser ut som samme robot i fire humør, og ikke som fire roboter.

Junior tegnes med samme penn. Junior har samme strekbredde, samme skjelv og samme mangel på fyll som boten. Skulle det ha vært to strektyper, hadde duoen falt fra hverandre i to bilder.

Fem figurer

Boten som leser. Boten ved terminalen, med laptopen som dekker brystet og pulta som dekker resten. Duoen, der junior peker. Sporene, som går innover mot horisonten. Og fire hoder på rad.

De ligger som rene SVG-strenger i én fil, og komponenten som tegner dem er femten linjer. Kortsystemet på artikkeloversikten og generatoren for kunst er bygd på samme måte: former i kode, ikke bildefiler.

«Just to try»

Så kom fargen. Den kom ikke som en plan, den kom som tre setninger, en etter en:

«i wonder if we could even put some color on one of those hero things? just to try» — Eivind til boten, 6. september 2026

Vi tok kaffekoppen på pulta. Én flat gulbrun form, lagt bak pennen og et par piksler ned til venstre — slik registeret bommer når noe trykkes i to omganger. Streken tegner fortsatt hele koppen. Fargen ligger bare under.

Det tok ett svar. Neste setning kom med en gang:

«can you color more robot pictures?»

Og rett etter:

«i want each image to get some subtle color, or background something.»

Den siste var den som avgjorde formen. «Background something» ble til et eget lag.

To lag, ikke ett

Flaten ligger bakerst. Én stor, myk form bak hele figuren — en sirkel bak boten, en oval bak duoen, en lav sol i horisonten bak sporene. Den toner inn først, på tretten prosent, før en eneste strek er trukket. Den oppfører seg som papiret figuren er trykt på.

Fargen ligger over flaten og under streken, på 55 prosent, og kommer idet pennen passerer. Ett objekt per figur: koppen, boka, gensern til junior, antennekula.

Fargen settes per form med én variabel. Å bytte hele fargen på en figur er ett ord.

Feilen som blødde

Første runde så riktig ut hver for seg, og feil i sammenheng.

Forsida viser figurene i en slider, én om gangen. Flatene jeg hadde tegnet var større enn figurens egen ramme, og siden rammen er satt til å slippe ting ut — pennen skjelver jo utenfor kanten — rant den grønne flaten fra «Boten leser» ut av sin egen plansje og inn i den ved siden av. På skjermbildet av sporene lå det en grønn klatt langs venstre kant som ikke hadde noe der å gjøre.

Rettelsen var å trekke sirklene inn. Kontrollen etterpå var mer nyttig enn rettelsen: mål hver flate mot sin egen ramme på alle fire sider, og se at tallet er negativt. Nå har den trangeste ti piksler å gå på.

Når fargen gjør en jobb

Det siste settet er de fire hodene, og det er det eneste stedet fargen ikke bare pynter.

Hvert hode fikk sin egen flate: grønn for tips, lilla for ettertanke, gul for advarsel, rød for feil. De fire skal etter hvert erstatte PNG-hodene i tips- og advarselboksene i artiklene. Da bærer flaten betydningen, og leseren ser hva slags boks det er før hun har lest et ord.

Det er forskjellen på farge som dekorasjon og farge som informasjon. Vi endte med begge, men bare den siste var verdt å planlegge.

Slik bruker du dette i praksis

Dette er rekkefølgen som funket for oss. Den er vår, ikke en oppskrift.

1. Streken først, i svart, helt ferdig. Fargen skjuler dårlig tegning i omtrent ett minutt.
2. Ett filter for hånda. Litt støy som forskyver streken. Det er forskjellen på et diagram og en tegning.
3. Farge som eget lag, ikke som fyll i formene. Da kan du skru den av, bytte den, eller la den ligge litt på skeive med vilje.
4. Ett objekt per bilde. Det som bærer poenget. Koppen i en artikkel om prompting, boka i en om lesing.
5. Mål flatene mot rammen. Alt som stikker utenfor, dukker opp et sted du ikke ser før noen andre gjør det.

Vil du se hvordan resten av sida er satt sammen, står det i Slik bygde vi denne nettsiden.

Vi ba om farge på én kopp. Det vi endte med, var et lag vi kan skru av — og det er derfor vi tør å bruke det.