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

rendered animation

Dancing SVG lines with eyes

1
2<svg xmlns="http://www.w3.org/2000/svg" 
3	 x="0px" y="0px" viewBox="0 0 600 600">
4<defs>
5<marker id="eye" width="26.4px" height="48px" viewBox="0 0 26.4 48" markerWidth="26.4" markerHeight="34" refX="10" refY="23" orient="auto" markerUnits="userSpaceOnUse">
6  
7<ellipse fill="#FFFFFF" cx="13.2" cy="8.5" rx="13.2" ry="8.5"/>
8<circle class="eyeR" cx="17" cy="10" r="3.4"/>
9<ellipse fill="#FFFFFF" cx="13.2" cy="39.5" rx="13.2" ry="8.5"/>
10<circle class="eyeL" cx="20.4" cy="39" r="3.4"/>
11 
12</marker>
13
14  <path id="bendyPath"  d="M50,200c0,100,0,100,0,200" stroke-linecap="round" marker-start="url(#eye)" />
15</defs>
16
17  <use xlink:href="#bendyPath" stroke="red" x="0" y="0" fill="none" stroke-width="4"  />
18  <use xlink:href="#bendyPath" stroke="orange" x="75" y="0" fill="none" stroke-width="4" />
19  <use xlink:href="#bendyPath" stroke="yellow" x="150" y="0" fill="none" stroke-width="4" />  
20  <use xlink:href="#bendyPath" stroke="green" x="225" y="0" fill="none" stroke-width="4" />  
21  <use xlink:href="#bendyPath" stroke="blue" x="300" y="0" fill="none" stroke-width="4" />  
22  <use xlink:href="#bendyPath" stroke="indigo" x="375" y="0" fill="none" stroke-width="4" /> 
23  <use xlink:href="#bendyPath" stroke="violet" x="450" y="0" fill="none" stroke-width="4" />  
24</svg>
25
26