Latest repo

node_modules/normalize-svg-path/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "commonjs": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "strict": 2,
+        "indent": 0,
+        "linebreak-style": 0,
+        "quotes": 0,
+        "semi": 0,
+        "no-cond-assign": 1,
+        "no-constant-condition": 1,
+        "no-duplicate-case": 1,
+        "no-empty": 1,
+        "no-ex-assign": 1,
+        "no-extra-boolean-cast": 1,
+        "no-extra-semi": 1,
+        "no-fallthrough": 1,
+        "no-func-assign": 1,
+        "no-global-assign": 1,
+        "no-implicit-globals": 2,
+        "no-inner-declarations": ["error", "functions"],
+        "no-irregular-whitespace": 2,
+        "no-loop-func": 1,
+        "no-multi-str": 1,
+        "no-mixed-spaces-and-tabs": 1,
+        "no-proto": 1,
+        "no-sequences": 1,
+        "no-throw-literal": 1,
+        "no-unmodified-loop-condition": 1,
+        "no-useless-call": 1,
+        "no-void": 1,
+        "no-with": 2,
+        "wrap-iife": 1,
+        "no-redeclare": 1,
+        "no-unused-vars": ["error", { "vars": "all", "args": "none" }],
+        "no-sparse-arrays": 1
+    }
+}

node_modules/normalize-svg-path/.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "stable"

node_modules/normalize-svg-path/Readme.md

@@ -0,0 +1,26 @@
+# normalize-svg-path [![build](https://travis-ci.org/jkroso/normalize-svg-path.svg?branch=master)](https://travis-ci.org/jkroso/normalize-svg-path)
+
+
+  Convert all segments in a path to curves. Usefull if you intend to animate one shape to another. By defining all segments with curves instead of a mix of lines, arcs, and curves tweening becomes much simpler. It could also help you rewrite your SVG code according to the principles of [narcissistic design](//vimeo.com/77199361).
+
+## Usage
+
+[![npm install normalize-svg-path](https://nodei.co/npm/normalize-svg-path.png?mini=true)](https://npmjs.org/package/normalize-svg-path/)
+
+```js
+var parse = require('parse-svg-path')
+var abs = require('abs-svg-path')
+var normalize = require('normalize-svg-path')
+
+var segments = normalize(abs(parse('M0 0L10 10A10 10 0 0 0 20 20Z')))
+```
+
+## API
+
+### normalize(path)
+
+  Translate each segment in `path` to an equivalent cubic bézier curve. The input `path` must be [absolute](//github.com/jkroso/abs-svg-path).
+
+```js
+normalize([['L',1,2]]) // => [['C',0,0,1,2,1,2]]
+```

node_modules/normalize-svg-path/index.js

@@ -0,0 +1,122 @@
+'use strict'
+
+module.exports = normalize
+
+var arcToCurve = require('svg-arc-to-cubic-bezier')
+
+function normalize(path){
+  // init state
+  var prev
+  var result = []
+  var bezierX = 0
+  var bezierY = 0
+  var startX = 0
+  var startY = 0
+  var quadX = null
+  var quadY = null
+  var x = 0
+  var y = 0
+
+  for (var i = 0, len = path.length; i < len; i++) {
+    var seg = path[i]
+    var command = seg[0]
+
+    switch (command) {
+      case 'M':
+        startX = seg[1]
+        startY = seg[2]
+        break
+      case 'A':
+        var curves = arcToCurve({
+          px: x,
+          py: y,
+          cx: seg[6],
+          cy:  seg[7],
+          rx: seg[1],
+          ry: seg[2],
+          xAxisRotation: seg[3],
+          largeArcFlag: seg[4],
+          sweepFlag: seg[5]
+        })
+
+        // null-curves
+        if (!curves.length) continue
+
+        for (var j = 0, c; j < curves.length; j++) {
+          c = curves[j]
+          seg = ['C', c.x1, c.y1, c.x2, c.y2, c.x, c.y]
+          if (j < curves.length - 1) result.push(seg)
+        }
+
+        break
+      case 'S':
+        // default control point
+        var cx = x
+        var cy = y
+        if (prev == 'C' || prev == 'S') {
+          cx += cx - bezierX // reflect the previous command's control
+          cy += cy - bezierY // point relative to the current point
+        }
+        seg = ['C', cx, cy, seg[1], seg[2], seg[3], seg[4]]
+        break
+      case 'T':
+        if (prev == 'Q' || prev == 'T') {
+          quadX = x * 2 - quadX // as with 'S' reflect previous control point
+          quadY = y * 2 - quadY
+        } else {
+          quadX = x
+          quadY = y
+        }
+        seg = quadratic(x, y, quadX, quadY, seg[1], seg[2])
+        break
+      case 'Q':
+        quadX = seg[1]
+        quadY = seg[2]
+        seg = quadratic(x, y, seg[1], seg[2], seg[3], seg[4])
+        break
+      case 'L':
+        seg = line(x, y, seg[1], seg[2])
+        break
+      case 'H':
+        seg = line(x, y, seg[1], y)
+        break
+      case 'V':
+        seg = line(x, y, x, seg[1])
+        break
+      case 'Z':
+        seg = line(x, y, startX, startY)
+        break
+    }
+
+    // update state
+    prev = command
+    x = seg[seg.length - 2]
+    y = seg[seg.length - 1]
+    if (seg.length > 4) {
+      bezierX = seg[seg.length - 4]
+      bezierY = seg[seg.length - 3]
+    } else {
+      bezierX = x
+      bezierY = y
+    }
+    result.push(seg)
+  }
+
+  return result
+}
+
+function line(x1, y1, x2, y2){
+  return ['C', x1, y1, x2, y2, x2, y2]
+}
+
+function quadratic(x1, y1, cx, cy, x2, y2){
+  return [
+    'C',
+    x1/3 + (2/3) * cx,
+    y1/3 + (2/3) * cy,
+    x2/3 + (2/3) * cx,
+    y2/3 + (2/3) * cy,
+    x2,
+    y2
+  ]
+}

node_modules/normalize-svg-path/index.mjs

@@ -0,0 +1,118 @@
+import arcToCurve from 'svg-arc-to-cubic-bezier'
+
+export default function normalize(path){
+  // init state
+  var prev
+  var result = []
+  var bezierX = 0
+  var bezierY = 0
+  var startX = 0
+  var startY = 0
+  var quadX = null
+  var quadY = null
+  var x = 0
+  var y = 0
+
+  for (var i = 0, len = path.length; i < len; i++) {
+    var seg = path[i]
+    var command = seg[0]
+
+    switch (command) {
+      case 'M':
+        startX = seg[1]
+        startY = seg[2]
+        break
+      case 'A':
+        var curves = arcToCurve({
+          px: x,
+          py: y,
+          cx: seg[6],
+          cy:  seg[7],
+          rx: seg[1],
+          ry: seg[2],
+          xAxisRotation: seg[3],
+          largeArcFlag: seg[4],
+          sweepFlag: seg[5]
+        })
+
+        // null-curves
+        if (!curves.length) continue
+
+        for (var j = 0, c; j < curves.length; j++) {
+          c = curves[j]
+          seg = ['C', c.x1, c.y1, c.x2, c.y2, c.x, c.y]
+          if (j < curves.length - 1) result.push(seg)
+        }
+
+        break
+      case 'S':
+        // default control point
+        var cx = x
+        var cy = y
+        if (prev == 'C' || prev == 'S') {
+          cx += cx - bezierX // reflect the previous command's control
+          cy += cy - bezierY // point relative to the current point
+        }
+        seg = ['C', cx, cy, seg[1], seg[2], seg[3], seg[4]]
+        break
+      case 'T':
+        if (prev == 'Q' || prev == 'T') {
+          quadX = x * 2 - quadX // as with 'S' reflect previous control point
+          quadY = y * 2 - quadY
+        } else {
+          quadX = x
+          quadY = y
+        }
+        seg = quadratic(x, y, quadX, quadY, seg[1], seg[2])
+        break
+      case 'Q':
+        quadX = seg[1]
+        quadY = seg[2]
+        seg = quadratic(x, y, seg[1], seg[2], seg[3], seg[4])
+        break
+      case 'L':
+        seg = line(x, y, seg[1], seg[2])
+        break
+      case 'H':
+        seg = line(x, y, seg[1], y)
+        break
+      case 'V':
+        seg = line(x, y, x, seg[1])
+        break
+      case 'Z':
+        seg = line(x, y, startX, startY)
+        break
+    }
+
+    // update state
+    prev = command
+    x = seg[seg.length - 2]
+    y = seg[seg.length - 1]
+    if (seg.length > 4) {
+      bezierX = seg[seg.length - 4]
+      bezierY = seg[seg.length - 3]
+    } else {
+      bezierX = x
+      bezierY = y
+    }
+    result.push(seg)
+  }
+
+  return result
+}
+
+function line(x1, y1, x2, y2){
+  return ['C', x1, y1, x2, y2, x2, y2]
+}
+
+function quadratic(x1, y1, cx, cy, x2, y2){
+  return [
+    'C',
+    x1/3 + (2/3) * cx,
+    y1/3 + (2/3) * cy,
+    x2/3 + (2/3) * cx,
+    y2/3 + (2/3) * cy,
+    x2,
+    y2
+  ]
+}

node_modules/normalize-svg-path/license.md

@@ -0,0 +1,25 @@
+
+The MIT License
+
+Copyright © 2008-2013 Dmitry Baranovskiy (http://raphaeljs.com)
+Copyright © 2008-2013 Sencha Labs (http://sencha.com)
+Copyright © 2013 Jake Rosoman <jkroso@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

node_modules/normalize-svg-path/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "normalize-svg-path",
+  "version": "1.1.0",
+  "description": "Convert all segments in a path to curves",
+  "keywords": [
+    "svg",
+    "path",
+    "normalize"
+  ],
+  "module": "./index.mjs",
+  "main": "./index.js",
+  "exports": {
+    "require": "./index.js",
+    "import": "./index.mjs"
+  },
+  "dependencies": {
+    "svg-arc-to-cubic-bezier": "^3.0.0"
+  },
+  "devDependencies": {
+    "parse-svg-path": "^0.1.2",
+    "tape": "^4.7.0"
+  },
+  "scripts": {
+    "test": "node test.mjs"
+  },
+  "repository": "git://github.com/jkroso/normalize-svg-path.git",
+  "bugs": "https://github.com/jkroso/normalize-svg-path/issues",
+  "author": "Jake Rosoman",
+  "license": "MIT"
+}

node_modules/normalize-svg-path/test.mjs

@@ -0,0 +1,131 @@
+import t from 'tape'
+import normalize from './index.mjs'
+import parse from 'parse-svg-path'
+
+
+t('line-to', t => {
+  t.deepEqual(
+    normalize(parse('L100 100')),
+    parse('C0,0 100,100 100,100')
+  )
+
+  t.deepEqual(
+    normalize(parse('L50 50 100 0')),
+    parse('C0,0 50,50 50,50 C50,50 100,0 100,0')
+  )
+
+  t.deepEqual(
+    normalize(parse('H50 100')),
+    parse('C0,0 50,0 50,0 C50,0 100,0 100,0')
+  )
+
+  t.deepEqual(
+    normalize(parse('V50 100')),
+    parse('C0,0 0,50 0,50 C0,50 0,100 0,100')
+  )
+
+  t.end()
+})
+
+t('curve-to', t => {
+  t.deepEqual(
+    normalize(parse('M10 150 C10 10 150 10 150 150')),
+    parse('M10,150C10,10,150,10,150,150')
+  )
+
+  t.deepEqual(
+    normalize(parse('M0 120 Q60 0 120 120')),
+    parse('M0,120C40,40,80,40,120,120')
+  )
+
+  t.deepEqual(
+    normalize(parse('M10 80 C10 10 75 10 75 80 S150 150 150 80')),
+    parse('M10,80C10,10,75,10,75,80C75,150,150,150,150,80')
+  )
+
+  t.deepEqual(
+    normalize(parse('M0 60 Q30 0 60 60 T120 60')),
+    parse('M0,60C20,20,40,20,60,60C80,100,100,100,120,60')
+  )
+
+  t.deepEqual(
+    normalize(parse('M30 30 Q50 50 84 50 S124 73 107 92 T127 122')),
+    parse('M30,30C43.33333333333333,43.33333333333333,61.33333333333333,50,84,50C84,50,124,73,107,92C107,92,113.66666666666666,102,127,122')
+  )
+
+  t.end()
+})
+
+t('close-path', t => {
+  t.deepEqual(
+    normalize(parse('L100 0 100 100Z')),
+    parse('C0,0,100,0,100,0C100,0,100,100,100,100C100,100,0,0,0,0')
+  )
+
+  t.end()
+})
+
+
+
+
+t('arc-to', t => {
+  t.deepEqual(
+    r(normalize(parse('M10 80 A150 150 0 0 0 150 80'))),
+    r(parse('M 10 80C 53.80473794537901 103.1133445143787 106.19526205462094 103.1133445143787 149.99999999999997 80.00000000000003'))
+  )
+
+  // half circle clockwise
+  t.deepEqual(
+    r(normalize(parse('M10 80 A50 50 0 0 1 150 80'))),
+    r(parse('M 10 80C 10 41.340067511844474 41.34006751184445 10.000000000000014 79.99999999999999 10C 118.65993248815552 10 150 41.34006751184445 150 79.99999999999999'))
+  )
+
+  // half circle anticlockwise
+  t.deepEqual(
+    r(normalize(parse('M10 80 A50 50 0 1 0 150 80'))),
+    r(parse('M 10 80C 10.000000000000014 118.65993248815553 41.340067511844474 150 80 150C 118.65993248815553 150 150 118.65993248815553 150 80'))
+  )
+
+  // circle
+  t.deepEqual(
+    r(normalize(parse('M10 80 A50 50 0 0 1 150 80 A50 50 0 0 1 10 80'))),
+    r(parse('M 10 80C 10 41.340067511844474 41.34006751184445 10.000000000000014 79.99999999999999 10C 118.65993248815552 10 150 41.34006751184445 150 79.99999999999999C 150 118.65993248815553 118.65993248815553 150 80 150C 41.340067511844474 150 10.000000000000014 118.65993248815553 10 80.00000000000001'))
+  )
+
+  t.deepEqual(
+    normalize(parse('M10 80 A150 75 30 0 0 150 80')),
+    parse('M 10 80C 72.04149682761658 108.21761044823509 129.85079028483736 108.21761044823509 150 79.99999999999999')
+  )
+
+  // the null curve
+  t.deepEqual(
+    normalize(parse('M10 80 A50 50 0 0 1 10 80')),
+    parse('M10,80')
+  )
+
+  t.end()
+})
+
+function r(arr) { return arr.map(function (arr) { return [arr[0]].concat(arr.slice(1).map(round)) }) }
+function round(v) { return Math.round(v) }
+
+//show parsed curve in the doc
+function show(src) {
+  let path = src.map(seg => seg.join(' ')).join('')
+
+  let el = document.body.appendChild(document.createElement('div'))
+  let svgNS = 'http://www.w3.org/2000/svg'
+
+  el.innerHTML = `<svg id="mySVG" width="400" height="400" xmlns="${svgNS}" xmlns:xlink="http://www.w3.org/1999/xlink"/>`
+
+  let svg = el.firstChild
+
+  let pathEl = svg.appendChild(document.createElementNS(svgNS, 'path'))
+  pathEl.setAttribute('d', path)
+
+  pathEl.style.strokeWidth = '2px';
+  pathEl.style.stroke = 'black';
+  pathEl.style.fill = 'transparent';
+
+  return src
+}