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

rendered animation

SVG Rock Ripples

1 <svg class="mainSVG" version="1.1"
2	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
3	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" >
4<defs>
5    <filter id="edgeClean" color-interpolation-filters="sRGB">
6    <feComponentTransfer>
7      <feFuncA type="table" tableValues="0 .5 1 1" />
8    </feComponentTransfer>
9  </filter>   
10<filter  id="goo" color-interpolation-filters="sRGB">
11      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
12      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
13    
14        <feComposite in="SourceGraphic" in2="cm" />
15  	</filter> 
16  <filter id="rockFilter">
17<!--<feColorMatrix  in="SourceGraphic" type="hueRotate" values="30" />-->
18    <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0
190 0 1 0 
200 0 1 0
210 0 0 0
220 0 1 0"/>
23  </filter>
24  <filter id="reflection">
25      <feTurbulence id="turbulence" baseFrequency="0.01 0.8" type="fractalNoise" stitchTiles="stitch" numOctaves="1" seed="0"/>
26      <feDisplacementMap in="SourceGraphic" scale="50" />
27      <feGaussianblur stdDeviation="0.7" >
28      </feGaussianblur>
29    </filter>
30  <clipPath id="rippleMask">
31       <rect width="600" height="200" y="300" />
32
33  </clipPath>
34</defs>
35   <g id="rippleGroup" filter="url(#goo)" fill="none" stroke="#6BCCD5" stroke-width="2" stroke-miterlimit="10"  >
36<ellipse  cx="300" cy="310" rx="36" ry="12"/>
37<ellipse  cx="300" cy="310" rx="36" ry="12"/>
38<ellipse  cx="300" cy="310" rx="36" ry="12"/>
39<ellipse  cx="300" cy="310" rx="36" ry="12"/>
40<ellipse  cx="300" cy="310" rx="36" ry="12"/>
41<ellipse  cx="300" cy="310" rx="36" ry="12"/>
42<ellipse  cx="300" cy="310" rx="36" ry="12"/>
43<ellipse  cx="300" cy="310" rx="36" ry="12"/>
44<ellipse  cx="300" cy="310" rx="36" ry="12"/>
45<ellipse  cx="300" cy="310" rx="36" ry="12"/>
46<ellipse  cx="300" cy="310" rx="36" ry="12"/>
47<ellipse  cx="300" cy="310" rx="36" ry="12"/>
48<ellipse  cx="300" cy="310" rx="36" ry="12"/>
49<ellipse  cx="300" cy="310" rx="36" ry="12"/>
50<ellipse  cx="300" cy="310" rx="36" ry="12"/>
51<ellipse  cx="300" cy="310" rx="36" ry="12"/>
52<ellipse  cx="300" cy="310" rx="36" ry="12"/>
53<ellipse  cx="300" cy="310" rx="36" ry="12"/>
54<ellipse  cx="300" cy="310" rx="36" ry="12"/>
55
56     
57   </g>
58<g id="rockGroup" filter="url(#edgeClean)">
59	<path fill="#333333" d="M404.6,310.7l-65-76.6l35-5.8C374.6,228.3,396.3,285.7,404.6,310.7z"/>
60	<path fill="#383838" d="M339.5,234.1l64.9,76.6c-18.1,9.2-47.4,13-79.4,13.6v-0.1L339.5,234.1z"/>
61	<path fill="#3D3D3D" d="M374.6,228.3l-35,5.8l-75.8-35.8L374.6,228.3z"/>
62	<path fill="#3F3F3F" d="M339.5,234.1L325,324.2v0.1c-8,0.2-16.4,0.1-24.6-0.1l-68.6-49.6L339.5,234.1z"/>
63	<path fill="#474747" d="M339.6,234.1l-107.7,40.5l31.9-76.3L339.6,234.1z"/>
64	<path fill="#474747" d="M231.9,274.6l68.6,49.6c-45.9-1.3-89.3-8.1-98.3-13.5l-5.8-14.2L231.9,274.6z"/>
65	<path fill="#505050" d="M263.9,198.3l-31.9,76.3l-35.5,21.9L263.9,198.3z"/>
66</g>
67</svg>
68