Logo animation

index.html

.logo
    div
    div
    div
    svg(viewBox="0 0 200 200"): path(d="M103.7226715,142.5249634c7.0730667,1.6740265,14.5183868-1.3020172,21.9637146-8.7421417 	c10.4234619-10.4161987,18.2410431-20.4603577,23.6389008-29.7605286l-4.6533356-4.6500778 	c-5.5839844,7.6261444-13.9599762,16.9263077-25.1279678,28.0865097c-4.8394699,4.8360901-9.4927979,6.8821106-14.1461258,6.1381073 	s-10.981842-5.2080994-19.1717148-13.2062378l25.6863708-25.6684647c5.2117386-5.2080917,8.0037308-10.0441589,8.3759918-14.508255 	c0.372261-4.4640732-1.4890671-8.9281693-5.770134-13.2062454c-3.9088135-3.9060822-7.4453278-6.6961327-10.7957306-8.5561638 	c-3.3504028-1.8600349-6.3285141-2.9760628-8.9343948-3.3480644c-2.6058502-0.3720016-5.211731,0.1860123-8.1898422,1.4880295 	c-2.9781418,1.3020172-5.39785,2.9760666-7.6314697,4.6500854c-2.2335892,1.8600311-4.8394699,4.2780762-8.0037308,7.4401321 	c-4.8394699,4.8360901-8.375988,8.9281616-10.4234657,12.2762222c-2.0474739,3.3480682-3.350399,7.2541199-3.350399,11.5322037 	c-0.1861458,4.2780762,1.3029251,8.7421417,4.4671822,13.5782394s7.817585,10.4161987,14.3322411,16.9263153 	C87.5290985,134.3408356,96.6496048,140.8509521,103.7226715,142.5249634z M71.893898,105.3243103 	c-2.0474777-2.6040344-3.3504028-4.8360901-4.2810669-7.2541122c-0.9306641-2.2320328-1.3029251-4.2780838-1.3029251-5.9521027 	s0.372261-3.53405,1.4890671-5.5800934c1.1168137-2.046051,2.4197388-3.9060822,3.7226639-5.3940887 	c1.3029251-1.4880295,3.3504028-3.7200623,5.9562531-6.3240967c3.3504028-3.3480682,6.1424026-5.9521027,8.1898499-7.4401321 	c2.0474701-1.4880295,4.2810669-2.418045,6.700798-2.7900467c2.4197388-0.3720016,4.8394775,0.1860123,7.2591858,1.4880295 	c2.4197311,1.4880295,5.211731,3.9060822,8.5621338,7.2541199c2.4197311,2.418045,3.3503952,4.8360901,2.7919922,7.2541122 	c-0.558403,2.4180527-2.2335892,5.0220871-5.211731,7.9981461l-25.6863785,25.668457 	C76.547226,110.9044113,73.9413757,107.9283752,71.893898,105.3243103z")

Logo animation.markdown

Logo animation

exporia.pl

A Pen by Maciej Leszczyński on CodePen.

License.

style.css

body
    display flex
    align-items center
    justify-content center
    height 100vh
    width  100vw
    margin 0

$size = 200px

.logo
    width  $size
    height $size
    position relative

    > svg, > div
        width  $size
        height $size
        position absolute

    > svg
        fill: white

    > div
        width  $size * .8
        height $size * .8
        margin $size * .1
        border-radius: 14%
        transform rotate(45deg)
        mix-blend-mode multiply
        animation: 2s cubic-bezier(1,-0.01, 0.76, 1.06) infinite alternate

        &:nth-child(1)
            background-color rgb(84, 255, 255)
            animation-name rotate-1
        &:nth-child(2)
            background-color rgb(255, 115, 255)
            animation-name rotate-2
        &:nth-child(3)
            background-color rgb(255, 255, 162)
            animation-name rotate-3

$r = 45deg

@keyframes rotate-1
    to
        transform rotate($r * 3) translate(110%)
@keyframes rotate-2
    to
        transform rotate($r * 5)
@keyframes rotate-3
    to
        transform rotate($r * 7) translate(110%)