Tilbage til oversigten

SVG signatur

Denne animation har jeg brugt mange steder. Blandt andet på de to tidligere versioner af dette website (på forsiden) – og på kontaktsiden her på siden.

Jeg lavede animationen, da SVG først for alvor var ved at slå igennem som teknologi, og demoen kom på forsiden af CodePen, hvor den endte med over 5.500 views.

Animationen består af SVG paths, formet til at udgive mit navn. Og med CSS kan man angive, at en SVG path med stroke, skal vises som dashed i stedet for solid. Det kan man udnytte til at vise et “mellemrum” i stregen, der er samme længde som den path, man ønsker at animere. Derefter kan man, med en helt simpel CSS animation, “fylde” stregen ved at animere fra path’ens længde, til 0.

I kan se koden her på CodePen:

See the Pen CSS Self-signing Signature by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.16999

Er du interesseret i et samarbejde?