Skip to content

Instantly share code, notes, and snippets.

@cengizdemir
Last active September 30, 2018 22:16
Show Gist options
  • Save cengizdemir/c85dd65a02fb1dc0a7418b7ad0a8e745 to your computer and use it in GitHub Desktop.
Save cengizdemir/c85dd65a02fb1dc0a7418b7ad0a8e745 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;c0,1.387,1.125,2.512,2.513,2.512h17.815h39.406h17.076c1.387,0,2.512-1.125,2.512-2.512&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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&#10;&#9;&#9;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