npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@svg-drawing/animation

v5.0.1-beta.0

Published

svg drawing library.

Downloads

501

Readme

@svg-drawing/animation

npm version npm download

Install

npm

yarn add @svg-drawing/animation
# or
# npm i @svg-drawing/animation

How to use

Example code is here

import { SvgDrawing } from '@svg-drawing/core'
import { SvgAnimation } from '@svg-drawing/animation'
// 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.renderer.svg.parseSVGElement(document.getElementByID('targetSvg'))
  // draw.renderer.svg.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.svg.copy(draw.svg)

  // 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.renderer.el.replaceChild(anim.toElement(), anim.renderer.el.childNodes[0])
  console.log(anim.toElement()) // <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.restore()
}

// Download animtaion svg.
const download = document.getElementById('download')
download.onclick = () => {
  setupAnimation()
  anim.download()
}
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.toElement()
// Download animation svg element.
anim.download()

Animation example

First load any SVG into SvgAnimation.

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

anim.renderer.svg.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].attrs.stroke = colorfulList[fid % colorfulList.length]
      paths[i].attrs.fill = colorfulList[(fid + 4) % colorfulList.length]
    }
    return paths
  }
  {
    frames: colorfulList.length
  }
)