figures/koch.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <title>SVG and Koch's Fractal</title>
   5                 <script type="text/javascript" src="koch.js"></script>
   6         </head>
   7 <body>
   8         <h1> Koch's Snowflake </h1>
   9         <p> An example of using the DOM to make a fractal --- an interactive document.</p>
  10         <p> <b>Warning:</b> If you iterate too many times you will likely crash your browser </p>
  11         <p> In most browsers you may press Control+U to examine the HTML and SVG describing this document </p>
  12         <p> You can also follow <a href="koch.js">this link</a> to view the Javascript in <code>koch.js</code> </p>
  13         <svg
  14                 id="kochSVG"
  15                 xmlns="http://www.w3.org/2000/svg"
  16                 version="1.1"
  17                 width="400"
  18                 height="400"
  19         >
  20                 <path
  21                         id="line"
  22                         style="stroke:#000000; fill:none; stroke-width:1px;"
  23                         d = "M 100,100 300,100 200,273.2051 100,100"
  24                 />
  25         </svg>
  26         <p></p>
  27         <table>
  28                 <tr> <td> Inwards <input type="radio" name="dir" id="dir_in"/> Outwards <input type="radio" name="dir" value="dir_out" checked="yes"/> </td> </tr>
  29                 <tr> <td> Insert <input type="radio" name="mode" id="mode_insert" checked="yes"/> Append <input type="radio" name="mode" id="mode_append"/> </td> </tr>
  30                 <tr> <td> <input type="text" value="1" id="iterations"/> <button onclick="iterateKoch();">Koch Iterate</button> </td> </tr>
  31                 <tr> <td> <input type="text" value="#000000" id="stroke"/> <button onclick="stroke();">Stroke Colour</button> </td> </tr>
  32                 <tr> <td> <input type="text" value="none" id="fill"> <button onclick="fill();">Fill Colour</button> </td> </tr>
  33                 <tr> <td> <input type="text" value="1" id="stroke-width"/> <button onclick="strokeWidth();">Stroke Thickness</button> </td> </tr>
  34                 <tr> <td><button onclick="reset();">Reset</button> <button onclick="svgToText();">Standalone SVG</button></td></tr>
  35         </table>
  36         <p id="debug"></p>
  37 </body>
  38 </html>