diff --git a/public/examples.html b/public/examples.html
index 9cc14bf..4438691 100644
--- a/public/examples.html
+++ b/public/examples.html
@@ -2,18 +2,60 @@
 <html>
 	<head>
 		<link rel="stylesheet" href="/css/examples.css"/>
+		<style media="screen">
+			rect {
+				transition: height 2s ease-in-out;
+			}
+		</style>
+		<script>
+			// window.setTimeout(function(){
+			// 	document.querySelector('rect').setAttribute('height', '500');
+			// },1000);
+		</script>
 	</head>
 	<body>
 		<svg>
-			<line x1="0" y1="0" x2="100" y2="100" stroke="purple"/>
+			<!-- <line x1="0" y1="0" x2="100" y2="100" stroke="purple"/>
 			<rect x="50" y="20" width="150" height="150" fill="red" stroke="blue"/>
 			<ellipse cx="200" cy="80" rx="100" ry="50" fill="green"/>
-			<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="red" fill="green"/>
-			<polygon points="200,10 250,190 160,210 0,10" />
+			<polyline points="20,20
+			40,25
+			60,40
+			80,120
+			120,140
+			200,180" stroke="red" fill="green"/>
+			<polygon points="200,10 250,190 160,210 0,10" fill="yellow" stroke="black" />
 			<g transform="translate(50,100) scale(2) rotate(45)">
 				<circle r="10" cx="-10" cy="0" fill="blue" stroke="red" stroke-width="5"/>
 				<text>This is text</text>
-			</g>
+			</g> -->
+			<path d="
+			M 20 40
+			l 20 20
+			l 10 0
+			Z" stroke="black" fill="none"/>
+
+			<path d="
+				M 100 100
+				q 25 50, 50 0
+				t 50 0
+				t 25 0
+				t 50 0
+				t 100 0
+				" stroke="black" fill="none"/>
+
+			<path d="
+				M 50 50
+				c
+					0 20
+					20 20
+					20 0
+				s
+					40 20
+					40 0
+			"
+				fill="none" stroke="black"/>
+			<!-- <rect x="100" y="100" width="100" height="100" fill="grey" stroke="black"/> -->
 		</svg>
 	</body>
 </html>
