svg-drawing

  

!svg animation image

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

This is a demo.

Install

$3

``shell
yarn add svg-drawing


or

npm i svg-drawing

`

Example code is here

$3

`html





`

Here is an example for Html only.

How to use

$3

This example renders the drawing area.

`javascript
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.

`javascript
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(
''
)
draw.parseSVGElement(document.getElementByID('loadSVG'))
`

$3

This example is to animate what you drew with Svg Drawing

`js
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('')
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()) //
}

// 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()
}
`

`javascript
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.

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

anim.parseSVGString(

)
`

#### Shaking animation.

!shake animation svg

`js
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

`js
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
}
)

``