-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
39 lines (39 loc) · 3.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="toast-box" class="hidden"></div>
<main>
<h1>Flowers</h1>
<p>Choose the settings to draw your Fibonnaci flower.</p>
<p>Tiny variations can completely changes the pattern.</p>
<form action="">
<label for="angle">Angle</label>
<input type="number" value="0.5" name="angle" step="0.1">
<label for="angle">Step</label>
<input type="number" value="1" name="step">
<label for="scale">Scale</label>
<input type="number" value="10" name="scale">
<label for="scale">Limit</label>
<input type="number" value="200" name="limit">
<input type="submit" value="Draw!" name="draw">
</form>
<footer>
<svg id="lazyrabbit" xmlns="http://www.w3.org/2000/svg" viewBox="-177 269.9 255.1 255.1"><style type="text/css">
.st0{fill:none;}
.st1{enable-background:new ;}
</style><path class="st0" d="M-138.5 294.6h293.1v251h-293.1V294.6z"/><g class="st1"><path d="M-127.3 297.4h4.9c-5.5 7.8-8.2 16.6-8.2 26.5 0 9.7 2.7 18.3 8.2 25.8h-4.9c-5.9-6.7-8.9-15.3-8.9-25.8C-136.2 313.3-133.2 304.4-127.3 297.4z"/><path d="M-98.9 297.4l15.9 42.9h-5.2l-15.9-42.9H-98.9z"/><path d="M-71 297.4h4.9c-5.5 7.8-8.2 16.6-8.2 26.5 0 9.7 2.7 18.3 8.2 25.8H-71C-77 343-80 334.4-80 323.9 -80 313.3-77 304.4-71 297.4z"/><path d="M-42.7 297.4l15.9 42.9h-5.2l-15.9-42.9H-42.7z"/></g><g class="st1"><path d="M-127.3 369.4h4.9c-5.5 7.8-8.2 16.6-8.2 26.5 0 9.7 2.7 18.3 8.2 25.8h-4.9c-5.9-6.7-8.9-15.3-8.9-25.8C-136.2 385.3-133.2 376.4-127.3 369.4z"/><path d="M-86.8 398.7v-4.9h14.5v4.9H-86.8z"/><path d="M-58.2 409c0 1.4-0.3 2.5-0.9 3.2 -0.6 0.7-1.6 1.1-2.8 1.1 -1.3 0-2.2-0.4-2.8-1.1 -0.6-0.7-0.9-1.8-0.9-3.2s0.3-2.4 0.9-3c0.6-0.6 1.6-0.9 2.8-0.9 1.2 0 2.2 0.3 2.8 0.9C-58.5 406.6-58.2 407.6-58.2 409z"/><path d="M-51.4 398.7v-4.9h14.5v4.9H-51.4z"/><path d="M-27.7 421.7h-4.9c5.5-7.5 8.2-16.1 8.2-25.8 0-10-2.7-18.8-8.2-26.5h4.9c5.9 7.2 8.9 16 8.9 26.5C-18.8 406.2-21.8 414.8-27.7 421.7z"/></g><g class="st1"><path d="M-135.3 468.1c0-5.3 1.3-9.4 3.9-12.3 2.6-2.9 6-4.3 10.2-4.3 4.1 0 7.4 1.5 10.1 4.5 2.7 3 4 7 4 12.2 0 5.5-1.3 9.6-3.9 12.4s-6 4.2-10.2 4.2 -7.6-1.4-10.2-4.3C-134 477.5-135.3 473.4-135.3 468.1zM-112.8 468.1c0-4.1-0.7-7.1-2.1-9.1 -1.4-2-3.5-3-6.3-3s-4.9 1-6.3 3c-1.4 2-2.1 5.1-2.1 9.1 0 4.1 0.7 7.1 2.1 9.3s3.5 3.2 6.3 3.2 4.9-1.1 6.3-3.2S-112.8 472.2-112.8 468.1z"/><path d="M-79 493.7h-24.8v-4H-79V493.7z"/><path d="M-68 441.4h4.9c-5.5 7.8-8.2 16.6-8.2 26.5 0 9.7 2.7 18.3 8.2 25.8H-68c-5.9-6.7-8.9-15.3-8.9-25.8C-76.9 457.3-73.9 448.4-68 441.4z"/><path d="M-51.6 441.4l-1.2 15.5H-56l-1.2-15.5H-51.6zM-41 441.4l-1.2 15.5h-3.3l-1.2-15.5H-41z"/><path d="M-30.3 493.7h-4.9c5.5-7.5 8.2-16.1 8.2-25.8 0-10-2.7-18.8-8.2-26.5h4.9c5.9 7.2 8.9 16 8.9 26.5C-21.4 478.2-24.3 486.8-30.3 493.7z"/><path d="M7.9 441.4h4.9c-5.5 7.8-8.2 16.6-8.2 26.5 0 9.7 2.7 18.3 8.2 25.8H7.9C2 487-1 478.4-1 467.9 -1 457.3 2 448.4 7.9 441.4z"/><path d="M24.3 441.4l-1.2 15.5h-3.3l-1.2-15.5H24.3zM34.9 441.4l-1.2 15.5h-3.3l-1.2-15.5H34.9z"/><path d="M45.7 493.7h-4.9c5.5-7.5 8.2-16.1 8.2-25.8 0-10-2.7-18.8-8.2-26.5h4.9c5.9 7.2 8.9 16 8.9 26.5C54.6 478.2 51.6 486.8 45.7 493.7z"/></g>
</svg>
</footer>
</main>
<section>
<canvas id="canvas1"></canvas>
</section>
<script src="script.js"></script>
</body>
</html>