<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/MAW/pen/EKXNJy?limit=all&page=28&q=svg" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">body {
background-color: #1C2224;
overflow: hidden;
}
svg {
position: absolute;
left: 50%;
top: -52px;
overflow: visible;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
#links {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
font-size: 13px;
font-family: tahoma;
color: #fff;
}
#links a {
text-decoration: none;
font-size: 2.3em;
color: #fff;
}
#twitter {
position: absolute;
bottom: 15px;
right: 20px;
}
#pens {
position: absolute;
bottom: 15px;
left: 20px;
}</style></head><body>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="449" viewBox="0 0 500 449">
<defs>
<linearGradient id="lgrad" x1="50%" y1="100%" x2="50%" y2="0%" >
<stop offset="0%" style="stop-color:rgb(40,40,40);" />
<stop offset="50%" style="stop-color:rgb(140,140,140);" />
<stop offset="50%" style="stop-color:rgb(180,180,180);" />
<stop offset="100%" style="stop-color:rgb(240,240,240);" />
</linearGradient>
<filter id="glow" x="-50%" y="-50%" height="150%" width="150%">
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<ellipse opacity='.5' cx="250" cy="431.1" rx="215.3" ry="7.3"/>
<g fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='0' stroke='#ffff00' filter="url(#glow)" >
<path class="sp" d="M463.4.5v319.8s20.4-55.9 22.1 126"/>
<path class="sp" d="M400.8.5v320.8s-30.4-74.2-30.4 104"/>
<path class="sp" d="M243.8.5v345.4s-43-30.1-43.4 75.3"/>
<path class="sp" d="M127.4.5v359.6s27.8-11.2 29.3 61.3"/>
<path class="sp" d="M422.2.5v352.6s51.3-21.3 51.3 83.3"/>
<path class="sp" d="M71.9.5v368.3s-33.4-23.3-38 55.7"/>
<path class="sp" d="M238.6.5v359.6s-59.6-16.6-59.9 66.7"/>
<path class="sp" d="M257.1.5v319.8S291 281.8 291 424.2"/>
<path class="sp" d="M201 .5v320.3s46.2-26.6 46.2 108.9"/>
<path class="sp" d="M44.4.5v320.3s40.7-29.6 38.8 115"/>
<path class="sp" d="M169.2.5v320.3c26.7-26.1 68.3 13.6 68.3 107.8"/>
<path class="sp" d="M275.7.5v358.7s50.7-19.9 49.3 67.7"/>
<path class="sp" d="M457.5.5v320.4s-26.6-116.8-26.6 99.8"/>
<path class="sp" d="M380.1.5v387.8s-35.3-47.2-39.5 37.3"/>
<path class="sp" d="M395.2.5v333.9s-32.4-12.6-26.3 84.7"/>
<path class="sp" d="M431.9.5v385.1s26.2-29.9 26.2 59.9"/>
<path class="sp" d="M32.3.5v319.8s-15.8-75.2-15.8 124.1"/>
<path class="sp" d="M148 .5v319.8c.3.4-47.5-56.6-37.8 107.1"/>
<path class="sp" d="M357.3.5v320.4s-16.9-46.8-33.8 0c0 0-13-23-25.2-1"/>
<path class="sp" d="M154.5.5v320.4s18-46.8 36.1 0c0 0 13.8-22 26.9 0"/>
<path class="sp" d="M65.4.5v320.4s21.8-46.8 43.6 0c0 0 37.4-28.1 37.4 100"/>
<path class="sp" d="M408.3.5v320.4s17.7-47.8 35.4-1c0 0 13.6-21 26.3 1"/>
<path class="sp" d="M104.5.5v319.8S61.8 265.8 54 424.2"/>
<path class="sp" d="M294.2.5v319.7s-28.1-48.4-25.5 44.9"/>
<path class="sp" d="M345.5.5v321.7s-34.8-76.7-34.8 99.9"/>
<path class="sp" d="M306.8.5v320.7s22.6-46 36.1-.4"/>
</g>
<path fill="url(#lgrad)" d="M438.7 320.3v6.2c1.4.2 3.1.4 5 .7 1.9.3 3.5.7 4.7 1.1 1.4.6 2.5 1.2 3.4 2 .8.8 1.3 1.7 1.3 2.8 0 1.8-.3 3.9-.8 6.4-.5 2.5-1.2 5.5-2.1 9.2-1.5 6-10.3 38.1-13.9 51.4l-24.1-79.7h-13.7l-20.8 77.2c-4.6-16.6-16.8-58-17.8-62-.2-.9-.3-1.6-.5-2.3-.2-.7-.2-1.4-.2-2.1 0-.4.1-.8.3-1.2.2-.5.6-.9 1.4-1.3.8-.4 1.9-.8 3.3-1.2 1.4-.4 3.6-.8 6.4-1.2v-5.9h-80.5v6.2c1.4.2 3.1.4 5 .7 1.9.3 3.5.7 4.7 1.1 1.4.6 2.5 1.2 3.4 2 .8.8 1.3 1.7 1.3 2.8 0 1.8-.3 3.9-.8 6.4-.5 2.5-1.2 5.5-2.1 9.2-1.5 6-10.3 38.1-13.9 51.4l-24.1-79.7h-13.7l-20.9 77c-4.6-16.6-16.8-58-17.8-62-.2-.9-.3-1.6-.5-2.3-.2-.7-.2-1.4-.2-2.1 0-.4.1-.8.3-1.2.2-.5.6-.9 1.4-1.3.8-.4 1.9-.8 3.3-1.2 1.4-.4 3.6-.8 6.4-1.2v-5.9h-80.5v6.2c1.4.2 3.1.4 5 .7 1.9.3 3.5.7 4.7 1.1 1.4.6 2.5 1.2 3.4 2 .8.8 1.3 1.7 1.3 2.8 0 1.8-.3 3.9-.8 6.4-.5 2.5-1.2 5.5-2.1 9.2-1.5 6-10.3 38.1-13.9 51.4l-24.1-79.7h-13.7l-20.8 77.2c-4.6-16.6-16.8-58-17.8-62-.2-.9-.3-1.6-.5-2.3-.2-.7-.2-1.4-.2-2.1 0-.4.1-.8.3-1.2.2-.5.6-.9 1.4-1.3.8-.4 1.9-.8 3.3-1.2 1.4-.4 3.6-.8 6.4-1.2v-5.9H24.5v6c1.7.3 3.2.6 4.5 1 1.3.4 2.5 1.1 3.7 2 1.6 1.3 3 2.6 4 3.8 1 1.3 2 3.3 2.8 6.1 2.6 9.2 19 66.8 26.2 91.8h13l21.7-81.4 24.1 81.4h13c5.3-18.6 23.9-83.5 26.3-91.4.7-2.3 1.4-4.2 2.3-5.8s2.2-3.1 4.2-4.4c1.3-.8 2.6-1.5 3.9-2l1.8-.6c.6.1 1.1.3 1.6.5 1.3.4 2.5 1.1 3.7 2 1.6 1.3 3 2.6 4 3.8 1 1.3 2 3.3 2.8 6.1 2.6 9.2 19 66.8 26.2 91.8h13l21.7-81.4 24.1 81.4h13c5.3-18.6 23.9-83.5 26.3-91.4.7-2.3 1.4-4.2 2.3-5.8.8-1.6 2.2-3.1 4.2-4.4 1.3-.8 2.6-1.5 3.9-2l1.8-.6c.6.1 1.1.3 1.6.5 1.3.4 2.5 1.1 3.7 2 1.6 1.3 3 2.6 4 3.8 1 1.3 2 3.3 2.8 6.1 2.6 9.2 19 66.8 26.2 91.8h13l21.7-81.4 24.1 81.4h13c5.3-18.6 23.9-83.5 26.3-91.4.7-2.3 1.4-4.2 2.3-5.8.8-1.6 2.2-3.1 4.2-4.4 1.3-.8 2.6-1.5 3.9-2 1.3-.5 2.7-.9 4-1v-6.2h-36.7z"/>
<g fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='0' stroke='#ffff00' filter="url(#glow)" >
<path class="sp" d="M37.6.5v320.4S2.2 264 .5 443.4"/>
<path class="sp" d="M113.2.5v320.4s29.4-55.1 29.4 120.7"/>
<path class="sp" d="M271.2.5v344.6s35.7-17.6 29.4 85.4"/>
<path class="sp" d="M382.1.5v377.4s-23.8-8.9-25.3 62.7"/>
<path class="sp" d="M92.8.5v351.7s-63.6-6.7-66.6 81.6"/>
<path class="sp" d="M429.1.5v376s38.4-18.1 39 64"/>
<path class="sp" d="M283.4.5v385.2s35.9-18.3 35.9 58.1"/>
<path class="sp" d="M253.9.5v320.4S207 295 207 435.5"/>
<path class="sp" d="M300 .5v319.8s-50.2-20.1-50.2 113.6"/>
<path class="sp" d="M443.6.5v320.8s-38.8-44.2-38.8 114.7"/>
<path class="sp" d="M322.8.5v319.8s-51.3-33.4-51.3 116.5"/>
<path class="sp" d="M234.3.5v379.4s-38.3-30-36.9 63.3"/>
<path class="sp" d="M51.5.5v320s43.6-88.3 43.6 125.2"/>
<path class="sp" d="M131.9.5v375.6s38.1-27.7 39.5 55.7"/>
<path class="sp" d="M118.8.5v333.2s34.6 2.6 33.3 98.8"/>
<path class="sp" d="M390.8.5v346s-61.2-39.8-61.2 96.8"/>
<path class="sp" d="M84.1.5v383.7s-16.6-21.1-16.2 57.3"/>
<path class="sp" d="M468.7.5v320.4s30.8-59.4 30.8 120.6"/>
<path class="sp" d="M351 .5v320.4s40.8-61.7 40.8 127.6"/>
<path class="sp" d="M146.7.5v319.9s15.5-46.1 30.9 0c0 0 11.9-21.7 23 0"/>
<path class="sp" d="M451.6.5v319.9s-21.8-46.1-43.6 0c0 0-34-20.1-32.4 122"/>
<path class="sp" d="M104.7.5v319.9s-17.7-46.1-35.4 0c0 0-13.6-21.7-26.3 0"/>
<path class="sp" d="M406.5.5v320.4s38.3-57.1 35.5 122.6"/>
<path class="sp" d="M206.8.5v320.2s40.5-69.6 40.5 121.7"/>
<path class="sp" d="M154.5.5v320.2s33.8-60.6 33.8 113.6"/>
<path class="sp" d="M187.2.5v320.2s-14.4-45.4-23.1-.4"/>
</g>
</svg>
<div id='links'>
<a id='twitter' href="https://twitter.com/Diaco_ml" target="_blank"><span class='fa fa-twitter'></span></a>
<div id='pens'><a href="https://codepen.io/collection/DgYoEw/" target="_blank"><span class='fa fa-codepen'></span></a> my other Pens</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script >/*
a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW
powered by GSAP : https://www.greensock.com/
*/
TweenMax.staggerFromTo('.sp',.87,
{ drawSVG:"0% 10%" },
{ drawSVG:"99.5% 106%", stroke:'#ff8000', opacity:1,
cycle:{
strokeWidth:function() { return R(1,5) },
delay:function() { return R(0,15) },
repeatDelay:function() { return R(2,15) }
},
ease:Power2.easeOut, repeat:-1
}, 0);
function R(min, max) { return min + Math.random() * (max - min) };
/* a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW */
//# sourceURL=pen.js
</script>
</body></html>
