3 <title>Webby Rabbit</title>
5 <script type="text/javascript">
9 original = document.getElementById("rabbit").cloneNode();
10 original.setAttribute("id", "original");
12 function perturbPaths()
14 var amount = document.getElementById("permute_amount").value;
15 var paths = document.getElementsByTagName("path");
16 for (var i = 0; i < paths.length; ++i)
18 var d = paths[i].getAttribute('d').split(/[\s,]+/);
19 var delims = paths[i].getAttribute('d').match(/[\s,]+/g);
20 //if (i == 0) alert(d);
21 for (var j = 0; j < d.length; ++j)
23 var asfloat = parseFloat(d[j]);
26 d[j] = asfloat + 2*amount*(Math.random()-0.5);
31 for (var j = 0; j < delims.length; ++j)
34 result.push(delims[j]);
36 result.push(d[delims.length]);
37 //if (i == 0) alert(result.join(""));
38 paths[i].setAttribute('d', result.join(""));
48 var rabbit = document.getElementById("rabbit");
49 var parent = rabbit.parentNode;
50 parent.removeChild(rabbit);
51 original.setAttribute("id", "rabbit");
52 parent.insertBefore(original, parent.firstChild);
59 <body onload="load();">
62 xmlns:dc="http://purl.org/dc/elements/1.1/"
63 xmlns:cc="http://creativecommons.org/ns#"
64 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
65 xmlns:svg="http://www.w3.org/2000/svg"
66 xmlns="http://www.w3.org/2000/svg"
67 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
68 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
73 inkscape:version="0.48.3.1 r9886"
74 sodipodi:docname="rabbit_simplified.svg">
82 inkscape:pageopacity="0.0"
83 inkscape:pageshadow="2"
84 inkscape:zoom="0.9899495"
85 inkscape:cx="300.49618"
86 inkscape:cy="184.76819"
87 inkscape:document-units="px"
88 inkscape:current-layer="layer1"
94 inkscape:window-width="1280"
95 inkscape:window-height="994"
98 inkscape:window-maximized="1"
100 inkscape:guide-bbox="true">
103 position="-26.691516,-31.882946"
105 </sodipodi:namedview>
111 <dc:format>image/svg+xml</dc:format>
113 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
114 <dc:title></dc:title>
119 inkscape:label="Layer 1"
120 inkscape:groupmode="layer"
122 transform="translate(-227.75,-256.03125)">
124 style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
125 d="m 478.78564,339.0153 -16.66751,-1.01016 -36.11296,-47.7297 -12.6269,-33.0825 28.53681,17.17259 23.2335,24.4962 10.35407,21.97082 z"
127 inkscape:connector-curvature="0" />
129 style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
130 d="m 451.25899,350.37951 -51.26524,-30.55711 -27.52666,-37.12311 -0.25254,-6.81853 30.30458,4.29315 23.23351,11.11168 24.74873,26.5165 12.62691,21.71828 z"
132 inkscape:connector-curvature="0" />
134 style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
135 d="m 285.59397,323.10539 -10.6066,9.09138 -10.10153,27.02158 -17.67767,2.77792 -18.94036,41.66879 1.2627,9.59645 5.55583,2.77792 14.39468,-8.5863 12.12183,-22.47589 13.63706,5.05076 14.14213,8.83884 20.70813,2.0203 14.89975,18.18275 28.53681,14.64721 22.47589,6.56599 14.39468,1.01015 25.25381,31.81981 18.43528,-2.77792 8.33376,-2.27284 -0.50507,-5.55584 -6.06092,-4.29315 -10.10152,-1.51523 -9.09138,-13.63706 0.25254,-5.80838 20.20305,-14.64721 17.67767,-16.66752 12.62691,5.05077 22.72843,-0.25254 8.33376,-9.59645 -3.78807,-1.51523 -10.85914,-1.26269 0.50507,-2.77792 20.45559,-0.75761 7.32361,-15.65737 2.52538,-1.51523 0.25254,-4.29314 -13.8896,-11.8693 -9.26469,-14.67259 -12.70613,-8.05584 -17.17259,-1.26269 -17.67767,10.6066 -12.62691,18.94036 -13.88959,4.04061 -18.43529,-3.78807 -20.96066,-14.14214 -21.46575,-17.67767 -18.68782,-17.67767 -23.99112,-3.28299 z"
137 inkscape:connector-curvature="0"
138 sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccc" />
140 style="fill:#ffffff;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
141 d="m 285.59397,323.61047 -5.55584,-10.85914 1.01016,-8.83883 20.20305,-14.64722 13.38452,0 4.54568,7.32361 -5.3033,18.18274 z"
143 inkscape:connector-curvature="0" />
145 style="fill:#ff5555;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
146 d="m 452.26914,343.05591 -36.61803,-26.76905 -27.02158,-30.30457 23.23351,4.54568 25.50635,22.4759 20.70813,26.5165 z"
148 inkscape:connector-curvature="0" />
150 style="fill:#ffffff;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
151 d="m 467.61083,370.8351 -0.37881,-10.54346 2.46225,-5.93465 6.88167,0.25254 3.09359,4.79822 -5.42957,3.78808 -0.88389,7.63927 z"
153 inkscape:connector-curvature="0" />
155 style="fill:#008000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
156 d="m 473.41921,371.02451 0.88388,-7.95495 5.36644,-3.53554 0.69448,4.79823 -4.29315,6.31345 z"
158 inkscape:connector-curvature="0" />
160 style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
161 d="m 476.13399,370.51943 4.41942,-0.50507 -0.31567,-5.30331 z"
163 inkscape:connector-curvature="0" />
165 style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
166 d="m 463.69649,353.78878 5.4927,-4.9245 8.27063,0.37881 -8.14436,1.19956 -4.35628,3.97747 z"
168 inkscape:connector-curvature="0" />
170 style="fill:#ffb37f;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
171 d="m 506.61734,377.62066 4.64286,-6.96428 3.21428,2.5 0.35715,5 z"
173 inkscape:connector-curvature="0" />
175 style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
176 d="m 266.03612,386.66064 -15.71429,29.64285 1.96429,8.03572 8.03571,-1.42857 10.17857,-11.07143 14.28572,-15.71429 z"
178 inkscape:connector-curvature="0" />
180 style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
181 d="m 428.38818,429.04154 -6.06118,22.62065 -5.01024,-8.51351 0,-5.89285 z"
183 inkscape:connector-curvature="0" />
185 style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
186 d="m 398.9239,451.89868 -2.67857,13.57143 3.39285,6.25 15.71429,1.25 z"
188 inkscape:connector-curvature="0" />
190 style="fill:#e3dbdb;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
191 d="m 309.71136,400.85715 11.61675,-1.51523 37.75445,16.92006 18.18275,9.34391 13.8896,1.89403 -1.89404,7.57615 1.01015,6.18718 -15.15228,-0.50507 -28.15801,-10.48034 -22.34962,-11.86929 z"
193 inkscape:connector-curvature="0" />
195 style="fill:#c8b7b7;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
196 d="m 418.9341,428.13127 -2.0203,8.33376 20.45558,-14.39468 z"
198 inkscape:connector-curvature="0" />
200 style="fill:#e3dbdb;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
201 d="m 455.29959,405.40284 6.31346,-18.18275 24.74873,-6.81853 25.25382,-1.76777 -7.32361,15.40483 -20.20305,0.75761 0,3.283 14.64721,3.03046 -8.83883,10.10152 -22.22336,-0.25253 z"
203 inkscape:connector-curvature="0" />
205 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
206 d="m 280,111.42762 -18.21429,-5"
208 inkscape:connector-curvature="0"
209 transform="translate(227.32245,266.11266)" />
211 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
212 d="m 273.75,96.42762 -9.10714,6.42857"
214 inkscape:connector-curvature="0"
215 transform="translate(227.32245,266.11266)" />
217 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
218 d="M 4.6428571,148.57048 15.714286,132.14191"
220 inkscape:connector-curvature="0"
221 transform="translate(227.32245,266.11266)" />
223 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
224 d="M 25,158.21333 36.071428,144.28476"
226 inkscape:connector-curvature="0"
227 transform="translate(227.32245,266.11266)" />
229 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
230 d="m 203.04066,100.53056 10.10153,0.50508 -6.06092,6.56599 7.57614,0 -4.54568,7.57614 8.08122,-1.51522"
232 inkscape:connector-curvature="0"
233 transform="translate(227.32245,266.11266)" />
235 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
236 d="m 216.17264,111.26343 4.16688,5.3033"
238 inkscape:connector-curvature="0"
239 transform="translate(227.32245,266.11266)" />
241 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
242 d="m 227.7894,139.42144 -7.07107,-8.5863"
244 inkscape:connector-curvature="0"
245 transform="translate(227.32245,266.11266)" />
247 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
248 d="m 207.08127,203.56612 -0.50508,-6.06091 -7.07106,0.50507"
250 inkscape:connector-curvature="0"
251 transform="translate(227.32245,266.11266)" />
255 <input type="text" value="0" id="permute_amount"/>
256 <button onclick="perturbPaths();">Perturb Paths</button>
258 <button onclick="reset();">Reset</button>