Css3 animation blowing bubble - image

I'm making a CSS3 animation in which I want a bubble to appear like it is blown from a pipe like a real bubble. Can any one guide how to do that?
Like this drop appears in the upper image the bubble should appear like a real bubble. This is what I have done so far, but it doesn't look good! It seems like phone is coming out of a square. Is there any way to make it look like its coming out of a bubble?
#Capa_2{
position: absolute;
overflow: visible;
top: 100px;
}
#Capa_1{
position: absolute;
top: 60px;
left: 68px;
animation: vibrate 0.1s 4s 3;
}
#chat {
opacity: 0;
animation: grow 3s 2s ease-in forwards;
}
#keyframes grow {
0% {
/*transform: scale(2,2);*/
}
40% {opacity: 1;
transform: scale(2.5,1.6) translate(300px,-350px);
}
70% {opacity: 1;
transform: scale(2.4,1.5) translate(300px,-280px);
margin-left: -2px;
margin-top: 2px;
}
100% {opacity: 1;
transform: scale(2,2) translate(300px,-350px);
margin-left: 0px;
margin-top: 0px;
}
}
#phone {
opacity: 0;
animation: ring 2.5s 4.5s forwards;
}
#keyframes ring {
0% {
opacity: 1;
transform: translateX(-900px) rotate(0deg);
}
100% {
transform: translateX(2px) rotate(360deg);
opacity: 1;
}
}
#phone {
opacity: 0;
animation: ring 2.5s 2s forwards;
}
#keyframes vibrate {
0% {margin-left: 0px;}
25% {margin-left: -3px;}
50% {margin-left: 0px;}
75% {margin-left: 3px;}
100% {margin-left: 0px;}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<link href="button.css" rel="stylesheet" media="all">
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_2" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 435.244 435.244" style="enable-background:new 0 0 435.244 435.244;" xml:space="preserve">
<g>
<g>
<path id="chat" d="M75.146,425.343v-96.354C27.281,294.43,0,244.745,0,191.603C0,91.414,97.624,9.901,217.622,9.901 s217.622,81.513,217.622,181.701c0,100.186-97.624,181.701-217.622,181.701c-14.218,0-28.533-1.189-42.631-3.539L75.146,425.343z M217.622,39.177c-103.854,0-188.346,68.379-188.346,152.425c0,45.561,25.014,88.418,68.636,117.568l6.504,4.346v62.022 l65.497-36.452l5.2,0.973c14.021,2.63,28.321,3.968,42.508,3.968c103.856,0,188.346-68.376,188.346-152.425 C405.968,107.556,321.479,39.177,217.622,39.177z" fill="#000000"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 760.025 760.025" style="enable-background:new 0 0 460.025 460.025;" xml:space="preserve" width="62px" height="62px">
<path id="phone" d="M354.363,271.978c-11.661-22.385-28.972-40.292-51.43-53.211c-8.664-5.009-16.844-7.445-25.008-7.445 c-3.176,0-6.362,0.383-9.489,1.134c-10.368,2.513-20.326,7.363-30.442,14.831c-3.194,2.357-7.101,3.551-11.614,3.551 c-5.494,0-11.444-1.886-15.518-4.921c-29.574-22.047-54.67-47.141-76.712-76.711c-4.334-5.82-7.769-18.471-1.376-27.136 c7.47-10.118,12.322-20.077,14.837-30.461c2.694-11.19,0.629-22.467-6.3-34.455C128.376,34.669,110.468,17.359,88.089,5.7 C80.837,1.92,73.416,0,66.033,0C53.686,0,42.13,5.363,32.62,15.499c-8.742,9.303-16.471,19.154-25.389,31.082 C-0.932,57.51-0.259,70.117,0.336,81.24l0.015,0.237c1.002,14.108,6.272,30.804,16.11,51.025 c16.643,34.227,40.282,66.727,72.261,99.354c6.569,6.708,32.767,32.907,39.479,39.476c32.634,31.989,65.134,55.626,99.355,72.267 c20.226,9.839,36.917,15.107,51.029,16.111l0.237,0.015c2.903,0.155,6.006,0.3,9.026,0.3c0.001,0,0.001,0,0.001,0 c7.451,0,17.097-0.818,25.631-7.198c11.931-8.916,21.784-16.646,31.074-25.378C360.843,312.168,364.508,291.429,354.363,271.978z" fill="#1F45FC"/>
</svg>
</div>
</body>
</html>

Related

Problem with transform-box: fill-box and firefox

I am facing a problem with an svg file in firefox which I was able to boil down to the following code (the original image had a couple of thousend lines of code):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70">
<style type="text/css"><![CDATA[
.sun {
transform-box: fill-box;
animation-name: sun-spoke-rotate;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
.sun path {
transform-box: fill-box;
animation-name: sun-spoke-scale;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g class="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
</g>
</g>
This works as expected in chrome and the newest version of edge. It of course doesn't work at all in Internet Explorer but what really bothers me is that I also has issues in firefox. It works well --- until I start moving the mouse??!! Then it starts to jump all over the place. I figured it has something to do with the transform-box: fill-box. Any ideas?

Replace 50% in transform-origin with the coordinates of the center of rotation in pixels
You can get the coordinates of the center of rotation using the Javascript getBBox() method
The property transform-box: fill-box; in this case must be removed from the CSS rules
// Calculating the center of rotation
let bb = sun.getBBox();
console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70" style="border:1px solid;">
<style type="text/css"><![CDATA[
#sun {
animation-name: sun-spoke-rotate;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#sun path {
animation-name: sun-spoke-scale;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g id="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
<circle
</g>
</g>

SVG Circle not animated in Edge

The below svg animates perfectly in all browsers but Edge (surprise!).
<svg width="80" height="24" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#555">
<circle cx="15" cy="15" r="15">
<animate attributeName="r" from="15" to="15"
begin="0s" dur="0.8s"
values="15;9;15" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="1" to="1"
begin="0s" dur="0.8s"
values="1;.5;1" calcMode="linear"
repeatCount="indefinite" />
</circle>
</svg>
I tried adding px as units but no luck.
Thanks for your tips!

I try to check your code and refer to the MDN documentation.
I can see that you are using animate, attributeName, from, to, dur attributes in your code.
Animate is supported in Edge version <=79.
Whereas compatibility is unknown for attributeName, from, to, dur
Reference:
SVG Animate
I think this is the reason why your code is not working in the MS edge legacy browser.
I suggest you recommend your clients use the MS Edge Chromium browser or you can remove the animation or show the image in place of animation to avoid the issue.

After reading the comments and answers I decided to go for clear CSS animation, instead of SVG. I grabbed the code from https://projects.lukehaas.me/css-loaders/ and my "solution" looks like this:
<style>
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.2em;
height: 2.2em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.3s infinite ease-in-out;
animation: load7 1.3s infinite ease-in-out;
}
.loader {
color: #888;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
#-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.2em 0 -1.3em;
}
40% {
box-shadow: 0 2.2em 0 0;
}
}
#keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.2em 0 -1.3em;
}
40% {
box-shadow: 0 2.2em 0 0;
}
}
</style>
<div class="loader">Loading...</div>

Animate calligraphy using image-file instead of SVG

I am creating animated calligraphy using the stroke-dashoffset technique, applying the stroke as an animated mask on top of an SVG. This works on most browsers, but I would like to apply the same mask on top of a PNG instead. That way, even if the browser has trouble with both SVG and mask (IE...), at least it will just display the PNG as-is.
Here is a codepen of the working calligraphy with pure SVG:
https://codepen.io/benviatte/pen/PMzmYB
Here is the codepen of the non-working calligraphy where I put an image instead of the base SVG. It just displays blank, unless I remove the "mask-image" property, in which case it doesn't animate:
https://codepen.io/benviatte/pen/eqzWzJ
Finally, here is the code of the PNG version that just displays blank:
HTML:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</svg>
<img src="http://thehermitcrab.org/imgs/S2.png"/>
CSS:
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 1s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
img, svg{
width: 300px;
position: absolute;
top: 0;
left: 0;
}
img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Thank you so much!!!

You can fill the masked path with an image like so:
I hope this is what you were asking.
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 5s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
svg {
width: 300px;
height: 300px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="0" y="0" width="100" height="100" />
</pattern>
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</defs>
<path mask="url(#mask)" fill="url(#img)" d="m 84.347106,72.730822 c -6.700057,0.41349 -13.536192,0.895 -20.004337,2.74122 -8.269143,3.35101 -15.144649,10.28592 -18.335113,18.62393 -1.745059,4.7139 -2.424554,9.829858 -1.055133,14.737138 0.971246,7.85177 6.591277,14.03623 12.594733,18.68723 4.899213,3.10976 10.516595,4.80935 15.88174,6.85728 3.598383,2.16843 7.853428,4.63947 9.276845,8.8059 0.995595,7.43174 -3.283258,14.41911 -7.577125,20.14167 -2.859338,3.25041 -7.082956,5.7682 -11.428016,6.06759 -2.76877,-0.88985 -4.676886,-3.50515 -6.467732,-5.66664 -0.8438,-2.84582 -0.503218,-6.25249 -2.88424,-8.50648 -2.356943,-2.51972 -6.848373,-3.89583 -9.901785,-1.90687 -1.783614,1.60567 -1.978665,4.29248 -0.431156,6.14634 0.628015,2.58248 4.330039,1.06794 4.996601,3.36938 -0.140661,3.29536 -3.415289,5.93264 -3.011822,9.2671 1.471965,3.46591 3.011956,7.79888 7.009623,8.93583 2.779476,2.56577 6.811098,1.17952 10.184223,1.15628 7.753544,-0.82418 15.439311,-4.27064 20.776362,-10.01337 3.918376,-5.23506 6.686713,-11.29125 9.19183,-17.29292 0.679648,-4.33031 0.214675,-8.76706 0.319579,-13.12674 -4.685098,-7.44203 -12.013326,-12.8652 -20.16128,-15.99596 -4.833407,-2.57162 -11.582728,-2.85294 -14.441374,-8.15604 -4.638062,-7.39166 -5.929022,-17.810038 -0.40541,-25.114328 3.085422,-4.36163 7.883758,-8.71782 13.633176,-8.01843 4.028691,-0.21996 8.250498,0.0932 11.561718,2.63603 2.904262,1.44386 1.746882,5.41774 0.879004,7.79388 -2.021102,4.66617 -3.832398,9.978878 -2.737189,15.088588 0.62468,1.45971 1.572558,3.02113 2.790336,3.97665 2.563411,1.00256 5.41245,0.65028 7.526616,-1.1464 2.393394,-1.33047 7.187979,-2.70727 6.367699,-6.21466 -1.29931,-1.67133 -4.660058,0.16306 -5.006198,-2.59652 -0.718456,-6.014858 3.485958,-11.212508 3.846428,-17.152098 0.2919,-3.79706 1.28679,-8.45196 -1.339374,-11.64839 -3.199638,-2.55035 -7.777181,-2.43209 -11.649229,-2.47619 z" />
</svg>

SVG Cross Browser (Firefox) Issues

I tried to adapt a codepen thing for waves with svgs.
Works just fine in Chrome, Safari and Edge, but not in Firefox (and IE, but I don't care too much about that).
I suspect some Syntax problem with the svg. The animation works just fine, but the svgs are not displayed correctly. In Firefox it's just a straight line instead of waves.
Anyone out there, that has an idea about that?
Thanks a lot in advance.
.waves {
width: 100%;
height: 7em;
position: relative;
overflow: hidden;
background-color: #f6f9fc;
}
.wave
{
width:calc( 100% + 4em );
height:100%;
position:absolute;
left:-2em;
background:bottom center repeat-x;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
/* Individual wave layers */
.wave_1
{
animation-name:wave_1;
animation-duration:3400ms;
animation-delay:-1200ms;
z-index:2;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #e0e7f1;
top: -3em;
}
.wave_2
{
z-index:1;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#e0e7f1" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #245aa6;
top: 0em;
}
#keyframes wave_1
{
from { transform: rotate(0deg) translatey(-0.61em) rotate(0deg) ; }
to { transform: rotate(360deg) translatey(-0.61em) rotate(-360deg) ; }
}
<div class="waves">
<div class="wave wave_1"></div>
<div class="wave wave_2"></div>
</div>

SVG not working in IE9+

This works in Firefox and Chrome but not IE. The leaf should grow inside the lightbulb. As far as I can tell I'm using the correct prefixes for the keyframes. I have tried adding a -ms keyframe without success. Appreciate any assistance here
The jsfiddle link is here, http://jsfiddle.net/EfLtD/4/
Code is below
<div id="yellow-globe">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve" width="250px" height="250px">
<g id="light-bulb-6-icon_1_">
<path fill="#FFFFFF" d="M-314.3,152.1c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H-314.3z M-326.6,137.7c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H-326.6z M-327.4,123.9c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L-327.4,123.9L-327.4,123.9z M-298,109.7c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1c-25.5,0-37,18.2-37,35.1c0,12.1,5.6,21.4,11.5,31.3
c5.9,9.9,12,20.1,12.6,33.7h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2
c8.4-7.2,19.7-11.1,31.9-11.1c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5
c-5.6,9.4-10.8,18.2-11.2,28.5L-298,109.7L-298,109.7z M-312.8,109.6c-3.3-14.5-1.4-40.1,6.7-54.6l2.4-4.3l-3.9,3.1
c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7c-1.9,5.3-1.3,10.1-0.7,14.7
c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8L-312.8,109.6L-312.8,109.6z"/>
<path fill="#225650" d="M-311,1.4c11.9,0,23,3.9,31.2,10.9c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36
c-5.5,9.2-10.6,17.9-11.3,28h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1
c-6.9-5.8-16.2-9-26.1-9c-9.9,0-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1
h-7.1c-0.6-10.1-5.8-18.8-11.3-28c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5C-334,5.2-322.9,1.4-311,1.4L-311,1.4
M-295.4,35.5c-1.2,1.6-2.2,3.4-2.9,5.4c-1.9,5.5-1.3,10.4-0.8,15.2c0.5,4.5,1.1,8.7-0.7,13.1c-1.8,4.5-5.6,7.3-10.4,7.8l-1.6,0.2
l-0.2,1.6c-1,9.4,0.2,21.7,2.7,29.9h-2.7c-3-14.4-1.1-39.1,6.8-53.1l4.9-8.7l-7.8,6.1c-5.1,4-9.6,13.2-11.6,21
c-4.1-3.7-5.5-9.6-3.7-16.2c1.6-5.9,5.5-11.4,11-15.4C-307.7,38.6-301.8,36.3-295.4,35.5 M-294.7,118.7c0.6,0,1.2,0.2,1.6,0.7
c0.2,0.3,0.5,0.7,0.5,1.4l0,0v0c0,1.1-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1c0-1.1,1-2.1,2.1-2.1L-294.7,118.7 M-295.4,132.5
c1.2,0,2.1,0.9,2.1,2.1c0,1.1-1,2.1-2.1,2.1h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1H-295.4 M-300.9,146.1
c-0.2,0.2-0.3,0.3-0.5,0.5c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3H-300.9 M-311-0.6
c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66c0-22.8,18-34.1,36-34.1S-275,22-275,44.7
c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C-263.8,14.5-287.4-0.6-311-0.6L-311-0.6z M-289.6,33.1
c-33.2,0-46.5,33.8-28.9,44.2c1.5-8.4,6.5-18.9,11.5-22.8c-8.3,14.8-10.3,41.2-6.6,56.1h7.1c-3.1-8-4.5-21.8-3.5-31.7
c5-0.5,9.8-3.4,12.1-9c3.9-9.7-2.1-18.1,1.5-28.4C-295.1,37.7-292.7,34.9-289.6,33.1L-289.6,33.1z M-294.7,116.7h-32.7
c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1C-290.5,118.5-292.4,116.7-294.7,116.7L-294.7,116.7z
M-295.4,130.5h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C-291.3,132.3-293.1,130.5-295.4,130.5L-295.4,130.5z M-295.7,144.1h-30.7c8.1,7.5,8.9,9,12.1,9h6.2
C-304.9,153.1-304.2,151.7-295.7,144.1L-295.7,144.1z"/>
</g>
<g>
<path fill="#F9E46E" class="yellow" d="M89.5,93.2c0,24.3,23.5,38,24.1,66h24c0-27.3,24-41.7,24-66C161.6,47.7,89.5,47.7,89.5,93.2z"/>
</g>
<g id="light-bulb-6-icon_37_">
<path fill="#FFFFFF" d="M122.2,200.9c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H122.2z M109.9,186.5c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H109.9z M109.1,172.7c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L109.1,172.7L109.1,172.7z M138.6,158.5c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1S88.4,76.6,88.4,93.5c0,12.1,5.6,21.4,11.5,31.3c5.9,9.9,12,20.1,12.6,33.7
h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2c8.4-7.2,19.7-11.1,31.9-11.1
c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5c-5.6,9.4-10.8,18.2-11.2,28.5L138.6,158.5
L138.6,158.5z"/>
<path fill="#225650" d="M122.3,201.9h6.2c3.2,0,3.9-1.4,12.4-9h-30.7C118.3,200.4,119,201.9,122.3,201.9z M135.2,195.3
c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3h20.5C135.5,195,135.3,195.2,135.2,195.3z"/>
<path fill="#225650"d="M141.1,179.3h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C145.2,181.1,143.4,179.3,141.1,179.3z M141.1,185.5h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1h31.2c1.2,0,2.1,0.9,2.1,2.1
C143.2,184.5,142.3,185.5,141.1,185.5z"/>
<path fill="#225650" d="M125.5,48.1c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66
c0-22.8,18-34.1,36.1-34.1s36,11.4,36,34.1c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C172.8,63.2,149.1,48.1,125.5,48.1z
M146.6,157.5h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1c-6.9-5.8-16.2-9-26.1-9
s-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1h-7.1c-0.6-10.1-5.8-18.8-11.3-28
c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5c8.2-7,19.3-10.9,31.2-10.9c11.9,0,23,3.9,31.2,10.9
c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36C152.4,138.6,147.2,147.3,146.6,157.5z"/>
<path fill="#225650" d="M141.8,165.5h-32.7c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1
C146,167.3,144.1,165.5,141.8,165.5z M143.9,169.5L143.9,169.5c0,1.2-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1
c0-1.1,1-2.1,2.1-2.1h32.7v0c0.6,0,1.2,0.2,1.6,0.7C143.7,168.4,144,168.8,143.9,169.5L143.9,169.5z"/>
</g>
<path fill="#FFFFFF" class="leaf" stroke="#225650" stroke-width="2" stroke-miterlimit="10" d="M121.8,158.6c-3.3-14.5-1.4-40.1,6.7-54.6
l2.4-4.3l-3.9,3.1c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7
c-1.9,5.3-1.3,10.1-0.7,14.7c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8
L121.8,158.6L121.8,158.6z"/>
</svg>
<h3 id="yellow-header">loading...</h3>
</div>
css
#yellow-globe {
width: 300px;
height: 300px;
margin: 0 auto;
text-align: center;
}
#keyframes yellow {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #F9E46E;
}
75% {
fill: #F9E46E;
}
100% {
fill: #F9E46E;
}
}
#-webkit-keyframes yellow {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #F9E46E;
}
75% {
fill: #F9E46E;
}
100% {
fill: #F9E46E;
}
}
.yellow {
fill: yellow;
-webkit-animation: yellow 1s infinite;
animation: yellow 1s infinite;
}
.leaf {
stroke-dasharray: 242;
stroke-dashoffset: 242;
-webkit-animation: dash 4s linear alternate 1;
animation: dash 4s linear alternate 1;
}
#yellow-header {
text-align: center;
color: #377F72;
font-family:'Futura Book'
}
#keyframes dash {
from {
stroke-dashoffset: 242;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 242;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes fillme {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #225650;
}
75% {
fill: #225650;
}
100% {
fill: #225650;
}
}
#-webkit-keyframes fillme {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #225650;
}
75% {
fill: #225650;
}
100% {
fill: #225650;
}
}

Resources