$c1: #181a27; $c2: #e88565; $easing: cubic-bezier(.34,1.61,.7,1); @mixin centmid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } * { box-sizing: border-box; } body { background-color: $c1; } .text { color: $c2; font-weight: 100; font-size: .8em; padding: 5px; } .text.center { @include centmid; font-size: 1.5em; } svg { width: 150px; height: 300px; @include centmid; padding: 15px; } svg.blur { filter: blur(5px); } path { stroke: $c2; stroke-width: 1px; fill: none; animation: morph 15s infinite $easing; } @keyframes morph { 0%, 7% { d: path('M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0') } 11%, 17% { d: path('M50,0 L50,15 L50,30 L50,45 L50,60 L50,75 L50,100') } 21%, 27% { d: path('M0,0 L50,0 L50,50 L25,50 L0,50 L0,100 L50,100') } 31%, 37% { d: path('M0,0 L50,0 L50,100 L0,100 L50,100 L50,50 L0,50') } 41%, 47% { d: path('M0,0 L0,50 L50,50 L50,0 L50,35 L50,70 L50,100') } 51%, 57% { d: path('M50,0 L0,0 L0,50 L25,50 L50,50 L50,100 L0,100') } 61%, 67% { d: path('M50,0 L0,0 L0,50 L0,100 L50,100, L50,50 L0,50') } 71%, 77% { d: path('M0,0 L50,0 L50,20 L50,40 L50,60 L50,80 L50,100') } 81%, 87% { d: path('M0,0 L50,0 L50,100 L0,100 L0,0 L0,50 L50,50') } 91%, 96% { d: path('M0,100 L50,100 L50,50 L50,0 L0,0 L0,50 L50,50') } } VIEW COMPILED