How to loop part of SVG animation? - animation

I need to play "In" section once and then repeat "loop" section infinite. Is it possible?
Current looped code
#keyframes a0_t {
0% {
transform: translate(150px, 150px) rotate(0deg) translate(-150px, -150px);
}
100% {
transform: translate(150px, 150px) rotate(720deg) translate(-150px, -150px);
}
}
#keyframes a0_d {
0% {
d: path('M222.044,245.551C261,207.5,246.806,65.3484,206.971,45.3494C151.5,17.5002,26,108,30.0516,159.622C33.5241,203.864,177.561,289,222.044,245.551Z');
}
20% {
d: path('M222.044,245.551C281.916,189.602,306.072,129.897,202.964,54.985C127.725,0.32076,25.7118,72.678,41.8584,167.844C49.9116,250.331,139.902,328.074,222.044,245.551Z');
}
40% {
d: path('M218.278,237.167C298.227,203.304,268.298,88.5404,209.923,46.413C148.468,1.763,46.6906,32.6824,41.6066,140.006C42.562,243.265,102.177,284.354,218.278,237.167Z');
}
60% {
d: path('M191.544,248.667C271.493,214.804,297.439,74.8487,209.923,46.413C130.053,20.4617,41.7673,28.9897,36.6833,136.313C37.6387,239.572,75.1158,283.388,191.544,248.667Z');
}
80% {
d: path('M191.544,248.667C287.641,207.596,294.679,102.295,207.163,73.8591C127.293,47.9078,45.1032,27.4052,40.0192,134.729C40.9746,237.988,71.559,290.425,191.544,248.667Z');
}
100% {
d: path('M222.044,245.551C261,207.5,246.806,65.3484,206.971,45.3494C151.5,17.5002,26,108,30.0516,159.622C33.5241,203.864,177.561,289,222.044,245.551Z');
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="296" height="296" viewBox="0 0 296 296" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M222.044,245.551C261,207.5,246.806,65.3484,206.971,45.3494C151.5,17.5002,26,108,30.0516,159.622C33.5241,203.864,177.561,289,222.044,245.551Z"
fill="#7A55FF"
transform="translate(150,150) translate(-150,-150)"
style="animation: 45s linear infinite both a0_t, 45s linear infinite both a0_d;"/>
</svg>

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>

How to implement a continuous motion illusion in SVG?

Imagine a progress-bar like this one, which creates a sensation of motion towards the left:
Note: the thin bright-green line on top of the animation is a compression artifact.
I am looking for a way to implement something similar, but in an arbitrary SVG path, such as this one:
I am trying to understand what is really going on there, e.g.:
Is it a gradient with many stops, and the stops keep moving?
Are these many adjacent, skewed rectangles moving in unison?
Is it one long sequence of skewed adjacent rectangles, with a "sliding window" moving along it?
How can such animations be conceptualized? And what would be the best practice to implement it using SVG primitives?

I am using a path twice:#a and #b. Both #a and #b have stroke-dasharray: 1 but #b id offset stroke-dashoffset: 1;
I'm animating the stroke-dashoffset for both #a and #b.
use {
stroke-dasharray: 1;
}
#a {
stroke: green;
animation: dasha 5s linear infinite;
}
#b {
stroke: DarkSeaGreen;
stroke-dashoffset: 1;
animation: dashb 5s linear infinite;
}
#keyframes dasha {
to {
stroke-dashoffset: -54.66;
}
}
#keyframes dashb {
to {
stroke-dashoffset: -53.66;
}
}
<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
<defs><path id="thePath" fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
</defs>
<use id="a" xlink:href="#thePath" />
<use id="b" xlink:href="#thePath" />
</svg>
UPDATE
If you use css variables you can use only one animation:
use {
stroke-dasharray: 1;
}
#a {
--offset:0;
stroke: green;
stroke-dashoffset: 53.66;
animation: dash 5s linear infinite;
}
#b {
--offset:1;
stroke: DarkSeaGreen;
stroke-dashoffset: 54.66;
animation: dash 5s linear infinite;
}
#keyframes dash {
to {
stroke-dashoffset: var(--offset)
}
}
<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
<defs><path id="thePath" fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
</defs>
<use id="a" xlink:href="#thePath" />
<use id="b" xlink:href="#thePath" />
</svg>

Well one way of doing it is with an animated pattern. Something like this:
<svg width="800px" height="600px">
<defs>
<pattern id="skewrect" x="0%" y="0%" width="20%" height="100%" patternTransform="skewX(30)" viewBox="-7 160 60 60">
<animate attributeName="x" from="20%" to="0%" dur="2s" repeatCount="indefinite"/>
<polygon points="0,0 0,600 20,600 20,0" fill="green"/>
<polygon points="20,40 20,600 40,600 40,20" fill="grey"/>
</pattern>
</defs>
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="url(#skewrect)" fill="none" stroke-width="10"/>
</svg>
You can also do it with a gradient, or a filter.

SVG animation / dirty path

Could anybody explain me how to remove a point in my path and why did it come from?
window.onload =function(){
var myHeart = $("#Heart");
var current = 0;
var PathTail_MainPath = $("#PathTail_MainPath");
var tailMainPath = $("#tailMainPath");
myHeart.click(function () {
if (current++ % 2 == 0) {
PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
console.log("one");
} else {
PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
console.log("two");
}
});
};
#Heart {
width: 600px;
border: 1px solid #000;
cursor: pointer;
}
#Heart .tailMainPath {
-webkit-animation: tailStroke 500ms linear;
animation: tailStroke 500ms linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#Heart .tailMainPathReturn {
-webkit-animation: tailStrokeReturn 500ms linear 125ms;
animation: tailStrokeReturn 500ms linear 125ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes tailStroke {
0% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
}
#keyframes tailStroke {
0% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
}
#-webkit-keyframes tailStrokeReturn {
0% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
100% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
}
#keyframes tailStrokeReturn {
0% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
100% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
<defs>
<path id="PathTail_MainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
<path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
</defs>
<use xlink:href="#PathTail_MainPath" fill="none"; stroke="#000" stroke-width="11"/>
<use xlink:href="#tailMainPath" fill="none"; stroke="#A50808" stroke-linecap="round" stroke-width="9"/>
</svg>
PS This code doesn't work on code generator stackoverflow's.(I don't know why) That why I made copy here https://jsfiddle.net/BlackStar1991/ea6255h1/

The dirty dot is caused by "0 length" sub path with rounded line cap. When value of stroke-dashoffset is 0, the path is split by [0, 150]. So it has "0 length" sub path.
To solve this problem, you can offset the start point of line dash a bit.
#keyframes tailStroke {
0% {
stroke-dasharray: 0 151;
stroke-dashoffset: 1;
}
100% {
stroke-dasharray: 151 0;
stroke-dashoffset: 151;
}
}
#keyframes tailStrokeReturn {
0% {
stroke-dasharray: 151 0;
stroke-dashoffset: 151;
}
100% {
stroke-dasharray: 0 151;
stroke-dashoffset: 1;
}
}

Animating stroke-dashoffset can't close shape

I'm making a simple spinner using the dash-offset animation technique. you can see what i have here. As you can see the polygon shape never closes. Is there any simple way to ensure the path completes the shape instead of leaving the miter corner at the top.
I could over shoot the path int he SVG so it overlaps to complete that final corner. Unfortunately you can see it overdraw in the animation which isn't ideal.
HTML
<div class="logo-container">
<svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
<path class="gray-path" fill="none" stroke="#9A9A9A" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/>
<path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/>
</svg>
</div>
CSS
.logo-container {
width: 400px;
.is2-logo path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.blue-path {
animation: dash 2s linear forwards infinite;
}
.gray-path {
animation: dash 2s linear forwards infinite .5s;
}
}
#keyframes dash {
0% {
stroke-dashoffset: 1000;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -1000;
}
}

completes the shape instead of leaving the miter corner at the top.
Actually it's leaving butt line-caps at the top.
Why don't you just make the blue path have round line-caps like the grey one has?
.logo-container {
width: 400px;
}
.logo-container .is2-logo path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.logo-container .blue-path {
animation: dash 5s linear forwards infinite;
}
.logo-container .gray-path {
animation: dash 5s linear forwards infinite .5s;
}
#keyframes dash {
0% {
stroke-dashoffset: 1000;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -1000;
}
}
<div class="logo-container">
<svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
<path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linecap="round" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/>
<path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/>
</svg>
</div>

Why don't you just extend the path by another leg, leaving the dash offset the same:
<svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
<path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3 l106.08 -61.04 106.08 61.04" marker-end="url(#gray-start)"/>
<path class="blue-path" fill="none" stroke="#00B3E9" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225 l106.08 61.04 -106.08 61.032 L15.724 70.265 l106.08 -61.04 106.08 61.04"/>
</svg>

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