Animation · februar 20, 2016 0

Demo: SVG “goo” loaders

Dette er to loader der udnytter SVG filtre til at skabe den famøse “klister”-effekt der pludselig blev så populær blandt webudviklere tilbage i 2016.

Se demoen her.

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.