<div class="logo">
<svg width="144" height="134" viewBox="0 0 144 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g
transform="matrix(0.1,0,0,-0.1,-0,121)"
id="g4"
style="fill:#000000; stroke:none">
<path
d="m 814,1120 c -15,-49 -31,-90 -35,-90 -5,0 -16,14 -25,31 -8,17 -19,27 -24,23 C 726,1079 672,952 612,802 504,536 502,529 523,520 c 12,-4 26,-5 30,0 5,4 46,101 93,216 47,115 88,212 92,216 4,4 16,-8 26,-27 11,-19 23,-35 27,-35 4,0 26,57 49,128 24,70 45,130 49,134 4,4 63,-133 133,-305 125,-310 141,-338 171,-308 7,7 -31,111 -123,340 l -133,331 -48,0 -47,0 -28,-90 z"
id="path6"/>
<path
d="m 310,1035 c -19,-19 -39,-35 -45,-35 -6,0 -30,14 -53,31 -24,17 -46,28 -50,25 -3,-4 -9,-31 -12,-59 l -5,-52 -48,-9 c -26,-5 -47,-12 -47,-16 0,-3 24,-30 54,-59 l 53,-53 62,31 c 33,17 78,35 99,39 l 37,8 3,92 c 1,51 -1,92 -6,92 -4,0 -23,-16 -42,-35 z m -70,-87 c 24,-18 32,-19 45,-8 8,7 18,10 21,7 10,-10 -5,-25 -33,-32 -15,-3 -43,-14 -64,-24 -22,-11 -43,-15 -50,-10 -10,6 -6,11 14,18 21,8 27,17 27,41 0,36 2,36 40,8 z"
id="path8"/>
<path
d="M 555,985 C 531,977 497,951 470,922 431,880 417,872 365,861 247,835 50,743 50,713 c 0,-24 70,-90 129,-122 72,-38 136,-58 214,-67 54,-6 57,-5 57,15 0,24 1,24 -90,40 -79,14 -175,59 -214,100 l -29,31 86,40 c 86,40 211,74 320,85 48,5 57,10 57,26 0,15 -7,19 -35,19 -19,0 -35,4 -35,9 0,18 53,51 92,57 32,6 38,10 38,30 0,28 -23,31 -85,9 z"
id="path10" />
<path
d="m 264,725 c -4,-9 -2,-21 4,-27 15,-15 44,-1 40,19 -4,23 -36,29 -44,8 z"
id="path12"/>
<path
d="m 730,708 c 0,-2 -9,-33 -19,-71 -20,-67 -20,-67 1,-78 11,-6 23,-7 28,-2 8,9 43,133 38,138 -5,5 -48,17 -48,13 z"
id="path14"/>
<path class="wave one"
d="M 195,465 C 115,448 50,421 50,405 c 0,-31 25,-33 100,-8 118,40 246,43 380,7 186,-49 476,-45 618,8 56,21 59,25 39,52 -11,15 -16,16 -48,2 -132,-55 -398,-61 -589,-12 -119,29 -252,34 -355,11 z"
id="path16"/>
<path class="wave two"
d="M 201,365 C 118,347 50,320 50,306 c 1,-35 16,-37 96,-10 122,41 239,44 379,9 212,-52 434,-53 596,-2 75,23 85,32 69,57 -8,12 -15,13 -57,1 -112,-32 -175,-41 -302,-41 -112,0 -155,5 -268,30 -149,33 -255,38 -362,15 z"
id="path18" />
<path class="wave three"
d="M 215,267 C 134,250 50,218 50,206 c 0,-6 4,-17 9,-25 7,-11 19,-10 68,7 147,51 251,52 438,6 183,-46 465,-36 600,20 38,16 43,27 21,45 -11,10 -29,8 -82,-8 -145,-45 -381,-45 -544,-1 -94,26 -262,34 -345,17 z"
id="path20"/>
</g>
</svg>
</div>
.logo {
width: 140px;
height: 134px;
&:hover {
cursor: pointer;
.wave {
&.one {
animation: waves_one 2s ease infinite;
}
&.two {
animation: waves_two 3s ease infinite;
}
&.three {
animation: waves_three 2s ease infinite;
}
}
@keyframes waves_one {
0% { transform: translate( 40px, 20px ) }
50% { transform: translate( -20px, 0 ) }
100% { transform: translate( 40px, 20px ) }
}
@keyframes waves_two {
0% { transform: translate( 20px, 30px ) }
50% { transform: translate( -80px, -10px) }
100% { transform: translate( 20px, 30px) }
}
@keyframes waves_three {
0% { transform: translate( -30px, 10px) }
50% { transform: translate( 40px, 10px) }
100% { transform: translate( -30px, 20px) }
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.