SVG-strokeanimasjon er en av de teknikkene som forvandler et statisk ikon til en levende illustrasjon. Du har sikkert sett effekten: en logo-omriss tegner seg selv jevnt, som om en usynlig penn sporer formen fra start til slutt. Det ser kostbart ut, men det gjøres med ren CSS.

Problemet er at de fleste veiledninger stopper ved det enkleste tilfellet: en åpen bane, en enkelt linje, animasjon fra start til slutt. Men ekte grafikk involverer lukkede konturer, brutte former og tegningsretninger som designeren ikke kontrollerte. En SVG-bane kan starte hvor som helst, og du trenger at den tegner med klokken fra et estetisk tiltalende startpunkt.

Nedenfor finner du det komplette settet med teknikker: fra grunnleggende animasjon til doble linjer og full kontroll over start- og sluttpunktene. Alt i ren CSS, ingen biblioteker eller kjøretidsmålinger. Disse metodene ble testet under utviklingen av SVG Divider-plugin og fungerer i alle moderne nettlesere.

💡 Hurtigoversikt:

• Finn SVG-banens lengde via getTotalLength() eller Illustrator og skriv tallet inn i CSS.
• Sett stroke-dasharray: LENGTH og animer stroke-dashoffset fra LENGTH til 0.
• For å reversere retning, bytt om på strek og mellomrom i stroke-dasharray og skyv stroke-dashoffset fremover.
• Flytt startpunktet ved å legge til halvparten (eller en hvilken som helst brøkdel) av lengden til stroke-dashoffset.
• Start «innsiden-ut»-animasjon: start fra HALF_LENGTH, avslutt ved FULL_LENGTH.
• Sett opp doble linjer via stroke-dasharray med halv lengde og stroke-dashoffset med kvart forskyvning.

Teknisk grunnlag: streker, mellomrom og banelengde

I kjernen av enhver SVG-animasjon ligger to CSS-egenskaper: stroke-dasharray og stroke-dashoffset. Den første definerer et «strek-mellomrom»-mønster langs konturen, den andre forskyver dette mønsteret. Hvis du gjør streken lik hele banelengden og deretter animerer forskyvningen, «tegnes» linjen foran øynene dine.

Det viktigste steget før enhver animasjon er å finne hele banelengden. Metoder:

• JavaScript: document.querySelector('path').getTotalLength(), ett konsollkall, tallet hardkodes inn i CSS. Ingen kjøretid.
• Illustrator: panelet «Dokumentinfo» viser lengden på den valgte banen.
• Egendefinert skript: hvis du har dusinvis eller hundrevis av baner, er det fornuftig å skrive automatisk traversering og lengdemarkering.

Viktig nyanse: getTotalLength() og Illustrator kan gi litt forskjellige tall for samme bane. Årsaken er ulik beregningspresisjon. Avviket er vanligvis innenfor 1-2 enheter og påvirker ikke det visuelle.

Sjekk banegeometrien for feil. Tegningsretningen og startpunktet avhenger av hvordan designeren bygde kurven i redigeringsprogrammet, det er normalt. Nedenfor skal vi lære å kontrollere begge uten å redigere selve SVG-en.

Grunnleggende animasjon: tegne en linje fra start til slutt

Enkleste tilfelle: en åpen bane med en lengde på, for eksempel, 100 enheter. Sett streken til full lengde og animer forskyvningen fra 100 til 0:

1
@keyframes reveal {
2
    to {
3
        stroke-dashoffset: 0;
4
    }
5
}
6
svg path {
7
    stroke-dashoffset: 100;
8
    stroke-dasharray: 100;
9
    animation: reveal 1s ease-in-out 0s forwards;
10
}

Det som skjer her: stroke-dasharray: 100 setter 100 enheter heltrukken linje og 100 enheter tomrom (den andre verdien settes som standard til den første). stroke-dashoffset: 100 forskyver mønsteret slik at den synlige delen går utenfor banens grenser, linjen er usynlig. Animasjon reduserer forskyvningen til null, og streken kryper på plass.

Noen praktiske merknader:

• Erstatt FULL_LENGTH med det faktiske tallet uten måleenheter. CSS-motoren forstår ikke px eller em inne i stroke-dasharray.
• Selektoren svg path er for én kontur. Hvis SVG-en har flere baner, bruk klasser, ID-er eller pseudoklasser som path:nth-of-type(3). Feilsøkingsverktøy: :nth Tester og nthmaster.com.
• @keyframes-navnet må være unikt for hver animasjonsvariant. Ulike baner krever ofte sine egne keyframes.
• Unngå negative stroke-dashoffset-verdier: Safari kan flimre eller vise artefakter med negative forskyvninger.

Kontrollere retning: reversere tegningen

Som standard går animasjonen fra banens start til slutt, uansett hvor designeren tegnet kurven. Men du trenger ofte det motsatte: en lukket kontur som tegner med klokken i stedet for mot klokken.

Løsningen er å invertere strekmønsteret: linjen starter usynlig (0 strek, 100 mellomrom) og blir synlig (100 strek, 0 mellomrom), mens forskyvningen trekker den bakover:

1
@keyframes reversed {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 0;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 100;
9
    }
10
}
11
svg path {
12
    animation: reversed 1s ease-in-out 0s forwards;
13
}

Mekanikken fungerer gjennom strekmønsterets sykliske natur: den heltrukne linjen materialiserer seg ved banens slutt, mens kopien går til venstre forbi starten og forblir usynlig. Det samme skjer på lukkede konturer: strekkopien dukker opp «før» starten og forstyrrer ikke oppfatningen.

Det finnes en alternativ tilnærming, kortere og uten array-manipulasjon:

1
@keyframes alternative-reversed {
2
    from {
3
        stroke-dashoffset: 100;
4
    }
5
    to {
6
        stroke-dashoffset: 200;
7
    }
8
}
9
svg path {
10
    stroke-dasharray: 100;
11
    animation: alternative-reversed 1s ease-in-out 0s forwards;
12
}

Her er stroke-dasharray fastsatt til full lengde, mens forskyvningen går fra 100 til 200. Samme resultat, linjen tegnes i motsatt retning. Bruk den varianten som føles mest intuitiv for deg.

Endre startpunktet

En lukket bane er som en sirkulær jernbane: toget kan starte fra hvilken som helst stasjon. Oppgaven er å flytte animasjonsstarten til et estetisk tiltalende punkt uten å røre selve geometrien.

Starte fra motsatt side

For symmetriske konturer er halv lengde-forskyvning nok:

1
@keyframes start-from-other-side {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 50;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 50;
9
    }
10
}
11
svg path {
12
    animation: start-from-other-side 1s ease-in-out 0s forwards;
13
}

Tegneretningen forblir den opprinnelige, men visuelt starter animasjonen fra motsatt ende.

Snu retning og vilkårlig start

For samtidig å snu retning og endre startpunktet, legg full lengde til den endelige forskyvningen:

1
@keyframes other-side-and-reverse {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 50;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 150;
9
    }
10
}
11
svg path {
12
    animation: other-side-and-reverse 1s ease-in-out 0s forwards;
13
}

For et helt vilkårlig punkt, sett inn en hvilken som helst verdi i stedet for 50. Prøving og feiling (pluss eller minus 5-10 enheter) finner den optimale posisjonen. I ett prosjekt ble startpunktet på et Twitch bit-ikon forskjøvet med 17 piksler, et stygt tall, men visuelt perfekt.

«Innsiden-ut»-animasjon

Linjen vokser fra midten i begge retninger samtidig, en klassisk teknikk for logoer og infografikk:

1
@keyframes inside-out {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 50;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 100;
9
    }
10
}
11
svg path {
12
    animation: inside-out 1s ease-in-out 0s forwards;
13
}

Forskyvningen starter fra halve lengden (banens sentrum) og går til full lengde, og drar streken med seg. For asymmetriske former kan startpunktet forskyves ytterligere:

1
@keyframes custom-inside-out {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 84;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 134;
9
    }
10
}

Her er 84 = HALV_LENGDE + 34. Konstanten 34 er håndplukket for en spesifikk form. Det finnes ingen universell oppskrift, prøv, se, juster.

«Utsiden-inn»-animasjon: dobbel penn

Den motsatte tilnærmingen: linjen tegnes fra begge ender samtidig og konvergerer mot midten. På åpne konturer gir dette en «to penner»-effekt:

1
@keyframes outside-in {
2
    from {
3
        stroke-dasharray: 0 100;
4
    }
5
    to {
6
        stroke-dasharray: 50 0;
7
    }
8
}
9
svg path {
10
    animation: outside-in 1s ease-in-out 0s forwards;
11
}

Streken når bare halve lengden, gapet kollapser dobbelt så raskt som i grunnleggende animasjon. stroke-dashoffset er ikke nødvendig her: «0 gap»-mønsteret i slutttilstanden får i seg selv begge strekhalvdelene til å konvergere.

Full kontroll: start- og sluttpunkter

Når én retning og ett startpunkt ikke er nok, kan du kontrollere begge tegnegrensene. To bevegelige linjehoder konvergerer mot et felles mål:

1
@keyframes custom-start-end {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 30;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 80;
9
    }
10
}
11
svg path {
12
    animation: custom-start-end 1s ease-in-out 0s forwards;
13
}

Verdiene 30 og 80 er vilkårlige; from-forskyvning mindre enn to-forskyvning er den eneste faste regelen. Hvis punktene er nærme, flyr ett segment fort, det andre kryper sakte, det er normalt og til og med vakkert.

Ikke vær redd for å gå forbi full lengde i to-verdien. stroke-dashoffset: 130 med lengde 100 er lovlig, det forskyver bare streksyklusen til andre runde. Hovedsaken er å unngå negative verdier.

Doble linjer og spesialeffekter

Den mest fleksible modusen: halvlange streker med kvartforskyvning. Hver bane får to linjehoder som beveger seg uavhengig:

1
@keyframes double-lines {
2
    from {
3
        stroke-dasharray: 0 50;
4
        stroke-dashoffset: 25;
5
    }
6
    to {
7
        stroke-dasharray: 50 0;
8
        stroke-dashoffset: 50;
9
    }
10
}
11
svg path {
12
    animation: double-lines 1s ease-in-out 0s forwards;
13
}

For komplekse former kan strekarrayen bestå av flere komponenter. Summen av alle array-verdier skal tilsvare full lengde. Ekte eksempel for et uendelighetstegn:

1
@keyframes infinity-double-lines {
2
    from {
3
        stroke-dasharray: 0 53 0 47;
4
        stroke-dashoffset: 37;
5
    }
6
    to {
7
        stroke-dasharray: 53 0 47 0;
8
        stroke-dashoffset: 60;
9
    }
10
}
11
svg .infinity {
12
    animation: infinity-double-lines 8s ease-in-out 0s alternate infinite;
13
    stroke: #8D69D8;
14
}

Fire array-komponenter (53 + 47 = 100 = full lengde) bytter plass mellom from og to. Animasjonen går i løkke (infinite) og reverserer (alternate), noe som skaper en meditativ, pustende kontur som aldri gjentar seg identisk.

Video: SVG-animasjon i praksis

For å se alle de beskrevne teknikkene i praksis og forstå nyansene i oppsettet, se denne engelske veiledningen:

Forfatteren viser trinnvis hvordan du lager en animert SVG-illustrasjon, fra eksport fra Figma til siste finpuss i CSS. Tidskoder i beskrivelsen lar deg hoppe rett til ønsket seksjon.

⁉️🤔 Ofte stilte spørsmål

Hvorfor vite veilengden på forhånd når det finnes getTotalLength()?

getTotalLength() er JavaScript, og målet vårt er ren CSS uten kjøretidsavhengigheter. Du måler lengden ÉN GANG (i konsoll eller Illustrator), hardkoder tallet inn i CSS-en, og animasjonen fungerer uten en eneste linje JS.

Kan man animere flere veier med én animasjon?

Ja, hvis de har samme lengde og ønsket oppførsel. I praksis er det sjelden at veier matcher, det er enklere å gi hver sin egen @keyframes eller bruke CSS-variabler med ulike lengdeverdier.

Hvorfor flimrer Safari med negativ stroke-dashoffset?

Det er en kjent renderingsfeil i WebKit: negative offset-verdier tolkes noen ganger som umiddelbar tilbakestilling til 0. Løsningen er å alltid holde stroke-dashoffset ≥ 0, hvis du trenger et skift, legg til full lengde i stedet for å gå negativt.

Hva gjør man hvis animasjonen «hakker» i starten eller slutten?

Legg til forwards i animation (bevarer slutttilstanden) og fjern alternate hvis du ikke trenger reversering. Sjekk også for konflikter med andre CSS-regler for samme element, for eksempel transition på samme egenskap.

Fungerer dette med stroke-dasharray på lukkede konturer med kompleks geometri?

Ja, mekanikken er den samme for alle SVG-veier, rette linjer, Bezier-kurver, lukkede polygoner. Den eneste forskjellen er at på en lukket kontur finnes det ingen visuell «start» og «slutt», så det å kontrollere startpunktet er spesielt viktig for estetikken.

Er det verdt å skrive animasjon manuelt når det finnes biblioteker?

Kort svar: avhenger av skala. For et engangsikon på en landingsside gir manuell kontroll perfekte resultater uten ekstra avhengigheter. Femten minutter med justering av en offset, og konturen tegnes nøyaktig slik du hadde tenkt, ikke slik bibliotekutvikleren bestemte.

Da vi laget SVG-delere for Elementor, betalte manuell kontroll seg tre ganger. Pluginet bruker dusinvis av animerte delere, hver med individuelt innstilte streker. Intet bibliotek ville gitt slik kontroll over estetikken.

På toppen av teknikkene fra denne artikkelen kan du legge lag på lag med:

• Kontroll av animasjonstilstand via JavaScript (start/stopp/restart);
• Lat oppstart via Intersection Observer, konturen tegnes først når den kommer inn i visningsområdet;
• Animasjonskjeder via animation-delay;
• Egendefinerte easing-funksjoner (cubic-bezier());
• Ytterligere opasitetsarbeid i @keyframes;
• Elastisk animasjon av stiplede linjer («marsjerende maur»).

Ta blåkopiene fra denne artikkelen som et utgangspunkt, sett inn dine egne lengdeverdier, og eksperimenter med cubic-bezier(). En riktig valgt easing-funksjon endrer animasjonsopplevelsen mer enn å flytte startpunktet et par piksler.