I was going through the following example in anime.js:
When you look at the javascript code that is used to manipulate the SVG, see below:
var svgAttributes = anime({
targets: '#svgAttributes polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
easing: 'easeInOutExpo'
});
The points attributes used here are quite unusual ::- points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',.
Now i wanted the polygon to transform into 3 dots so , i made the following SVG::-
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="51.444923mm"
height="9.6765842mm"
viewBox="0 0 182.28516 34.287109"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="dots.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="166.57587"
inkscape:cy="22.857941"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="705"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-105.71484,-435.21875)">
<path
id="path4146"
transform="translate(148,0)"
style="opacity:1;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 122.85742,435.21875 a 17.142857,17.142857 0 0 0 -17.14258,17.14258 17.142857,17.142857 0 0 0 17.14258,17.14453 A 17.142857,17.142857 0 0 0 140,452.36133 17.142857,17.142857 0 0 0 122.85742,435.21875 Z m -74,0 A 17.142857,17.142857 0 0 0 31.71484,452.36133 17.142857,17.142857 0 0 0 48.85742,469.50586 17.142857,17.142857 0 0 0 66,452.36133 17.142857,17.142857 0 0 0 48.85742,435.21875 Z m -74,34.28711 A 17.142857,17.142857 0 0 1 -42.28516,452.36328 17.142857,17.142857 0 0 1 -25.14258,435.21875 17.142857,17.142857 0 0 1 -8,452.36328 17.142857,17.142857 0 0 1 -25.14258,469.50586 Z"
inkscape:connector-curvature="0" />
</g>
</svg>
So basically the 3 dots are just the following points:
<path
id="path4146"
transform="translate(148,0)"
style="opacity:1;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 122.85742,435.21875 a 17.142857,17.142857 0 0 0 -17.14258,17.14258 17.142857,17.142857 0 0 0 17.14258,17.14453 A 17.142857,17.142857 0 0 0 140,452.36133 17.142857,17.142857 0 0 0 122.85742,435.21875 Z m -74,0 A 17.142857,17.142857 0 0 0 31.71484,452.36133 17.142857,17.142857 0 0 0 48.85742,469.50586 17.142857,17.142857 0 0 0 66,452.36133 17.142857,17.142857 0 0 0 48.85742,435.21875 Z m -74,34.28711 A 17.142857,17.142857 0 0 1 -42.28516,452.36328 17.142857,17.142857 0 0 1 -25.14258,435.21875 17.142857,17.142857 0 0 1 -8,452.36328 17.142857,17.142857 0 0 1 -25.14258,469.50586 Z"
inkscape:connector-curvature="0" />
So i copy paste this into my javascript code like so:
var svgAttributes = anime({
targets: '#svgAttributes polygon',
easing: 'easeInOutExpo',
duration: 2000,
points : 'm 122.85742,435.21875 a 17.142857,17.142857 0 0 0 -17.14258,17.14258 17.142857,17.142857 0 0 0 17.14258,17.14453 A 17.142857,17.142857 0 0 0 140,452.36133 17.142857,17.142857 0 0 0 122.85742,435.21875 Z m -74,0 A 17.142857,17.142857 0 0 0 31.71484,452.36133 17.142857,17.142857 0 0 0 48.85742,469.50586 17.142857,17.142857 0 0 0 66,452.36133 17.142857,17.142857 0 0 0 48.85742,435.21875 Z m -74,34.28711 A 17.142857,17.142857 0 0 1 -42.28516,452.36328 17.142857,17.142857 0 0 1 -25.14258,435.21875 17.142857,17.142857 0 0 1 -8,452.36328 17.142857,17.142857 0 0 1 -25.14258,469.50586 Z'
});
But this does't seem to work , Why ? i notice the points used in the demo use only numbers , where as the points i get using a svg software like inkscape give me points with alphabets in it too , see below:
Points used in anime.js:
points="64 128 8.574 96 8.573999999999998 32 64 0 119.426 32 119.426 96"
Points i get using a SVG software line inskscape:
points : 'm 122.85742,435.21875 a 17.142857,17.142857 0 0 0 -17.14258,17.14258 17.142857,17.142857 0 0 0 17.14258,17.14453 A 17.142857,17.142857 0 0 0 140,452.36133 17.142857,17.142857 0 0 0 122.85742,435.21875 Z m -74,0 A 17.142857,17.142857 0 0 0 31.71484,452.36133 17.142857,17.142857 0 0 0 48.85742,469.50586 17.142857,17.142857 0 0 0 66,452.36133 17.142857,17.142857 0 0 0 48.85742,435.21875 Z m -74,34.28711 A 17.142857,17.142857 0 0 1 -42.28516,452.36328 17.142857,17.142857 0 0 1 -25.14258,435.21875 17.142857,17.142857 0 0 1 -8,452.36328 17.142857,17.142857 0 0 1 -25.14258,469.50586 Z'
What am i doing wrong here and how to i get the polygon to transform into dots ? Also can somebody answer the broader question of how do i go about getting the correct points system like the one used in anime.js demos ?