Hopp til innhold

Kuriositet

SVGLoop

Jeg ville at tegningene mine skulle bevege seg, så jeg bygde verktøyet som beveger dem. Fire uker i 2024, og så ble det stille, midt i poleringen.

  • SVG
  • React
  • anime.js

SVGLoop får en stillestående tegning til å bevege seg: lim inn en SVG, stable versjoner av den som keyframes på en tidslinje, og la formene morfe fra én til neste.

Hva det er

Animasjon rett i nettleseren

Et animasjonsverktøy for tegninger: du drar keyframene i den rekkefølgen du vil, og ser løkken spille mens du jobber.

Hvorfor

Kode ut, ikke video

Ut kommer keyframene som data og en ferdig React-komponent som spiller dem i løkke. Animasjonen forblir din. Du kan åpne og endre den etterpå. Ingen eksportert blindvei.

Jeg tegner. En vår ble jeg utålmodig på at strekene mine lå helt stille, så jeg brukte fire uker på å bygge verktøyet som beveger dem.

To skjermbilder side om side av SVGLoop i nettleseren: samme tegning — en lilla bølge og en grønn klatt — i to ulike øyeblikk av den samme løkken, med tidslinjen og keyframe-stripa under.
Ramme fra en løkke verktøyet lagde, gjengitt august 2026: to stillbilder av én og samme løkke i SVGLoop. Tegningen — en bølge og en klatt — laget jeg for hånd til dette opptaket; løkken er satt til skyvekontrollens maksimum på 4000 ms og drevet gjennom appens egne håndterere i en skriptet nettleser. Verktøyversjon commit:e414f58.

Så stoppet det, i juni 2024, midt i poleringen. Det er den kjedeligste og mest ærlige måten å slutte på. Ingen katastrofe, bare oppmerksomhet som flyttet seg.

Bildet over er to stillbilder, ikke en løkke som spiller. Verktøyet eksporterte en React-komponent i den samme kjøringen, men den er ikke montert på denne siden ennå. Det står på lista, uten dato. Å love en dato ville vært å gjenta feilen.

Slektskap

Samme instinkt, to år fra hverandre

SVGLoop var første gang jeg tok det på alvor: en jobb du gjentar for hånd, skal du ikke bli flinkere til. Du skal bygge et verktøy for den.

  1. 2024
    SVGLoop
    Jeg ville animere egne tegninger, og gadd ikke gjøre den samme fikleøvelsen om igjen for hver strek. Verktøyet spytter ut den ferdige artefakten: keyframes som data og en komponent som spiller dem.
  2. 2026
    Samme instinkt i Scaffy
    To år senere er formen den samme, bare rettet mot en annen gjentakelse: fang håndarbeidet én gang, og la maskinen levere resultatet ferdig i stedet for oppskriften på det.

Hele historien i tall

Fire uker, og ingenting siden

66commits
Alt som ble skrevet
4uker
Fra første til siste dag
2024
22. mai til 18. juni
0commits siden
Etter 18. juni 2024

Kildecommit:e414f58

Videre

Vanen som ble et verktøy

SVGLoop lærte meg å fange den gjentatte jobben som et verktøy og la det levere den ferdige tingen. Det er hele premisset for det jeg bygger nå.

Les om Scaffy