2 files changed, 99 insertions, 0 deletions
diff --git a/sandbox/svg1/index.html b/sandbox/svg1/index.html
new file mode 100644
index 0000000..069d9b1
--- /dev/null
+++ b/sandbox/svg1/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>svg1</title>
+
+  <style>
+  .container { width: 33%; }
+  .circle1 { fill: #F90; }
+  .circle2 { fill: #09F; }
+  svg {
+    width: 100%;
+    height: 100%;
+    border: 1px solid;
+  }
+  </style>
+
+</head>
+<body>
+
+  <h1>svg1</h1>
+
+<div class="container">
+  <svg viewbox="0 0 200 160">
+    <ellipse class="circle1" cx="60" cy="60" rx="80" ry="80" fill="#f00" />
+    <ellipse class="circle1" cx="180" cy="80" rx="40" ry="40" />
+    <ellipse class="circle2" cx="160" cy="200" rx="100" ry="60" />
+  </svg>
+
+<svg viewBox="0 0 20 10">
+    <polygon fill=red stroke-width=0 
+             points="0,10 20,10 10,0" />
+</svg>
+
+</div>
+
+</body>
+</html>
diff --git a/sandbox/svg2/index.html b/sandbox/svg2/index.html
new file mode 100644
index 0000000..6bd4ef1
--- /dev/null
+++ b/sandbox/svg2/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>svg2</title>
+
+  <style>
+  .container { width: 33%; }
+  .circle1 { fill: #F90; }
+  .circle2 { fill: #09F; }
+  svg {
+    width: 100%;
+    height: 100%;
+    border: 1px solid;
+  }
+  .arrow { fill: #09F; }
+  </style>
+
+</head>
+<body>
+
+  <h1>svg2</h1>
+
+<div class="container">
+  <svg viewbox="0 0 100 100">
+    <path class="arrow" d="M 50 0 L 60 10 L 20 50 L 60 90 L 50 100 L 0 50 Z">
+  </svg>
+</div>
+
+<script>
+window.onload = function() {
+  var svgURI = 'http://www.w3.org/2000/svg';
+  var svg = document.createElementNS( svgURI, 'svg');
+  svg.setAttribute( 'viewBox', '0 0 100 100' );
+  var path = document.createElementNS( svgURI, 'path');
+  path.setAttribute( 'd', 'M 50 0 L 60 10 L 20 50 L 60 90 L 50 100 L 0 50 Z' );
+  path.setAttribute( 'class', 'arrow' );
+  svg.appendChild( path );
+  console.log( typeof svg );
+  document.querySelector('.container').appendChild( svg );
+}
+
+window.check = ( function() {
+  var checked;
+  function checker() {
+    if ( checked !== undefined ) {
+      return checked;
+    }
+    console.log('checking');
+    checked = Math.random() > 0.5;
+    return checked;
+  }
+  return checker;
+})();
+
+</script>
+
+</body>
+</html>