svg-drawing

v3.0.0

Published

3 years ago

svg drawing library.

Downloads

1,432

0High
0Medium
0Low

kameikazuto

svg drawing

svg-drawing

svg animation image

svg-drawing is svg based drawing library with lightweight, no dependencies.

This is a demo.

Install

npm

yarn add svg-drawing
# or
# npm i svg-drawing

Example code is here

CDN

<!-- Common JS-->
<script src="https://unpkg.com/[email protected]/lib/index.min.js"></script>

<!-- ES Modules -->
<script type="module">
  import {
    SvgDrawing,
    SvgAnimation
  } from 'https://unpkg.com/[email protected]/lib/index.esm.js'
  ...
</script>

Here is an example for Html only.

How to use

SvgDrawing

This example renders the drawing area.

import { SvgDrawing } from 'svg-drawing'

const drawel = document.createElement('div')

// Drawing area will be resized to fit the rendering area
el.setAttribute(
  'style',
  `
  border: 1px solid #ddd;
  width: 500px;
  height: 500px;
  `
)
document.body.appendChid(el)
new SvgDrawing(el)

SvgDrawing methods.

const draw = new SvgDrawing(el)

// change parameter.　There are other changeable parameters like fill, close, curve, etc.
draw.penColor = '#00b'
draw.penWidth = 10

// drawing deactivate
draw.off()
// drawing reactivate
draw.on()

// drawing all clear
draw.clear()
// undo drawing
draw.undo()

// Download image. Also available in SvgAnimation, Renderer
draw.download('svg')
draw.download('jpg')
draw.download('png')

// Load svg data. Only the path element.
// SVG exported by this library can be read.
draw.parseSVGString(
  '<svg width="200" height="200"><path fill="#f00" stroke="#00f" stroke-width="4" d="M 1 1 L 2 2 C 3 3 5 3 7 3 Z"></path></svg>'
)
draw.parseSVGElement(document.getElementByID('loadSVG'))

SvgAnimation

This example is to animate what you drew with Svg Drawing

import { SvgDrawing, SvgAnimation } from 'svg-drawing'

// Render drawing area. omitted the description
const draw = new SvgDrawing(el)

// Render animation
// It is resized to fit the rendering area as well as the SvgDrawing area.
const anim = new SvgAnimation(animEl, {
  ms: 20
})

// Example drawing animation.
// Callback function to set SvgAnimation
// Since the Path Object before animation is passed as an argument, it is converted and returned.

const setupAnimation = () => {
  // Copy drawwing data.
  // You can also use `parseSVGElement` or `parseSVGString`.
  // anim.parseSVGElement(document.getElementByID('targetSvg'))
  // draw.parseSVGString('<svg width="100" height="100"><path fill="#f00" stroke="#00f"stroke-width="4" d="M 10 10 L 20 20 C 30 30 50 30 70 30 Z"></path></svg>')
  anim.copy(draw)

  // Sets the animation callback function. `fid` is number of frame index.
  // It repeat times number of total commands. You can change the number of repeats as an option.
  anim.setAnimation(
    (paths, fid) => {
      let dispNum = fid
      const update = []
      for (let i = 0; i < paths.length; i += 1) {
        if (count < paths[i].commands.length) {
          paths[i].commands = paths[i].commands.slice(0, dispNum)
          update.push(paths[i])
          break
        }
        dispNum -= paths[i].commands.length
        update.push(paths[i])
      }
      return update
    }

    // The default value for the option. It works the same without writing.
    // This option cannot be used before version 2. When setting the number of frames, you need to have a global variable used in the animation function
    {
      frames: anim.paths.reduce((l, p) => l + p.commands.length, 0), // The number of frames in the animation.
      repeatCount: 'indefinete' // Set repeatCount attribute  to animate element
      ms: 20 // Set seconds per frame
    }
  )
}


// Animation Start
const start = document.getElementById('start')
start.onclick = () => {
  // load draw data
  loadSvgAnimation()

  // Method to animate Svg with JavaScript
  anim.start()

  // Or use SVGAnimateElement.
  anim.el.replaceChild(anim.toAnimationElement(), anim.el.childNodes[0])
  console.log(anim.toAnimationElement()) // <svg height="100" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M 10 10 L 20 20 C 30 30 50 30 70 30 Z" fill="#f00" id="t0" stroke="#00f" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><animateattributeName="d" dur="240ms" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" values="M 10 10 L 20 20 C 30 30 50 30 70 30 Z;M 10 10;M 10 10;M 10 10 L 20 20;M 10 10 L 20 20 C 30 30 50 30 70 30" /></path></svg>
}

// Animation Stop
const stop = document.getElementById('stop')
stop.onclick = () => {
  // Stop Animation.
  anim.stop()
  // Restore Svg before animation.
  anim.resotre()
}

// Download animtaion svg.
const download = document.getElementById('download')
download.onclick = () => {
  loadAnimation()
  anim.downloadAnimation()
}

const anim = new SvgAnimation(el)

// Property `ms` can be changed to set seconds per frame. `ms` is mili seconds.
// Can be changed during animation
anim.ms = 50

// Animation Start
anim.start()
// Animation Stop
anim.stop()
// Return to Svg before animation
anim.restore()

/**
 * Only version 3 or later is supported
 */
// Creata animation svg element.
anim.toAnimationElement()
// Download animation svg element.
anim.downloadAnimation()

Animation example

First load any SVG into SvgAnimation.

const anim = new SvgAnimation(el, { ms: 200 })

anim.parseSVGString(
  `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="802" height="202"><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 79.390625 66.94140625 C 79.16 66.72 79.01 66.4 78.22 65.85 C 77.43 65.3 76.4 64.58 75.46 64.18 C 74.52 63.78 74.48 64.2 73.52 63.84 C 72.56 63.48 71.8 62.89 70.67 62.39 C 69.54 61.89 69.92 61.7 67.89 61.33 C 65.86 60.96 62.74 60.77 60.51 60.54 C 58.28 60.31 58.52 60.27 56.76 60.2 C 55 60.13 53.46 60.2 51.71 60.2 C 49.96 60.2 50.24 59.96 48.02 60.2 C 45.8 60.44 42.64 60.72 40.6 61.38 C 38.56 62.04 39.03 62.58 37.8 63.52 C 36.57 64.46 36.16 64.41 34.47 66.1 C 32.78 67.79 30.64 70.15 29.33 71.96 C 28.02 73.77 28.51 73.65 27.92 75.13 C 27.33 76.61 26.92 77.67 26.38 79.36 C 25.84 81.05 25.69 81.63 25.24 83.57 C 24.79 85.51 24.36 86.59 24.14 89.06 C 23.92 91.53 24.14 93.83 24.14 95.94 C 24.14 98.05 23.78 98.32 24.14 99.62 C 24.5 100.92 24.87 101.28 25.92 102.46 C 26.97 103.64 26.55 103.54 29.37 105.51 C 32.19 107.48 36.84 110.34 40.01 112.32 C 43.18 114.3 43.25 114.2 45.22 115.4 C 47.19 116.6 47.82 117.03 49.86 118.32 C 51.9 119.61 52.67 119.82 55.4 121.85 C 58.13 123.88 60.55 125.54 63.53 128.46 C 66.51 131.38 68.41 133.97 70.32 136.44 C 72.23 138.91 72.11 139.02 73.09 140.8 C 74.07 142.58 74.34 142.63 75.23 145.32 C 76.12 148.01 77.02 151.72 77.56 154.24 C 78.1 156.76 77.86 156.56 77.93 157.93 C 78 159.3 78.07 159.93 77.93 161.11 C 77.79 162.29 77.9 162.63 77.24 163.84 C 76.58 165.05 76.99 164.91 74.65 167.16 C 72.31 169.41 68.08 173.08 65.52 175.11 C 62.96 177.14 63.41 176.56 61.83 177.31 C 60.25 178.06 60.39 178.21 57.6 178.84 C 54.81 179.47 50.76 180.15 47.86 180.48 C 44.96 180.81 45 180.56 43.1 180.48 C 41.2 180.4 40.03 180.53 38.34 180.08 C 36.65 179.63 36.04 179.12 34.64 178.23 C 33.24 177.34 33.03 177.28 31.33 175.65 C 29.63 174.02 27.5 171.78 26.15 170.1 C 24.8 168.42 24.99 168.05 24.56 167.25 C 24.13 166.45 24.1 166.44 23.98 166.1 C 23.86 165.76 24.03 165.68 23.98 165.57 C 23.93 165.46 23.77 165.57 23.72 165.57"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 101.09765625 74.73828125 C 101.1 75.01 101.1 75.27 101.1 76.1 C 101.1 76.93 101.1 77.27 101.1 78.88 C 101.1 80.49 100.68 76.86 101.1 84.14 C 101.52 91.42 102.4 105.74 103.2 115.29 C 104 124.84 104.28 126.5 105.09 131.9 C 105.9 137.3 106.62 138.49 107.23 142.29 C 107.84 146.09 107.43 146.37 108.16 150.9 C 108.89 155.43 110.04 161.18 110.9 164.94 C 111.76 168.7 111.94 168.01 112.48 169.7 C 113.02 171.39 113.23 172.1 113.59 173.38 C 113.95 174.66 113.9 175.03 114.27 176.11 C 114.64 177.19 115.15 178.16 115.43 178.8 C 115.71 179.44 115.63 179.11 115.68 179.32 C 115.73 179.53 115.68 179.77 115.68 179.83 C 115.68 179.89 115.68 179.75 115.68 179.6 C 115.68 179.45 115.68 179.45 115.68 179.07 C 115.68 178.69 115.68 178.34 115.68 177.68 C 115.68 177.02 115.6 177.12 115.68 175.79 C 115.76 174.46 115.56 173.3 116.08 171.03 C 116.6 168.76 116.1 169.75 118.27 164.46 C 120.44 159.17 124.23 150.79 126.93 144.57 C 129.63 138.35 129.82 137.83 131.75 133.34 C 133.68 128.85 134.64 126.6 136.57 122.1 C 138.5 117.6 139.51 115.02 141.39 110.83 C 143.27 106.64 144.15 105.24 145.96 101.17 C 147.77 97.1 149.35 93.16 150.46 90.46 C 151.57 87.76 151.13 88.59 151.51 87.68 C 151.89 86.77 152.15 86.31 152.37 85.9 C 152.59 85.49 152.56 85.7 152.61 85.65"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 251.87890625 79.625 C 251.88 79.08 252.02 78.13 251.88 76.89 C 251.74 75.65 251.53 74.59 251.2 73.41 C 250.87 72.23 250.8 71.95 250.25 70.99 C 249.7 70.03 249.35 69.23 248.47 68.59 C 247.59 67.95 247.95 68.47 245.83 67.79 C 243.71 67.11 240.22 65.85 237.88 65.18 C 235.54 64.51 235.85 64.76 234.14 64.45 C 232.43 64.14 231.47 63.98 229.32 63.65 C 227.17 63.32 226.35 62.97 223.37 62.8 C 220.39 62.63 216.94 62.8 214.41 62.8 C 211.88 62.8 212.48 62.66 210.73 62.8 C 208.98 62.94 207.64 62.96 205.68 63.5 C 203.72 64.04 203.2 64.29 200.95 65.48 C 198.7 66.67 196.01 68.38 194.41 69.47 C 192.81 70.56 193.86 69.95 192.93 70.95 C 192 71.95 190.72 73.27 189.74 74.45 C 188.76 75.63 188.98 74.68 188.01 76.85 C 187.04 79.02 185.87 82.44 184.91 85.32 C 183.95 88.2 183.81 88.63 183.21 91.27 C 182.61 93.91 182.43 95.46 181.89 98.5 C 181.35 101.54 181.35 100.7 180.5 106.45 C 179.65 112.2 178.21 122.72 177.64 127.25 C 177.07 131.78 177.64 126.94 177.64 129.09 C 177.64 131.24 177.64 135.73 177.64 137.98 C 177.64 140.23 177.64 137.72 177.64 140.36 C 177.64 143 177.41 148.17 177.64 151.18 C 177.87 154.19 178.25 153.81 178.77 155.39 C 179.29 156.97 179.65 157.5 180.25 159.08 C 180.85 160.66 180.81 161.24 181.77 163.28 C 182.73 165.32 184.09 167.85 185.05 169.29 C 186.01 170.73 185.88 170.12 186.55 170.48 C 187.22 170.84 187.59 170.98 188.42 171.1 C 189.25 171.22 188.23 171.36 190.72 171.1 C 193.21 170.84 197.54 170.59 200.87 169.82 C 204.2 169.05 204.47 168.49 207.35 167.23 C 210.23 165.97 212.69 164.83 215.28 163.5 C 217.87 162.17 217.44 162.67 220.29 160.58 C 223.14 158.49 227.18 155.15 229.54 153.06 C 231.9 150.97 231.19 151.45 232.1 150.13 C 233.01 148.81 233.48 147.52 234.09 146.45 C 234.7 145.38 234.95 145.17 235.16 144.79 C 235.37 144.41 235.16 144.63 235.16 144.53 C 235.16 144.43 235.16 144.33 235.16 144.28"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 205.50390625 122.51953125 C 205.55 122.52 204.94 122.52 205.73 122.52 C 206.52 122.52 207.76 122.52 209.46 122.52 C 211.16 122.52 212.09 122.52 214.23 122.52 C 216.37 122.52 217.15 122.52 220.18 122.52 C 223.21 122.52 226.71 122.52 229.39 122.52 C 232.07 122.52 232.11 122.52 233.58 122.52 C 235.05 122.52 235.75 122.52 236.76 122.52 C 237.77 122.52 238.05 122.52 238.64 122.52 C 239.23 122.52 239.45 122.52 239.71 122.52 C 239.97 122.52 239.91 122.47 239.96 122.52 C 240.01 122.57 239.96 122.66 239.96 122.75 C 239.96 122.84 239.96 122.84 239.96 122.99 C 239.96 123.14 239.96 123.3 239.96 123.51 C 239.96 123.72 239.96 123.68 239.96 124.02 C 239.96 124.36 239.8 123.56 239.96 125.21 C 240.12 126.86 240.41 129.65 240.74 132.26 C 241.07 134.87 241.25 135.75 241.59 138.26 C 241.93 140.77 242.19 142.55 242.45 144.82 C 242.71 147.09 242.72 146.86 242.88 149.63 C 243.04 152.4 243.19 156.11 243.27 158.65 C 243.35 161.19 243.27 161.28 243.27 162.31 C 243.27 163.34 243.27 163.29 243.27 163.82 C 243.27 164.35 243.27 164.62 243.27 164.95 C 243.27 165.28 243.27 165.21 243.27 165.47 C 243.27 165.73 243.27 166.09 243.27 166.24"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 306.5625 69.27734375 C 306.56 69.84 306.56 70.44 306.56 72.06 C 306.56 73.68 306.56 75.15 306.56 77.4 C 306.56 79.65 306.56 80.68 306.56 83.3 C 306.56 85.92 306.56 85.75 306.56 90.51 C 306.56 95.27 306.56 101.03 306.56 107.08 C 306.56 113.13 306.56 116.94 306.56 120.75 C 306.56 124.56 306.56 123.96 306.56 126.13 C 306.56 128.3 306.56 129.95 306.56 131.6 C 306.56 133.25 306.56 133.36 306.56 134.38 C 306.56 135.4 306.56 136.14 306.56 136.71 C 306.56 137.28 306.56 137.07 306.56 137.22 C 306.56 137.37 306.56 136.29 306.56 137.45 C 306.56 138.61 306.56 140.34 306.56 143.04 C 306.56 145.74 306.56 148.32 306.56 150.97 C 306.56 153.62 306.56 154.17 306.56 156.3 C 306.56 158.43 306.56 159.91 306.56 161.61 C 306.56 163.31 306.56 163.85 306.56 164.82 C 306.56 165.79 306.56 166.1 306.56 166.48 C 306.56 166.86 306.56 166.62 306.56 166.71 C 306.56 166.8 306.51 166.9 306.56 166.95 C 306.61 167 306.52 166.89 306.79 166.95 C 307.06 167.01 307.47 167.12 307.93 167.23 C 308.39 167.34 308.54 167.46 309.07 167.52 C 309.6 167.58 309.97 167.52 310.57 167.52 C 311.17 167.52 310.84 167.81 312.08 167.52 C 313.32 167.23 314.99 166.86 316.77 166.07 C 318.55 165.28 319.57 164.44 320.98 163.59 C 322.39 162.74 322.59 162.6 323.81 161.8 C 325.03 161 325.74 160.61 327.09 159.61 C 328.44 158.61 328.27 158.74 330.58 156.8 C 332.89 154.86 335.95 152.27 338.66 149.89 C 341.37 147.51 342.42 146.51 344.14 144.88 C 345.86 143.25 346.01 143.17 347.27 141.75 C 348.53 140.33 348.76 139.92 350.44 137.77 C 352.12 135.62 354.37 133.17 355.69 131 C 357.01 128.83 356.64 128.28 357.05 126.92 C 357.46 125.56 357.53 125.27 357.73 124.18 C 357.93 123.09 358 123.72 358.07 121.46 C 358.14 119.2 358.22 115.45 358.07 112.89 C 357.92 110.33 357.85 110.35 357.32 108.66 C 356.79 106.97 356.19 106.04 355.44 104.46 C 354.69 102.88 355.2 102.92 353.59 100.77 C 351.98 98.62 349.31 95.75 347.37 93.73 C 345.43 91.71 345.46 91.92 343.9 90.66 C 342.34 89.4 341.04 88.53 339.58 87.44 C 338.12 86.35 338.3 86.53 336.62 85.22 C 334.94 83.91 332.76 82.17 331.17 80.88 C 329.58 79.59 329.63 79.38 328.67 78.75 C 327.71 78.12 327.2 78.14 326.36 77.75 C 325.52 77.36 325.08 77.17 324.48 76.81 C 323.88 76.45 324.03 76.41 323.34 75.95 C 322.65 75.49 321.6 74.9 321.04 74.51 C 320.48 74.12 320.73 74.15 320.52 73.99 C 320.31 73.83 320.1 73.78 320 73.73"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 381.609375 167.1328125 C 381.61 166.65 381.61 166.17 381.61 164.75 C 381.61 163.33 381.61 162.9 381.61 160.05 C 381.61 157.2 381.61 155.19 381.61 150.52 C 381.61 145.85 381.61 141.19 381.61 136.7 C 381.61 132.21 381.61 131.69 381.61 128.08 C 381.61 124.47 381.61 121.81 381.61 118.63 C 381.61 115.45 381.61 116.36 381.61 112.18 C 381.61 108 381.61 101.93 381.61 97.73 C 381.61 93.53 381.61 93.67 381.61 91.16 C 381.61 88.65 381.61 87.57 381.61 85.19 C 381.61 82.81 381.61 81.58 381.61 79.28 C 381.61 76.98 381.61 75.36 381.61 73.69 C 381.61 72.02 381.61 71.53 381.61 70.93 C 381.61 70.33 381.56 70.73 381.61 70.68 C 381.66 70.63 381.74 70.68 381.84 70.68 C 381.94 70.68 381.75 70.68 382.1 70.68 C 382.45 70.68 382.02 70.76 383.61 70.68 C 385.2 70.6 387.77 70.53 390.05 70.29 C 392.33 70.05 393.29 69.73 395.03 69.49 C 396.77 69.25 396.81 69.17 398.76 69.09 C 400.71 69.01 402.47 68.97 404.77 69.09 C 407.07 69.21 408.79 69.34 410.26 69.71 C 411.73 70.08 411.41 70.31 412.11 70.95 C 412.81 71.59 413.1 72.12 413.76 72.9 C 414.42 73.68 414.38 73.42 415.41 74.86 C 416.44 76.3 417.99 78.51 418.89 80.09 C 419.79 81.67 419.48 81.6 419.9 82.78 C 420.32 83.96 420.62 84.7 420.98 85.98 C 421.34 87.26 421.34 87.27 421.69 89.19 C 422.04 91.11 422.52 94.14 422.73 95.59 C 422.94 97.04 422.73 96.09 422.73 96.42 C 422.73 96.75 422.73 96.78 422.73 97.25 C 422.73 97.72 422.92 98.07 422.73 98.75 C 422.54 99.43 422.85 99.59 421.79 100.63 C 420.73 101.67 418.85 103.03 417.43 103.97 C 416.01 104.91 415.8 104.91 414.71 105.32 C 413.62 105.73 413.45 105.6 411.98 106 C 410.51 106.4 408.79 106.98 407.38 107.3 C 405.97 107.62 405.72 107.49 404.93 107.61 C 404.14 107.73 404.1 107.83 403.42 107.89 C 402.74 107.95 402.29 107.76 401.54 107.89 C 400.79 108.02 400.64 108.16 399.66 108.52 C 398.68 108.88 397.4 109.42 396.63 109.71 C 395.86 110 396.06 109.88 395.79 109.99 C 395.52 110.1 395.33 110.2 395.27 110.25 C 395.21 110.3 395.4 110.25 395.5 110.25 C 395.6 110.25 395.54 110.25 395.76 110.25 C 395.98 110.25 395.31 109.36 396.58 110.25 C 397.85 111.14 400.14 112.79 402.09 114.7 C 404.04 116.61 404.21 117.34 406.33 119.8 C 408.45 122.26 410.65 124.57 412.68 127.02 C 414.71 129.47 415.05 130.15 416.46 132.07 C 417.87 133.99 417.8 133.94 419.75 136.61 C 421.7 139.28 424.46 142.92 426.19 145.42 C 427.92 147.92 427.6 147.8 428.39 149.09 C 429.18 150.38 429.6 151.01 430.12 151.87 C 430.64 152.73 430.67 152.8 431 153.37 C 431.33 153.94 431.63 154.44 431.79 154.71"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 447.47265625 170.03515625 C 447.47 169.85 447.47 171 447.47 169.09 C 447.47 167.18 447.47 166.17 447.47 160.51 C 447.47 154.85 446.53 150.91 447.47 140.81 C 448.41 130.71 450.69 118.72 452.19 110.01 C 453.69 101.3 453.77 102.17 454.97 97.26 C 456.17 92.35 457.04 89.69 458.18 85.45 C 459.32 81.21 458.92 81.45 460.67 76.04 C 462.42 70.63 465.27 63.03 466.94 58.41 C 468.61 53.79 468.14 54.99 469.03 52.94 C 469.92 50.89 470.65 49.78 471.41 48.18 C 472.17 46.58 472.2 46.01 472.82 44.96 C 473.44 43.91 474.12 43.34 474.5 42.93 C 474.88 42.52 474.69 42.88 474.74 42.93 C 474.79 42.98 474.69 42.96 474.74 43.16 C 474.79 43.36 474.6 42.95 475 43.93 C 475.4 44.91 476.14 46.77 476.72 48.07 C 477.3 49.37 476.95 47.78 477.91 50.45 C 478.87 53.12 480.27 56.85 481.54 61.41 C 482.81 65.97 482.54 64.93 484.25 73.26 C 485.96 81.59 488.39 94.75 490.09 103.06 C 491.79 111.37 491.94 110.98 492.76 114.82 C 493.58 118.66 493.48 118.74 494.17 122.27 C 494.86 125.8 495.36 127.81 496.2 132.48 C 497.04 137.15 497.78 141.81 498.38 145.62 C 498.98 149.43 498.9 149.51 499.22 151.54 C 499.54 153.57 499.69 154.27 499.98 155.77 C 500.27 157.27 500.47 158.13 500.66 159.06 C 500.85 159.99 500.89 160.08 500.95 160.4 C 501.01 160.72 500.9 160.56 500.95 160.66 C 501 160.76 501.16 160.75 501.21 160.9 C 501.26 161.05 501.21 160.55 501.21 161.41 C 501.21 162.27 501.21 164.16 501.21 165.22 C 501.21 166.28 501.21 166.19 501.21 166.72 C 501.21 167.25 501.21 167.53 501.21 167.86 C 501.21 168.19 501.21 168.23 501.21 168.38 C 501.21 168.53 501.21 168.58 501.21 168.63"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 457.3828125 130.0546875 C 457.65 130.05 457.99 130.05 458.75 130.05 C 459.51 130.05 459.51 130.05 461.16 130.05 C 462.81 130.05 465.28 130.05 466.99 130.05 C 468.7 130.05 468.8 130.05 469.72 130.05 C 470.64 130.05 470.83 130.05 471.59 130.05 C 472.35 130.05 472.8 130.05 473.52 130.05 C 474.24 130.05 474.5 130.05 475.18 130.05 C 475.86 130.05 476.49 130.05 476.94 130.05 C 477.39 130.05 477.23 130.05 477.45 130.05 C 477.67 130.05 477.75 130.05 478.02 130.05 C 478.29 130.05 478.58 130.05 478.79 130.05 C 479 130.05 479 130.05 479.05 130.05"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 514.0625 88.140625 C 514.06 88.68 514.06 89.76 514.06 90.85 C 514.06 91.94 514.06 92.12 514.06 93.58 C 514.06 95.04 514.06 96.29 514.06 98.14 C 514.06 99.99 514.06 100.84 514.06 102.84 C 514.06 104.84 513.83 101.45 514.06 108.16 C 514.29 114.87 514.86 129.58 515.19 136.39 C 515.52 143.2 515.21 138.39 515.71 142.22 C 516.21 146.05 517.1 152.17 517.68 155.56 C 518.26 158.95 518.02 156.62 518.59 159.18 C 519.16 161.74 520.03 166.18 520.53 168.36 C 521.03 170.54 520.93 169.62 521.1 170.07 C 521.27 170.52 521.26 170.49 521.36 170.59 C 521.46 170.69 521.54 170.54 521.59 170.59 C 521.64 170.64 521.54 170.78 521.59 170.83 C 521.64 170.88 521.78 170.88 521.83 170.83 C 521.88 170.78 521.83 170.81 521.83 170.6 C 521.83 170.39 521.77 170.23 521.83 169.76 C 521.89 169.29 521.91 169.19 522.11 168.25 C 522.31 167.31 521.66 168.01 522.82 165.04 C 523.98 162.07 526.12 157.61 527.93 153.41 C 529.74 149.21 529.9 149.58 531.88 144.02 C 533.86 138.46 536.26 130.78 537.83 125.6 C 539.4 120.42 538.86 121.82 539.75 118.13 C 540.64 114.44 541.64 109.82 542.28 107.16 C 542.92 104.5 542.75 105.42 542.93 104.85 C 543.11 104.28 543.08 104.43 543.18 104.33 C 543.28 104.23 543.33 104.33 543.42 104.33 C 543.51 104.33 543.6 104.28 543.65 104.33 C 543.7 104.38 543.65 104.47 543.65 104.57 C 543.65 104.67 543.54 104.43 543.65 104.83 C 543.76 105.23 544.03 105.97 544.21 106.59 C 544.39 107.21 542.87 103.87 544.55 107.95 C 546.23 112.03 550.12 120.68 552.6 127 C 555.08 133.32 555.48 135.26 556.95 139.54 C 558.42 143.82 558.35 143.72 559.95 148.41 C 561.55 153.1 563.61 159.16 564.97 162.99 C 566.33 166.82 566.32 166.52 566.73 167.55 C 567.14 168.58 566.84 167.78 567.01 168.12 C 567.18 168.46 567.36 168.88 567.58 169.26 C 567.8 169.64 567.99 169.97 568.09 170.03 C 568.19 170.09 568.09 170.14 568.09 169.56 C 568.09 168.98 567.92 169.42 568.09 167.14 C 568.26 164.86 568.69 160.84 568.96 158.18 C 569.23 155.52 568.6 158.25 569.45 153.85 C 570.3 149.45 571.31 143.83 573.19 136.16 C 575.07 128.49 577.53 120.35 578.84 115.49 C 580.15 110.63 579.17 113.92 579.74 111.87 C 580.31 109.82 581.16 107.01 581.68 105.22 C 582.2 103.43 582.1 103.6 582.34 102.91 C 582.58 102.22 582.79 102.21 582.9 101.77 C 583.01 101.33 582.9 100.99 582.9 100.73 C 582.9 100.47 582.9 100.69 582.9 100.48 C 582.9 100.27 582.84 100.28 582.9 99.66 C 582.96 99.04 583.08 98.95 583.21 97.37 C 583.34 95.79 583.48 93.27 583.55 91.76 C 583.62 90.25 583.55 90.27 583.55 89.83 C 583.55 89.39 583.55 89.38 583.55 89.57 C 583.55 89.76 583.55 90.54 583.55 90.78"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 592.1015625 60.16015625 C 592.51 60.16 593.17 60.16 594.17 60.16 C 595.17 60.16 596.06 60.16 597.12 60.16 C 598.18 60.16 598.07 60.16 599.45 60.16 C 600.83 60.16 602.65 60.16 604.02 60.16 C 605.39 60.16 604.93 60.16 606.32 60.16 C 607.71 60.16 609.92 60.16 610.96 60.16 C 612 60.16 611.32 60.16 611.54 60.16 C 611.76 60.16 611.89 60.16 612.04 60.16 C 612.19 60.16 612.19 60.16 612.28 60.16 C 612.37 60.16 612.36 60.16 612.51 60.16 C 612.66 60.16 612.87 60.16 613.03 60.16 C 613.19 60.16 613.09 60.16 613.29 60.16 C 613.49 60.16 613.79 60.16 614.05 60.16 C 614.31 60.16 613.94 60.16 614.57 60.16 C 615.2 60.16 616.38 60.1 617.21 60.16 C 618.04 60.22 618 60.34 618.72 60.47 C 619.44 60.6 620.02 60.67 620.79 60.79 C 621.56 60.91 622.05 61.01 622.56 61.07 C 623.07 61.13 623.13 61.07 623.33 61.07 C 623.53 61.07 623.52 61.02 623.57 61.07 C 623.62 61.12 623.57 61.25 623.57 61.3"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 606.26953125 61.88671875 C 606.27 62.45 606.27 62.57 606.27 64.66 C 606.27 66.75 606.27 69.76 606.27 72.36 C 606.27 74.96 606.27 75.42 606.27 77.67 C 606.27 79.92 606.27 81.12 606.27 83.62 C 606.27 86.12 606.27 87.43 606.27 90.18 C 606.27 92.93 606.27 92.46 606.27 97.35 C 606.27 102.24 606.27 110.04 606.27 114.63 C 606.27 119.22 606.27 117.26 606.27 120.29 C 606.27 123.32 606.27 126.88 606.27 129.77 C 606.27 132.66 606.27 131.72 606.27 134.75 C 606.27 137.78 606.27 142.25 606.27 144.93 C 606.27 147.61 606.27 147.36 606.27 148.17 C 606.27 148.98 606.27 148.72 606.27 148.99 C 606.27 149.26 606.27 149.35 606.27 149.51 C 606.27 149.67 606.27 149.67 606.27 149.77 C 606.27 149.87 606.27 149.91 606.27 150 C 606.27 150.09 606.27 150.14 606.27 150.23 C 606.27 150.32 606.27 149.96 606.27 150.47 C 606.27 150.98 606.27 151.46 606.27 152.77 C 606.27 154.08 606.27 155.23 606.27 157.03 C 606.27 158.83 606.27 160.16 606.27 161.75 C 606.27 163.34 606.27 163.85 606.27 164.96 C 606.27 166.07 606.27 166.87 606.27 167.29 C 606.27 167.71 606.32 167.2 606.27 167.05 C 606.22 166.9 606.06 166.63 606.01 166.53"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 592.19140625 166.53125 C 592.65 166.53 593.37 166.53 594.49 166.53 C 595.61 166.53 596.86 166.53 597.79 166.53 C 598.72 166.53 598.38 166.53 599.14 166.53 C 599.9 166.53 600.79 166.53 601.58 166.53 C 602.37 166.53 602.33 166.53 603.09 166.53 C 603.85 166.53 604.42 166.53 605.36 166.53 C 606.3 166.53 607.21 166.53 607.81 166.53 C 608.41 166.53 607.99 166.53 608.38 166.53 C 608.77 166.53 609.34 166.53 609.77 166.53 C 610.2 166.53 610.33 166.53 610.53 166.53 C 610.73 166.53 610.66 166.53 610.76 166.53 C 610.86 166.53 610.75 166.53 611.02 166.53 C 611.29 166.53 611.83 166.53 612.1 166.53 C 612.37 166.53 612.21 166.53 612.36 166.53 C 612.51 166.53 612.77 166.53 612.87 166.53"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 642.69140625 158.9921875 C 642.69 157.67 642.69 154.58 642.69 152.39 C 642.69 150.2 642.69 150.37 642.69 148.05 C 642.69 145.73 642.69 143.31 642.69 140.78 C 642.69 138.25 642.69 139.67 642.69 135.42 C 642.69 131.17 642.69 123.91 642.69 119.54 C 642.69 115.17 642.69 115.72 642.69 113.59 C 642.69 111.46 642.62 110.66 642.69 108.87 C 642.76 107.08 642.98 106.14 643.05 104.65 C 643.12 103.16 642.98 103.19 643.05 101.44 C 643.12 99.69 643.29 97.19 643.42 95.92 C 643.55 94.65 643.64 95.36 643.7 95.09 C 643.76 94.82 643.7 94.73 643.7 94.57 C 643.7 94.41 643.65 94.4 643.7 94.3 C 643.75 94.2 643.85 94.11 643.95 94.06 C 644.05 94.01 644.09 94.06 644.18 94.06 C 644.27 94.06 644.33 94.01 644.42 94.06 C 644.51 94.11 644.49 94.04 644.65 94.3 C 644.81 94.56 643.94 93.77 645.2 95.38 C 646.46 96.99 648.91 99.68 650.97 102.34 C 653.03 105 653.08 105.33 655.5 108.68 C 657.92 112.03 660.41 115.02 663.07 119.08 C 665.73 123.14 665.07 122.31 668.82 129 C 672.57 135.69 678.45 146.28 681.83 152.53 C 685.21 158.78 684.32 157.52 685.7 160.27 C 687.08 163.02 687.76 164.45 688.72 166.29 C 689.68 168.13 689.88 168.52 690.51 169.49 C 691.14 170.46 691.61 170.76 691.88 171.14 C 692.15 171.52 691.83 171.35 691.88 171.4 C 691.93 171.45 692.02 171.4 692.11 171.4 C 692.2 171.4 692.15 172.04 692.34 171.4 C 692.53 170.76 692.63 170.42 693.05 168.19 C 693.47 165.96 693.75 164.2 694.46 160.24 C 695.17 156.28 695.83 153.46 696.6 148.38 C 697.37 143.3 697.47 141.09 698.31 134.82 C 699.15 128.55 700.13 121.65 700.79 117.02 C 701.45 112.39 701.38 113.28 701.61 111.66 C 701.84 110.04 701.88 109.78 701.95 108.93 C 702.02 108.08 701.9 107.87 701.95 107.41 C 702 106.95 702.14 106.79 702.19 106.63"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 761.171875 89.75 C 761.17 89.66 761.17 89.92 761.17 89.28 C 761.17 88.64 761.17 87.48 761.17 86.55 C 761.17 85.62 761.17 85.55 761.17 84.61 C 761.17 83.67 761.38 82.92 761.17 81.84 C 760.96 80.76 761.63 80.9 760.13 79.22 C 758.63 77.54 755.91 75 753.67 73.45 C 751.43 71.9 751.1 72.17 748.92 71.47 C 746.74 70.77 745.59 70.31 742.79 69.93 C 739.99 69.55 737.05 69.63 734.93 69.56 C 732.81 69.49 733.12 69.56 732.2 69.56 C 731.28 69.56 731 69.5 730.32 69.56 C 729.64 69.62 729.35 69.49 728.81 69.85 C 728.27 70.21 728.34 70.37 727.61 71.35 C 726.88 72.33 725.91 73.59 725.16 74.73 C 724.41 75.87 724.3 76.11 723.84 77.03 C 723.38 77.95 723.43 77.76 722.87 79.33 C 722.31 80.9 721.69 82.18 721.02 84.86 C 720.35 87.54 719.81 90.43 719.51 92.74 C 719.21 95.05 719.58 94.95 719.51 96.42 C 719.44 97.89 719.21 98.18 719.14 100.11 C 719.07 102.04 719.14 103.55 719.14 106.06 C 719.14 108.57 718.77 108.4 719.14 112.65 C 719.51 116.9 720.04 122.22 720.97 127.29 C 721.9 132.36 723.06 135.25 723.79 137.98 C 724.52 140.71 724.08 139.41 724.64 140.95 C 725.2 142.49 725.64 143.17 726.61 145.68 C 727.58 148.19 728.24 150.45 729.48 153.5 C 730.72 156.55 731.77 158.86 732.79 160.91 C 733.81 162.96 733.98 162.87 734.57 163.74 C 735.16 164.61 735.21 164.63 735.76 165.24 C 736.31 165.85 736.55 166.09 737.32 166.8 C 738.09 167.51 738.92 168.23 739.6 168.8 C 740.28 169.37 740.28 169.37 740.74 169.65 C 741.2 169.93 741.42 170.11 741.88 170.22 C 742.34 170.33 742.29 170.16 743.02 170.22 C 743.75 170.28 744.74 170.45 745.55 170.51 C 746.36 170.57 746.46 170.63 747.06 170.51 C 747.66 170.39 747.73 170.81 748.57 169.93 C 749.41 169.05 749.33 169.05 751.25 166.12 C 753.17 163.19 756.39 158.3 758.16 155.29 C 759.93 152.28 759.3 152.87 760.08 151.07 C 760.86 149.27 761.55 147.69 762.08 146.27 C 762.61 144.85 762.43 144.76 762.73 143.96 C 763.03 143.16 763.39 142.62 763.56 142.29"></path><path stroke-width="5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M 740.796875 115.26953125 C 741.53 115.27 742.98 115.27 744.45 115.27 C 745.92 115.27 746.76 115.27 748.14 115.27 C 749.52 115.27 750.49 115.27 751.37 115.27 C 752.25 115.27 751.36 115.27 752.52 115.27 C 753.68 115.27 756.08 115.27 757.18 115.27 C 758.28 115.27 757.73 115.27 758 115.27 C 758.27 115.27 758.37 115.27 758.52 115.27 C 758.67 115.27 758.35 115.27 758.75 115.27 C 759.15 115.27 759.99 115.27 760.51 115.27 C 761.03 115.27 761.07 115.22 761.34 115.27 C 761.61 115.32 761.65 115.47 761.85 115.52 C 762.05 115.57 762.21 115.52 762.36 115.52 C 762.51 115.52 762.51 115.47 762.6 115.52 C 762.69 115.57 762.78 115.67 762.83 115.76 C 762.88 115.85 762.83 115.9 762.83 115.99 C 762.83 116.08 762.83 116.14 762.83 116.23 C 762.83 116.32 762.83 116.36 762.83 116.46 C 762.83 116.56 762.83 116.61 762.83 116.71 C 762.83 116.81 762.78 116.7 762.83 116.96 C 762.88 117.22 762.91 117.32 763.09 117.99 C 763.27 118.66 763.4 118.25 763.71 120.33 C 764.02 122.41 764.04 124.56 764.64 128.39 C 765.24 132.22 765.51 132.88 766.73 139.48 C 767.95 146.08 769.33 153.17 770.74 161.38 C 772.15 169.59 772.99 175.52 773.76 180.53 C 774.53 185.54 774.29 184.8 774.59 186.44 C 774.89 188.08 775.12 188.11 775.25 188.74 C 775.38 189.37 775.2 189.3 775.25 189.57 C 775.3 189.84 775.45 190.02 775.5 190.08 C 775.55 190.14 775.61 190.12 775.5 189.85 C 775.39 189.58 775.22 189.18 774.95 188.75 C 774.68 188.32 774.33 187.92 774.17 187.71"></path></svg>`
)

Shaking animation.

shake animation svg

anim.setAnimation(
  paths => {
    const range = 5
    const randomShaking = () => Math.random() * range - range / 2
    for (let i = 0; i < paths.length; i += 1) {
      paths[i].commands = paths[i].commands.map((c) => {
        c.point = c.point?.add(new Point(randomShaking(), randomShaking()))
        c.cl = c.cl?.add(new Point(randomShaking(), randomShaking()))
        c.cr = c.cr?.add(new Point(randomShaking(), randomShaking()))
        return c
      })
    }
    return paths
  }
  {
    frames: 3
  }
)

Colorful animation

shake animation svg

const colorfulList = [
  '#F44336',
  '#E91E63',
  '#9C27B0',
  '#673AB7',
  '#3F51B5',
  '#2196F3',
  '#00BCD4',
  '#009688',
  '#4CAF50',
  '#8BC34A',
  '#CDDC39',
  '#FFEB3B',
  '#FFC107',
  '#FF9800',
  '#FF5722'
]

anim.setAnimation(
  (paths, fid) => {
    for (let i = 0; i < paths.length; i += 1) {
      paths[i].stroke = colorfulList[fid % colorfulList.length]
      paths[i].fill = colorfulList[(fid + 4) % colorfulList.length]
    }
    return paths
  }
  {
    frames: colorfulList.length
  }
)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

svg-drawing

Install

npm

CDN

How to use

SvgDrawing

SvgAnimation

Animation example

Shaking animation.

Colorful animation