A plugin for the svgjs library to enable path morphing / animation
The code of this plugin will move to the core when it's out of experimental status and shortened (to much space for one feature).
Install via npm:
$ npm install svg.js svg.pathmorphing.js
Or download the plugin from the github project: https://github.com/svgdotjs/svg.pathmorphing.js.git.
To use plugin directly in a web page include after the SVG.js library:
<!DOCTYPE HTML>
<html>
<head>
<script src="scripts/svg.js"></script>
<script src="scripts/svg.pathmorphing.js"></script>
</head>
<body>
<script type="text/javascript">
// ... your SVG script
</script>
</body>
</html>or as a module:
const SVG = require('svg.js')
require('svg.pathmorphing.js')
// ... your SVG scriptThe use is similar to all other animation explained in the svg.js docs:
var draw = SVG('drawing').viewbox(0, 0, 300, 300)
// create path
var path = draw.path('M150 0 L75 200 L225 200 Z')
// animate path
path.animate().plot('M100 0 H190 V90 H100 Z')Pretty straight forward, isn't it?
This module requires svg.js >= v2.1.1
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent