update

Author: cheng500

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QX3XJ942LDLMQ&source=url"]

.gitignore

@@ -0,0 +1 @@
+node_modules/

.npmignore

@@ -0,0 +1 @@
+/.github

README.md

@@ -0,0 +1,32 @@
+### Finances App Firebase Backend
+CLI tool to animate svg paths
+
+**[DEMO](https://nckdev.agency/lab/svg-lineart-animator/en)**
+
+### Installation
+`npm install -g svg-lineart-animator`
+
+### Usage
+`svgline --file test.svg`
+
+### Options
+```
+Usage:
+  svgline [options]
+
+Options:
+  -f, --file                                             Path to original file
+  -w, --delay                                            Delay before start of animation in ms
+  -d, --destination                                      Path to save generated file
+  -p, --direction                                        Animation direction
+  -s, --duration                                         Duration of the animation in ms
+  -h, --help                                             This screen
+  -i, --iteration                                        Number of iteration for animation
+  -t, --timing                                           Timing of the animation
+
+For more information on the animation properties. Check it out here: https://www.w3schools.com/cssref/css3_pr_animation.asp
+```
+### Support
+If you like this app, please consider donating to a small time developer (me)!
+
+**[Donate](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QX3XJ942LDLMQ&source=url)**

cli.js

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+
+const arg = require('arg')
+const fs = require('fs')
+const { parse, stringify } = require('svgson')
+const path = require('svg-path-properties')
+
+function parseArgumentsIntoOptions(rawArgs) {
+  const args = arg({
+    '--help': Boolean,
+    '--delay': Number,
+    '--destination': String,
+    '--direction': String,
+    '--duration': Number,
+    '--file': String,
+    '--iteration': String || Number,
+    '--timing': String,
+    '-h': '--help',
+    '-w': '--delay',
+    '-d': '--destination',
+    '-p': '--direction',
+    '-s': '--duration',
+    '-f': '--file',
+    '-i': '--iteration',
+    '-t': '--timing'
+  }, {
+    argv: rawArgs.slice(2),
+  })
+  return {
+    help: args['--help'] || false,
+    delay: args['--delay'] || 0,
+    destination:
+      args['--destination']
+      ? args['--destination']
+      : args['--file']
+        ? `${args['--file'].substr(0, args['--file'].lastIndexOf('.'))}-animated.svg`
+        : false,
+    direction: args['--direction'] || 'forwards',
+    duration: args['--duration'] || 1500,
+    file: args['--file'] || false,
+    iteration: args['--iteration'] || 1,
+    timing: args['--timing'] || 'linear'
+  }
+}
+
+let options = parseArgumentsIntoOptions(process.argv)
+
+if ( options.help ) {
+  console.group('\nUsage: ')
+  console.log('svgline [options]')
+  console.groupEnd()
+  console.group('\nOptions:')
+  console.log(`${'-f, --file'.padEnd(55)}Path to original file`)
+  console.log(`${'-w, --delay'.padEnd(55)}Delay before start of animation in ms`)
+  console.log(`${'-d, --destination'.padEnd(55)}Path to save generated file`)
+  console.log(`${'-p, --direction'.padEnd(55)}Animation direction`)
+  console.log(`${'-s, --duration'.padEnd(55)}Duration of the animation in ms`)
+  console.log(`${'-h, --help'.padEnd(55)}This screen`)
+  console.log(`${'-i, --iteration'.padEnd(55)}Number of iteration for animation`)
+  console.log(`${'-t, --timing'.padEnd(55)}Timing of the animation`)
+  console.groupEnd()
+  console.log('\nFor more information on the animation properties. Check it out here: https://www.w3schools.com/cssref/css3_pr_animation.asp\n')
+  return
+}
+
+if ( ! options.file ) {
+  console.error('--file option is required')
+  console.info('Use --file "pathToFile.svg" or -f "pathToFile.svg"')
+  return
+}
+
+const svg = fs.readFileSync(options.file)
+parse(svg.toString()).then((json) => {
+  const res = json
+  const styleIndex = res.children.findIndex((el) => el.name == 'style')
+  if ( styleIndex >= 0 ) {
+    res.children[styleIndex] = {
+      ...res.children[styleIndex],
+      children: [{
+        ...res.children[styleIndex].children[0],
+        value: `${res.children[styleIndex].children[0].value}@keyframes animateLine{to{stroke-dashoffset: 0;}}`
+      }]
+    }
+  } else {
+    res.children = [{
+      name: 'style',
+      type: 'element',
+      value: '',
+      attributes: { type: 'text/css' },
+      children: [{
+        name: '',
+        type: 'text',
+        value: '@keyframes animateLine{stroke-dashoffset: 0;}',
+        attributes: {},
+        children: []
+      }]
+    }, ...res.children]
+  }
+  loop(res)
+  fs.writeFile(options.destination, stringify(res), (err) => {
+    if ( err ) throw err(err)
+    console.log(`The new svg is saved under: ${options.destination}`);
+  })
+})
+
+function loop(el) {
+  let length = 0
+  switch (el.name) {
+    case 'style':
+      el.children = [{
+        ...el.children[0],
+        value: `${el.children[0].value}@keyframes animateLine{to{stroke-dashoffset: 0;}}`
+      }]
+      break
+    case 'circle':
+      length = 2 * Math.PI * el.attributes.r
+      el.attributes.style = `${el.attributes.style ? el.attributes.style + ';' : ''}stroke-dasharray:${length};stroke-dashoffset:${length};animation: animateLine ${options.duration}ms ${options.timing} ${options.delay}ms ${options.iteration} ${options.direction};`
+      break
+    case 'rect':
+      length = Math.ceil(el.attributes.width * 2 + el.attributes.height * 2)
+      el.attributes.style = `${el.attributes.style ? el.attributes.style + ';' : ''}stroke-dasharray:${length};stroke-dashoffset:${length};animation: animateLine ${options.duration}ms ${options.timing} ${options.delay}ms ${options.iteration} ${options.direction};`
+      break
+    case 'path':
+      const pathProperties = new path.svgPathProperties(el.attributes.d)
+      length = Math.ceil(pathProperties.getTotalLength())
+      el.attributes.style = `${el.attributes.style ? el.attributes.style + ';' : ''}stroke-dasharray:${length};stroke-dashoffset:${length};animation: animateLine ${options.duration}ms ${options.timing} ${options.delay}ms ${options.iteration} ${options.direction};`
+      break
+    case 'polygon':
+    case 'polyline':
+      const helper = el.attributes.points.split(' ')
+      let points = []
+      if ( el.attributes.points.indexOf(',') >= 0 ) {
+        for ( let i = 0; i < helper.length; i++ ) {
+          points[i] = helper[i].split(',')
+        }
+      } else {
+        for ( let i = 0; i < helper.length; i += 2 ) {
+          let arr = []
+          for ( let j = 0; j < 2; j++ ) {
+            arr.push(helper[i + j])
+          }
+          points.push(arr)
+        }
+      }
+
+      let res = ''
+      for( let i = 0; i < points.length; i++ ){
+        res += (i && "L" || "M") + points[i]
+      }
+      res = `${res}z`
+      const polyProperties = new path.svgPathProperties(res)
+      length = Math.ceil(polyProperties.getTotalLength())
+      el.attributes.style = `${el.attributes.style ? el.attributes.style + ';' : ''}stroke-dasharray:${length};stroke-dashoffset:${length};animation: animateLine ${options.duration}ms ${options.timing} ${options.delay}ms ${options.iteration} ${options.direction};`
+    break
+    case 'line':
+      const x1 = el.attributes.x1 || 0
+      const x2 = el.attributes.x2 || 0
+      const y1 = el.attributes.y1 || 0
+      const y2 = el.attributes.y2 || 0
+      length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+      el.attributes.style = `${el.attributes.style ? el.attributes.style + ';' : ''}stroke-dasharray:${length};stroke-dashoffset:${length};animation: animateLine ${options.duration}ms ${options.timing} ${options.delay}ms ${options.iteration} ${options.direction};`
+      break
+    default:
+      for ( let i = 0; i < el.children.length; i++ ) {
+        loop(el.children[i])
+      }
+      break
+  }
+}