Ecosphere

by vovkasolovev

HTML

<svg version="1.1" class="ecosphere-logotype-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 270 52" style="enable-background:new 0 0 270 52;" xml:space="preserve"> <style type="text/css"> @-webkit-keyframes ecosphere_color {0%{transform:scale(1);} 90%{transform:scale(1);} 100%{transformscale(0.9);}} @-moz-keyframes ecosphere_color {0%{transform:scale(1);} 90%{transform:scale:(1);} 100%{transformscale(0.9);}} @keyframes ecosphere_color {0%{transform:scale(1);} 80%{transform:scale:(1);} 100%{transform:scale(0.9);}} #ecosphere #o{fill:#1E8DC5; transform-origin: 88px 24px; -webkit-backface-visibility:hidden; backface-visibility:hidden; animation:ecosphere_color 10s ease-in forwards;} #ecosphere_mask .ecosphere_grad{filter:url(#opacity_mask);} #ecosphere_mask .ecosphere_path{fill:url(#grad_mask);} @-webkit-keyframes ecosphere_fadein {33%{opacity:0;} 100%{opacity:1;}} @-moz-keyframes ecosphere_fadein {33%{opacity:0;} 100%{opacity:1;}} @keyframes ecosphere_fadein {33%{opacity:0;} 100%{opacity:1;}} .ecosphere_image {-webkit-backface-visibility:hidden; backface-visibility:hidden; animation:ecosphere_fadein 3s ease-in-out forwards;} </style> <g id="ecosphere"><path id="a" d="M270,24c0-11.1-9-20-20-20s-20,8.9-20,20s8.9,20,20,20c6.5,0,12.4-3.1,16-8v8h4V24z M250,40c-8.8,0-16-7.2-16-16 s7.2-16,16-16s16,7.2,16,16S258.8,40,250,40z"/><path id="r" d="M206,4h-4v48h4v-8.7c11.1,0,20-8.8,20-19.7S217.1,4,206,4z M206,39.4V7.9c8.8,0,16,7.1,16,15.7S214.8,39.4,206,39.4 z"/><path id="i" d="M196,8V4c-11.1,0-20,8.9-20,20l0,0c0,11,8.9,20,20,20v-4c-8.1,0-14.9-6.1-15.9-14H194v-4h-13.9 C181.1,14.1,187.9,8,196,8z"/><path id="f" d="M172,24c0-10.4-7.9-18.9-18-19.9V0h-4v4.1c-10.1,1-18,9.5-18,19.9s7.9,18.9,18,19.9V48h4v-4.1 C164.1,42.9,172,34.4,172,24z M136,24c0-8.1,6.1-14.9,14-15.9v31.7C142.1,38.9,136,32.1,136,24z M154,39.9V8.1 c7.9,1,14,7.7,14,15.9S161.9,38.9,154,39.9z"/><path id="s"...