<div class="container">
<svg width="338px" height="260px" viewBox="0 0 338 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(2.000000, 1.000000)">
<circle id="Oval-7" stroke="#FFFFFF" fill="#000000" sketch:type="MSShapeGroup" cx="145" cy="104" r="104"></circle>
<path d="M2.14215073,51.4106282 C2.14215073,51.4106282 82.3179715,97.0719048 146.288235,50.8225691 C210.258499,4.57323344 284.282318,60.1636606 284.282318,60.1636606" id="Path-53" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(143.212234, 51.984636) rotate(10.000000) translate(-143.212234, -51.984636) "></path>
<path d="M5.25108925,61.4106282 C5.25108925,61.4106282 85.4269101,107.071905 149.397174,60.8225691 C213.367438,14.5732334 287.391256,70.1636606 287.391256,70.1636606" id="Path-54" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(146.321173, 61.984636) rotate(10.000000) translate(-146.321173, -61.984636) "></path>
<path d="M8.25108925,71.4106282 C8.25108925,71.4106282 88.4269101,117.071905 152.397174,70.8225691 C216.367438,24.5732334 290.391256,80.1636606 290.391256,80.1636606" id="Path-55" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(149.321173, 71.984636) rotate(10.000000) translate(-149.321173, -71.984636) "></path>
<path d="M11.2510892,81.4106282 C11.2510892,81.4106282 91.4269101,127.071905 155.397174,80.8225691 C219.367438,34.5732334 293.391256,90.1636606 293.391256,90.1636606" id="Path-56" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(152.321173, 81.984636) rotate(10.000000) translate(-152.321173, -81.984636) "></path>
<path d="M14.2510892,91.4106282 C14.2510892,91.4106282 94.4269101,137.071905 158.397174,90.8225691 C222.367438,44.5732334 296.391256,100.163661 296.391256,100.163661" id="Path-57" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(155.321173, 91.984636) rotate(10.000000) translate(-155.321173, -91.984636) "></path>
<path d="M17.2510892,101.410628 C17.2510892,101.410628 97.4269101,147.071905 161.397174,100.822569 C225.367438,54.5732334 299.391256,110.163661 299.391256,110.163661" id="Path-58" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(158.321173, 101.984636) rotate(10.000000) translate(-158.321173, -101.984636) "></path>
<path d="M20.2510892,111.410628 C20.2510892,111.410628 100.42691,157.071905 164.397174,110.822569 C228.367438,64.5732334 302.391256,120.163661 302.391256,120.163661" id="Path-59" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(161.321173, 111.984636) rotate(10.000000) translate(-161.321173, -111.984636) "></path>
<path d="M23.2510892,121.410628 C23.2510892,121.410628 103.42691,167.071905 167.397174,120.822569 C231.367438,74.5732334 305.391256,130.163661 305.391256,130.163661" id="Path-60" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(164.321173, 121.984636) rotate(10.000000) translate(-164.321173, -121.984636) "></path>
<path d="M26.2510892,131.410628 C26.2510892,131.410628 106.42691,177.071905 170.397174,130.822569 C234.367438,84.5732334 308.391256,140.163661 308.391256,140.163661" id="Path-61" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(167.321173, 131.984636) rotate(10.000000) translate(-167.321173, -131.984636) "></path>
<path d="M29.2510892,141.410628 C29.2510892,141.410628 109.42691,187.071905 173.397174,140.822569 C237.367438,94.5732334 311.391256,150.163661 311.391256,150.163661" id="Path-62" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(170.321173, 141.984636) rotate(10.000000) translate(-170.321173, -141.984636) "></path>
<path d="M32.2510892,151.410628 C32.2510892,151.410628 112.42691,197.071905 176.397174,150.822569 C240.367438,104.573233 314.391256,160.163661 314.391256,160.163661" id="Path-63" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(173.321173, 151.984636) rotate(10.000000) translate(-173.321173, -151.984636) "></path>
<path d="M35.2510892,161.410628 C35.2510892,161.410628 115.42691,207.071905 179.397174,160.822569 C243.367438,114.573233 317.391256,170.163661 317.391256,170.163661" id="Path-64" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(176.321173, 161.984636) rotate(10.000000) translate(-176.321173, -161.984636) "></path>
<path d="M38.2510892,171.410628 C38.2510892,171.410628 118.42691,217.071905 182.397174,170.822569 C246.367438,124.573233 320.391256,180.163661 320.391256,180.163661" id="Path-65" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(179.321173, 171.984636) rotate(10.000000) translate(-179.321173, -171.984636) "></path>
<path d="M41.2510892,181.410628 C41.2510892,181.410628 121.42691,227.071905 185.397174,180.822569 C249.367438,134.573233 323.391256,190.163661 323.391256,190.163661" id="Path-66" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(182.321173, 181.984636) rotate(10.000000) translate(-182.321173, -181.984636) "></path>
<path d="M44.2510892,191.410628 C44.2510892,191.410628 124.42691,237.071905 188.397174,190.822569 C252.367438,144.573233 326.391256,200.163661 326.391256,200.163661" id="Path-67" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(185.321173, 191.984636) rotate(10.000000) translate(-185.321173, -191.984636) "></path>
<path d="M47.2510892,201.410628 C47.2510892,201.410628 127.42691,247.071905 191.397174,200.822569 C255.367438,154.573233 329.391256,210.163661 329.391256,210.163661" id="Path-68" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(188.321173, 201.984636) rotate(10.000000) translate(-188.321173, -201.984636) "></path>
<path d="M50.2510892,211.410628 C50.2510892,211.410628 130.42691,257.071905 194.397174,210.822569 C258.367438,164.573233 332.391256,220.163661 332.391256,220.163661" id="Path-69" stroke="#FFFFFF" stroke-width="4" sketch:type="MSShapeGroup" transform="translate(191.321173, 211.984636) rotate(10.000000) translate(-191.321173, -211.984636) "></path>
</g>
</g>
</svg>
</div>
<div class="content">
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:700italic,700,500italic,500,400italic,300italic,400,300,100,100italic);
body {
background: white;
font-family: 'Roboto Mono', ;
}
.container {
width: 215px;
height: 210px;
margin: 0 auto;
}
svg {
margin-left: -40px;
display: block;
path {
transition: opacity 2s ease-in-out;
}
path {
animation: flag 2s infinite ease-in-out;
}
path:nth-child(2n+2) {
animation: flag 2s .3s infinite ease-in-out;
}
path:nth-child(3n+1) {
animation: flag 2s .4s infinite ease-in-out;
}
path:nth-child(3n+2) {
animation: flag 2s .5s infinite ease-in-out;
}
circle {
animation: pulse 5s infinite;
}
}
@keyframes pulse {
0% {
opacity: 1;
fill: #80DEEA;
}
50% {
opacity: .8;
fill: #5C6BC0;
}
100% {
opacity: 1;
fill: #80DEEA;
}
}
@keyframes flag {
0% {
transform: translate(0px,0px);
opacity: .6;
}
50% {
transform: translate(-20px,-5px);
opacity: 1;
}
100% {
transform: translate(0px,0px);
opacity: .6;
}
}
h1 {
width: 100%;
margin-top: 40px;
text-align: center;
color: rgba(0,0,0,.6);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.