animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

SVG Light Progress Bar

1<div class="container">
2  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600"
3  xml:space="preserve">
4    <defs>
5      <mask id="gradMask">
6        <path id="tube" fill="#FFFFFF" d="M484.5,315.5h-369c-8.5,0-15.5-7-15.5-15.5v0c0-8.5,7-15.5,15.5-15.5h369
7	c8.5,0,15.5,7,15.5,15.5v0C500,308.5,493,315.5,484.5,315.5z" />
8      </mask>
9      <pattern id="gradPattern" width="400" height="62.4" x="0" y="0" patternUnits="userSpaceOnUse">
10        <rect x="0" y="0" fill="url(#rainbowGrad)" width="400" height="62.4" />
11      </pattern>
12    </defs>
13    <filter id="drop" x="-150%" y="-150%" width="280%" height="280%">
14      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="4" />
15      <feGaussianBlur in="offOut" stdDeviation="16" result="blur" />
16
17      <feComponentTransfer>
18        <feFuncA type="linear" slope="0.7" intercept="0" />
19      </feComponentTransfer>
20
21      <feComposite in="SourceGraphic" operator="over" />
22
23    </filter>
24
25    <linearGradient id="rainbowGrad" gradientUnits="userSpaceOnUse" x1="00" y1="300" x2="400" y2="300">
26      <stop offset="0" style="stop-color:#FFEB3B" />
27      <stop offset="0.2" style="stop-color:#FFEB3B" />
28      <stop offset="0.2" style="stop-color:#FF5722" />
29      <stop offset="0.4" style="stop-color:#FF5722" />
30      <stop offset="0.4" style="stop-color:#E91E63" />
31      <stop offset="0.6" style="stop-color:#E91E63" />
32      <stop offset="0.6" style="stop-color:#03A9F4" />
33      <stop offset="0.8" style="stop-color:#03A9F4" />
34      <stop offset="0.8" style="stop-color:#8CC63F" />
35      <stop offset="1" style="stop-color:#8CC63F" />
36    </linearGradient>
37
38    <g filter="url(#drop)">
39      <g mask="url(#gradMask)">
40        <rect id="grad" x="100" y="268.8" fill="url(#gradPattern)" width="400" height="62.4" />
41    
42      </g>
43    </g>
44    <line id="shine" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="346,7" x1="124" y1="293" x2="479" y2="293" />
45
46
47  </svg>
48
49
50</div>