Tilbage til oversigten

SVG gooey loaders

De to loaders her, benytter begge den såkaldte “goo” eller “klister” effekt, som man kan skabe ved hjælp af SVG filtre.

Der skal to filtre til: Det ene øger kontrasten mest muligt. Det andet tilfører blur. Sammenlagt får det elementerne til at se mindre ud end de er, da halvdelen af dem vil være mindre end 50% mørke, og dermed skjulte. Men når elementerne animeres nær hinanden og dermed overlapper, bliver disse skjulte områder pludselig mere end 50% mørke – og synlige. Det skaber en illusion af at de “klistrer sammen”.

Selve animationen er en helt simpel CSS animation. I den første loader roterer den, og i den anden skaleres elementernes størrelse.

See the Pen SVG Gooey Loaders – Batch 2 by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.16999

Er du interesseret i et samarbejde?