Last active
September 30, 2018 22:16
-
-
Save cengizdemir/c85dd65a02fb1dc0a7418b7ad0a8e745 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<svg version="1.1" id="micSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 160 160" enable-background="new 0 0 160 160" xml:space="preserve"> | |
<style> | |
@keyframes el_LSxSvktOyR_Animation { | |
16.67% { | |
opacity: 0.9; | |
} | |
0% { | |
opacity: 0.9; | |
} | |
100% { | |
opacity: 0.9; | |
} | |
} | |
@keyframes el_kQMmwg-KHH_NcPdL90Ua_Animation { | |
0% { | |
-webkit-transform: translate(0px, -8px); | |
transform: translate(0px, -8px); | |
} | |
16.67% { | |
-webkit-transform: translate(0px, 0px); | |
transform: translate(0px, 0px); | |
} | |
100% { | |
-webkit-transform: translate(0px, 0px); | |
transform: translate(0px, 0px); | |
} | |
} | |
@keyframes el_G9IUH5wHki_f38ODD53n_Animation { | |
0% { | |
-webkit-transform: translate(0px, 9px); | |
transform: translate(0px, 9px); | |
} | |
16.67% { | |
-webkit-transform: translate(0px, 0px); | |
transform: translate(0px, 0px); | |
} | |
100% { | |
-webkit-transform: translate(0px, 0px); | |
transform: translate(0px, 0px); | |
} | |
} | |
@keyframes el_CRihEIW54R_AEUTKDLiL_Animation { | |
0% { | |
-webkit-transform: scale(1, 0); | |
transform: scale(1, 0); | |
} | |
16.67% { | |
-webkit-transform: scale(1, 1); | |
transform: scale(1, 1); | |
} | |
100% { | |
-webkit-transform: scale(1, 1); | |
transform: scale(1, 1); | |
} | |
} | |
#micSVG * { | |
-webkit-animation-duration: 3s; | |
animation-duration: 3s; | |
-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1); | |
animation-timing-function: cubic-bezier(0, 0, 1, 1); | |
} | |
#el_LSxSvktOyR { | |
fill: #8ACBA7; | |
-webkit-animation-name: el_LSxSvktOyR_Animation; | |
animation-name: el_LSxSvktOyR_Animation; | |
opacity: 0.9; | |
} | |
#el_IzcHmFlV5C { | |
fill: #FFFFFF; | |
} | |
#el_kQMmwg-KHH { | |
fill: #FFFFFF; | |
} | |
#el_CRihEIW54R { | |
fill: #FFFFFF; | |
} | |
#el_G9IUH5wHki { | |
fill: #FFFFFF; | |
} | |
#el_CRihEIW54R_AEUTKDLiL { | |
-webkit-transform-origin: 50% 50%; | |
transform-origin: 50% 50%; | |
transform-box: fill-box; | |
-webkit-transform: scale(1, 0); | |
transform: scale(1, 0); | |
-webkit-animation-name: el_CRihEIW54R_AEUTKDLiL_Animation; | |
animation-name: el_CRihEIW54R_AEUTKDLiL_Animation; | |
} | |
#el_G9IUH5wHki_f38ODD53n { | |
-webkit-animation-name: el_G9IUH5wHki_f38ODD53n_Animation; | |
animation-name: el_G9IUH5wHki_f38ODD53n_Animation; | |
-webkit-transform-origin: 50% 50%; | |
transform-origin: 50% 50%; | |
transform-box: fill-box; | |
-webkit-transform: translate(0px, 9px); | |
transform: translate(0px, 9px); | |
} | |
#el_kQMmwg-KHH_NcPdL90Ua { | |
-webkit-animation-name: el_kQMmwg-KHH_NcPdL90Ua_Animation; | |
animation-name: el_kQMmwg-KHH_NcPdL90Ua_Animation; | |
-webkit-transform-origin: 50% 50%; | |
transform-origin: 50% 50%; | |
transform-box: fill-box; | |
-webkit-transform: translate(0px, -8px); | |
transform: translate(0px, -8px); | |
} | |
</style> | |
<circle cx="80" cy="80" r="80.001" id="el_LSxSvktOyR"/> | |
<g id="el_RLYbPrfpP8"> | |
<path d="M77.483,121.854h-8.016c-1.39,0-2.515,1.125-2.515,2.516c0,1.387,1.125,2.512,2.515,2.512h21.059 		c1.39,0,2.515-1.125,2.515-2.512c0-1.391-1.125-2.516-2.515-2.516h-8.019v-6.016c16.232-0.68,28.662-9.162,28.662-19.873 		c0-1.389-1.125-2.514-2.514-2.514c-1.388,0-2.513,1.125-2.513,2.514c0,8.074-11.787,14.896-25.739,14.896h-0.813 		c-13.949,0-25.734-6.822-25.734-14.896c0-1.389-1.125-2.514-2.514-2.514c-1.388,0-2.513,1.125-2.513,2.514 		c0,10.711,12.426,19.191,28.653,19.871V121.854L77.483,121.854z" id="el_IzcHmFlV5C"/> | |
</g> | |
<g id="el_IHs5X7CakF"> | |
<g id="el_kQMmwg-KHH_NcPdL90Ua" data-animator-group="true" data-animator-type="0"> | |
<path d="M62.811,77.426c-1.389,0-2.514,1.125-2.514,2.514v12.855c-0.002,8.562,8.729,15.532,19.463,15.531 		l0.48,0.001c10.73,0,19.463-6.97,19.463-15.532V79.938c0-1.387-1.125-2.512-2.514-2.512s-2.514,1.125-2.514,2.512v12.857 		c0,5.794-6.477,10.507-14.438,10.506h-0.48c-7.961,0.001-14.439-4.712-14.439-10.506V79.94 		C65.32,78.551,64.195,77.426,62.811,77.426z" id="el_kQMmwg-KHH"/> | |
</g> | |
</g> | |
<g id="el_UPhrej-xMS"> | |
<g id="el_CRihEIW54R_AEUTKDLiL" data-animator-group="true" data-animator-type="2"> | |
<path d="M117.149,69.461H95.581l-2.965-9.939c-0.314-1.066-1.299-1.795-2.406-1.795 		c-0.022,0-0.051,0.002-0.074,0.002c-1.143,0.035-2.112,0.832-2.371,1.941l-2.204,9.459l-2.834-16.824 		c-0.197-1.18-1.201-2.055-2.396-2.094c-1.24-0.047-2.252,0.771-2.527,1.934l-3.969,16.804l-2.81-7.275 		c-0.39-1.006-1.347-1.631-2.449-1.605c-1.075,0.045-2.004,0.77-2.307,1.805l-2.224,7.588H42.852c-1.388,0-2.513,1.125-2.513,2.515 		c0,1.387,1.125,2.512,2.513,2.512h17.815h39.406h17.076c1.387,0,2.512-1.125,2.512-2.512 		C119.661,70.586,118.536,69.461,117.149,69.461z M65.695,74.486h0.231c1.115,0,2.099-0.733,2.412-1.807l0.668-2.283l3.066,7.932 		c0.396,1.028,1.423,1.68,2.516,1.602c1.098-0.073,2.02-0.856,2.272-1.93l2.974-12.598l2.853,16.915 		c0.198,1.183,1.202,2.06,2.396,2.097c0.027,0,0.055,0,0.08,0c1.164,0,2.182-0.802,2.445-1.94l2.898-12.441l0.795,2.663 		c0.317,1.065,1.297,1.795,2.408,1.795h1.338L65.695,74.486z" id="el_CRihEIW54R"/> | |
</g> | |
</g> | |
<g id="el_ANoCDTtDCG"> | |
<g id="el_G9IUH5wHki_f38ODD53n" data-animator-group="true" data-animator-type="0"> | |
<path d="M97.189,62.9c1.389,0,2.514-1.125,2.514-2.514V47.531C99.703,38.968,90.975,32,80.24,32h-0.48 		c-10.732,0-19.463,6.969-19.463,15.531v12.857c0,1.387,1.125,2.512,2.512,2.512c1.389,0,2.514-1.125,2.514-2.512V47.531 		c0-5.793,6.477-10.506,14.438-10.506h0.482c7.961,0,14.438,4.713,14.438,10.506v12.854C94.68,61.775,95.805,62.9,97.189,62.9z" id="el_G9IUH5wHki"/> | |
</g> | |
</g> | |
<script> | |
var svg = document.querySelector('#micSVG'), | |
b = svg.querySelectorAll('style'), | |
c = function(d) { | |
b.forEach(function(f) { | |
var g = f.textContent; | |
(f.textContent = g.replace(/transform-box: [^;\ | |
r\ n] * /gi, 'transform-box: '+d)) | |
} | |
) | |
}; | |
c('initial'), window.requestAnimationFrame(function() { | |
return c('fill-box') | |
}) | |
})(); | |
</script> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment