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

rendered animation

Colour Beam

1<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
2  <defs>
3      <path id="portal" d="M316.21,372.22a217.3,217.3,0,0,1-57,21.32A200.5,200.5,0,0,1,229,397.85c-5.09.47-10.2.43-15.32.58-5.1-.17-10.23-.14-15.32-.63a218.2,218.2,0,0,1-114-42.35,214.68,214.68,0,0,1-73.13-98.09A195.19,195.19,0,0,1,36.47,78.69,190.7,190.7,0,0,1,80.7,34.48,184.2,184.2,0,0,1,137,6.74,173.93,173.93,0,0,1,345.59,107.25a152.82,152.82,0,0,1,11.23,62.32A155.75,155.75,0,0,1,304,281.66c-3.81,3.72-8.22,6.69-12.49,9.86-4.15,3.32-8.88,5.78-13.42,8.51a142.35,142.35,0,0,1-29.3,12.65A137.15,137.15,0,0,1,185.49,316,137.54,137.54,0,0,1,87,242.1C77.66,222.94,73,201.33,74.65,180c1.24-21.34,8.75-42,20.4-59.75,1.52-2.18,3.17-4.27,4.75-6.4l2.4-3.18c.86-1,1.79-2,2.67-3l5.4-5.86,5.93-5.32,3-2.65c1-.82,2.13-1.57,3.2-2.36l6.44-4.67c2.23-1.42,4.56-2.69,6.84-4a57.33,57.33,0,0,1,7-3.73,106.07,106.07,0,0,1,62.09-9.45A103.18,103.18,0,0,1,235,78.94c2.35,1.22,4.83,2.18,7,3.63l6.75,4.15c2.18,1.48,4.23,3.15,6.35,4.72a56.6,56.6,0,0,1,6,5.14c4,3.43,7.38,7.52,10.89,11.45,3.06,4.28,6.42,8.37,8.86,13l2,3.42a24.69,24.69,0,0,1,1.82,3.5l3.24,7.22,2.51,7.5c.87,2.49,1.23,5.13,1.87,7.68a93.17,93.17,0,0,1-8.42,61.15,95.06,95.06,0,0,1-18.55,25,92.31,92.31,0,0,1-25.74,17.25,80.68,80.68,0,0,1-105.26-37.15,79.74,79.74,0,0,0,45.53,37.57A78.44,78.44,0,0,0,238,250.37a87.85,87.85,0,0,0,24.14-17.1,90.07,90.07,0,0,0,16.94-24.1,87,87,0,0,0,6.43-57.32c-.66-2.35-1-4.77-1.9-7l-2.44-6.89-3.12-6.61a22.73,22.73,0,0,0-1.75-3.21L274.43,125c-2.34-4.31-5.56-8-8.45-11.94-3.33-3.57-6.48-7.31-10.27-10.39A49,49,0,0,0,250.08,98c-2-1.41-3.9-2.91-5.93-4.25L237.86,90c-2.06-1.29-4.37-2.12-6.54-3.21a94.57,94.57,0,0,0-27.86-8,97.33,97.33,0,0,0-56.3,9.43,49.81,49.81,0,0,0-6.36,3.49c-2.06,1.27-4.18,2.45-6.21,3.78l-5.82,4.35c-1,.73-2,1.43-2.89,2.19l-2.68,2.46-5.33,4.91L113,114.88c-.79.91-1.63,1.78-2.4,2.71l-2.13,2.93c-1.41,2-2.9,3.87-4.25,5.87-10.35,16.28-16.92,35.1-17.75,54.38-1.34,19.24,3,38.61,11.6,55.79a124.64,124.64,0,0,0,89.74,66.28,125.56,125.56,0,0,0,57.09-3.26,128.47,128.47,0,0,0,26.42-11.5c4.12-2.52,8.46-4.73,12.22-7.8,3.87-2.9,7.91-5.59,11.35-9a141,141,0,0,0,34.46-46.1,142.74,142.74,0,0,0,13.31-56,139.1,139.1,0,0,0-10.05-56.68,160.19,160.19,0,0,0-78.24-83,164.4,164.4,0,0,0-56-15.54,160.16,160.16,0,0,0-57.92,5.2,171.67,171.67,0,0,0-52.6,25.42C55.71,67.1,31.35,100.43,19.05,137.9a184.94,184.94,0,0,0,.55,116.54,205.19,205.19,0,0,0,27.47,52.67A224.13,224.13,0,0,0,66.26,330,216.23,216.23,0,0,0,88.5,350a212.9,212.9,0,0,0,110.13,44.11A216.1,216.1,0,0,0,316.21,372.22Z" />   
4        <path class="hoop" id="hoopBg" d="M49.07,160.22c10,0,23.92-27.54,23.92-72.38S59.06,15.45,49.07,15.45c-2.63,0-5.53,1.92-8.37,5.55,6,3.18,17.45,26.36,17.45,66.84S46.71,151.5,40.7,154.67C43.54,158.3,46.44,160.22,49.07,160.22Z" fill="url(#rainbowGrad)"/>
5        <path class="hoop"  id="hoopFront" d="M54.91,169.48a16.9,16.9,0,0,1-5.84,1c-22.23,0-34.23-42.6-34.23-82.68s12-82.69,34.23-82.69a17.14,17.14,0,0,1,5.84,1A23.32,23.32,0,0,0,39.38,0C13.52,0,0,44.19,0,87.84s13.52,87.83,39.38,87.83A23.32,23.32,0,0,0,54.91,169.48Z" fill="url(#rainbowGrad)"/>   
6      <g id="cylinder">
7 
8          <g>
9            <path d="M35.37,12.18V150c0,.3,0,.6,0,.9a18.12,18.12,0,0,1-.29,2.47c-1.58,4.6-8.64,8.06-17.1,8.06S2.41,158,.83,153.37a18.12,18.12,0,0,1-.29-2.47c0-.3,0-.6,0-.9V12.18c0-.36,0-.71.05-1.06.56,5.24,8.12,9.39,17.39,9.39s16.82-4.15,17.38-9.39C35.34,11.47,35.37,11.82,35.37,12.18Z" fill="#29abe2"/>
10            <path d="M34.9,8.22a17.32,17.32,0,0,1,.42,2.9c-.56,5.24-8.11,9.39-17.38,9.39S1.11,16.36.55,11.12A17.32,17.32,0,0,1,1,8.22C2.77,3.8,9.68.5,17.94.5S33.1,3.8,34.9,8.22Z" fill="#0071bc"/>
11          </g>
12          <g>
13            <path d="M35,153.37c-1.58,4.6-8.64,8.06-17.1,8.06S2.41,158,.83,153.37" fill="none" stroke="#fff" stroke-miterlimit="10"/>
14            <path d="M34.9,8.22C33.1,3.8,26.2.5,17.94.5S2.77,3.8,1,8.22" fill="none" stroke="#fff" stroke-miterlimit="10"/>
15            <path d="M35.33,150.9c0-.3,0-.6,0-.9V12.18c0-.36,0-.71,0-1.06-.56,5.24-8.11,9.39-17.38,9.39S1.11,16.36.55,11.12c0,.35-.05.7-.05,1.06V150c0,.3,0,.6,0,.9" fill="none" stroke="#fff" stroke-miterlimit="10"/>
16            <path d="M35.32,11.12c0-.2,0-.41,0-.61a6.05,6.05,0,0,0-.47-2.29A17.32,17.32,0,0,1,35.32,11.12Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
17            <path d="M1,8.22A6.05,6.05,0,0,0,.5,10.51c0,.2,0,.41.05.61A17.32,17.32,0,0,1,1,8.22Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
18            <path d="M35,153.37a6.13,6.13,0,0,0,.33-1.94c0-.18,0-.35,0-.53A18.12,18.12,0,0,1,35,153.37Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
19            <path d="M.54,150.9c0,.18,0,.35,0,.53a6.13,6.13,0,0,0,.33,1.94A18.12,18.12,0,0,1,.54,150.9Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
20          </g>
21     
22      </g>   
23    <linearGradient id="rainbowGrad" data-name="Spectrum " x1="150" y1="280" y2="150" x2="250" gradientUnits="userSpaceOnUse">
24      <stop offset="0" stop-color="#00a8de"/>
25      <stop offset="0.2" stop-color="#333391"/>
26      <stop offset="0.4" stop-color="#e91388"/>
27      <stop offset="0.6" stop-color="#eb2d2e"/>
28      <stop offset="0.8" stop-color="#fde92b"/>
29      <stop offset="1" stop-color="#009e54"/>
30    </linearGradient>	
31   <linearGradient id="greyGrad" data-name="Spectrum " x1="150" y1="280" y2="150" x2="250" gradientUnits="userSpaceOnUse">
32      <stop offset="0" stop-color="#00a8de"/>
33      <stop offset="0.2" stop-color="#333391"/>
34      <stop offset="0.4" stop-color="#e91388"/>
35      <stop offset="0.6" stop-color="#eb2d2e"/>
36      <stop offset="0.8" stop-color="#fde92b"/>
37      <stop offset="1" stop-color="#009e54"/>
38    </linearGradient>	
39    <polyline id="wave" fill="none" stroke-width="2" stroke-linecap="round" stroke="url(#rainbowGrad)"/>
40      <g id="prism">
41      
42          <polygon points="0.5 91.18 88.78 42.18 176.69 91.72 88.78 142.31 0.5 91.18" fill="#ccc" fill-opacity="0.1" stroke="#fff" stroke-dasharray="3 2"/>
43      
44        <polygon id="rightPane" points="176.69 91.72 88.78 142.31 88.78 0.5 176.69 91.72" fill="#e6e6e6" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0.51"/>
45        <polygon id="leftPane" points="88.78 0.5 88.78 142.31 0.5 91.18 88.78 0.5" fill="#f2f2f2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0.31"/>
46      </g>   
47  <filter id="desat">
48    <feColorMatrix in="SourceGraphic"
49        type="saturate"
50        values="0" />
51  </filter>   
52    <filter id="hoopDesat">
53    <feColorMatrix in="SourceGraphic"
54        type="saturate"
55        values="0.43" />
56  </filter>   
57  
58  <filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
59    <feGaussianBlur stdDeviation="15" result="coloredBlur" />
60    <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
61    <feFlood id="glowAlpha" flood-color="#41C2F4" flood-opacity="0.71"></feFlood>
62    <feComposite in2="offsetblur" operator="in"></feComposite>
63    <feMerge>
64      <feMergeNode/>          
65      <feMergeNode in="SourceGraphic"></feMergeNode>
66    </feMerge>
67  </filter>   
68   
69   <circle class="dot" cx="0" cy="0" r="1" fill="red"/>
70   
71     <radialGradient id="dotGrad" cx="300" cy="300" r="67" gradientUnits="userSpaceOnUse">
72	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:1"/>
73	<stop  offset="0.3" style="stop-color:#0867C7;stop-opacity:0.6"/>
74	<stop  offset="0.8" style="stop-color:#081029;stop-opacity:0"/>
75</radialGradient>
76   </defs>
77  <use xlink:href="#hoopBg" x="220" y="210" opacity="0.35" filter="url(#desat)"/>
78 <use xlink:href="#hoopBg" x="500" y="210" opacity="0.35" filter="url(#hoopDesat)"/>
79 <g class="container"/>
80 <g id="portalContainer">
81  
82      <use xlink:href="#portal" x="370" y="135" opacity="0.26" fill="url(#rainbowGrad)"/>
83</g>
84 <g id="greyPortalContainer" filter="url(#desat)">
85  
86      <use xlink:href="#portal" x="92" y="135" opacity="0.26" fill="url(#greyGrad)"/>
87</g>
88 <use xlink:href="#hoopFront" x="560" y="210" opacity="1"/> 
89 <use xlink:href="#hoopFront" x="280" y="210" opacity="1"  filter="url(#desat)"/>
90</svg>