drawing animating with svgs

shama · shama · commit 8f80244d2f12 · 2018-04-18T07:22:00.000-07:00
diff --git a/drawing-animating-svgs/README.md b/drawing-animating-svgs/README.md
@@ -0,0 +1,10 @@
+# Drawing & Animating SVGs
+
+> [https://www.youtube.com/watch?v=Nnnx9ytFqK4](https://www.youtube.com/watch?v=Nnnx9ytFqK4)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/drawing-animating-svgs/index.html b/drawing-animating-svgs/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Obligatory Bear Inclusion</title>
+</head>
+<body>
+
+<svg width="200" viewBox="0 0 100 100" style="border: 1px solid #ddd;">
+  <!-- <rect width="50" height="50" x="0" y="0" fill="none" stroke="red" /> -->
+  <!-- <path d="M 20 20 L 30 0 L 30 30 L 0 30 L 0 0" /> -->
+  <!-- <path d="M 10 10 h 30 v 30 h -30 z" stroke="red" fill="none" /> -->
+  <!-- <path id="percent" fill="none" stroke="red" /> -->
+
+  <g transform="translate(20,100) scale(1) rotate(-90)" id="chart" stroke="red" stroke-width="9"></g>
+</svg>
+
+<style>
+path {
+  animation: grow 5s;
+}
+@keyframes grow {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+</style>
+
+<script>
+//const svg = document.querySelector('svg')
+const chart = document.querySelector('#chart')
+const data = [10, 30, 20, 60]
+data.forEach(function (num, index) {
+  const bar = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  bar.setAttribute('d', `M 0 ${index * 10 + 10} l ${num} 0 z`)
+  // bar.style.stroke = 'black'
+  // bar.style.strokeWidth = 5
+  chart.appendChild(bar)
+})
+
+// const element = document.getElementById('percent')
+// let percent = 0
+// setInterval(function () {
+//   percent += 10
+//   element.setAttribute('d', 'M 0 10 h ' + percent)
+// }, 1000)
+</script>
+
+</body>
+</html>
diff --git a/drawing-animating-svgs/index.js b/drawing-animating-svgs/index.js
diff --git a/drawing-animating-svgs/package.json b/drawing-animating-svgs/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "drawing-animating-svgs",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js --live",
+    "test": "node test.js"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^11.2.0"
+  }
+}
