Bee SVG animation with SVG.js - javascript
As you can see in this codepen, there is a simple Bee SVG in a SVG canvas. Ideally I would like to achieve an animation where the Bee is buzzing around that canvas but for now I am simple trying to move it left to right. The library I am using is snap.svg
My basis is this codepen, but somehow I am not getting it to work.
The HTML:
<div class="wrapper">
<svg id='snappy' class='img-responsive' viewBox="0 0 1200 700">
<svg id="bee" x="100" y="100" xmlns="http://www.w3.org/2000/svg" width="194.874" height="214.536" viewBox="0 0 51.56 56.763" xmlns:v="https://vecta.io/nano"><g transform="matrix(.26458 0 0 .26458 -10.137 -3.944)"><path fill="#fff" d="M108.859 137.318c0-.324 1.515-2.606 5.195-3.131 15.73-2.247 29.851 28.808 28.898 30.272s-8.497 8.627-12.098 9.47-7.162 3.217-8.822 3.153-7.139.542-7.277-.674-2.669-15.399-2.669-20.033-.242-13.202-.894-14.606-2.333-4.451-2.333-4.451z"/><path d="M115.581 138.635c-3.242-3.606-9.84-6.911-18.839-4.642-8.959 2.259-24.573 13.377-24.026 31.944s10.65 29.76 13.653 32.217c1.802 1.475 3.643-1.105 6.233-3.991 0 0 .012-.012.016-.014.656-.73 3.949-4.837 5.688-6.711 3.894-4.197 8.938-15.764 8.938-15.764s.121 6.998-4.97 16.378c7.493-4.812 19.774-15.761 21.227-24.845 2.177-13.618-4.84-21.147-7.92-24.572z"/><path fill="#fc0" d="M142.953 137.434s15.938-.781 19.384-.001 17.452 2.778 26.807 17.822c6.952 11.178 5.257 29.734 3.236 35.164s-12.588 20.325-12.588 20.325l-18.78-11.803c-1.198-.405-9.44-6.392-10.494-8.12s-2.08-1.278-3.834-4.566-2.604-4.525-3.73-6.645c-3.598-6.759-5.988-3.201-7.124-3.201h-4.647s7.174-22.721 5.91-28.527-4.292-12.923-4.292-12.923z"/><path d="M85.567 157.957s-9.254-.959-19.146 4.846c-12.967 7.611-19.118 14.352-18.914 17.524s3.506 4.138 6.089.675 1.656-5.792 1.656-5.792 10.388-11.165 19.302-13.371c8.325-2.058 12.872-1.2 12.872-1.2l3.535-2.447z"/><path fill="#fff" d="M91.283 149.83c-4.109.951-7.615 5.01-8.191 14.743-.663 11.188-.379 15.107 5.461 11.739 7.098-4.094 11.098-12.776 10.375-20.203-.482-4.96-3.166-7.316-7.645-6.279z"/><path d="M82.887 142.196s-7.062-6.058-18.5-6.918c-14.993-1.129-23.886.911-25.525 3.636s.526 5.396 4.621 4.021 4.66-3.816 4.66-3.816 14.896-3.265 23.48 0c8.015 3.049 11.264 6.343 11.264 6.343h4.298zm28.306-6.894s12.977.547 17.062 10.158c9.112 21.432-13.789 31.615-13.789 31.615s18.582 4.889 26.41-2.433 14.39-20.897 5.05-34.432-24.13-13.539-34.733-4.908zm32.594 2.132s8.118-1.225 15.521 4.325c7.321 5.491 9.132 22.7 2.84 31.809-6.929 10.029-16.283 10.982-16.283 10.982l-4.166-7.069s12.689-5.993 14.452-16.489c1.766-10.514-2.513-20.688-12.364-23.558zm13.201-.342s15.168 2.447 17.655 16.897c2.5 14.514-3.343 24.952-8.627 28.904-10.062 7.525-18.28 5.037-18.28 5.037s7.009 7.176 9.488 8.738c.802.504 28.466-6.25 27.96-33.058-.198-10.489-3.961-26.677-28.196-26.518z"/><path d="M186.951 152.173s9.127 21.085 2.271 33.324c-7.053 12.591-15.904 15.479-21.584 15.115-4.598-.294-4.355-.536-4.355-.536s13.573 14.39 14.36 19.881.03 1.704 2.112-2.271 15.938-11.729 17.538-29.422c1.541-17.03-1.632-24.541-10.342-36.091zm-61.158 25.308s-.189 4.229-1.136 7.069 0 3.787 1.136 8.331 1.692 7.763-.764 9.467-2.076 2.65-2.455 1.704.343-1.391 1.118-3.441 1.497-3.754 0-6.973-4.242-6.059-3.58-10.448c.311-2.061.947-4.895.947-4.895l1.515-1.888zm8.9-1.072c.739 1.332 3.407 5.302 3.786 8.142s-1.515 4.542-1.894 5.868-2.225 4.735.024 7.765 3.194 6.248 3.194 9.845.947 5.491 1.894 3.408 2.272-1.521 0-7.008-2.343-5.346-2.875-7.689 4.059-6.222 4.13-9.3-2.58-9.137-3.148-11.031-2.271-4.733-2.271-4.733zm14.771 12.684c.567.566 5.518 9.09 3.987 16.474s-4.44 12.875-1.849 16.283 6.189 7.385 6.946 7.574 1.894-1.137 1.325-2.083-2.777-2.648-4.023-5.018c-1.343-2.557-2.811-5.207-1.106-8.236s3.048-7.012 3.048-9.66-.113-4.288-.303-7.696-2.745-7.639-2.745-7.639h-5.28zm-47.853-23.281c-1.666 4.811-5.958 7.689-9.585 6.43s-5.219-6.174-3.551-10.983 5.959-7.689 9.586-6.43 5.219 6.173 3.55 10.983z"/><circle fill="#fff" cx="90.466" cy="161.179" r="3.281"/></g><path d="M35.427 10.733c-7.454 5.988-11.371 20.431-11.371 20.945a106.44 106.44 0 0 1 1.077.619c1.077.621 2.482 2.378 2.482 2.378l1.029-.323-.001-.001c1.971-.633 5.014-1.7 8.184-3.161 5.113-2.358 14.732-10.106 14.733-18.447.001-7.975-8.706-7.975-16.133-2.009zm.449 18.393c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path opacity=".5" fill="#fff" d="M35.876 29.126c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path d="M27.319 1.349c-6.476 4.63-8.276 16.778-7.868 22.259.304 4.054.967 7.67 1.332 9.451.509-.064 1.032-.05 1.559.072.132.055.27.093.411.113 1.403.187 1.584.793 1.607.946l-.01.012c0 .012.007.017.013.023.262-.176.538-.393.769-.655 0 0 9.431-10.768 10.814-20.173 1.379-9.372-2.437-16.475-8.628-12.049zm6.629 11.871c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/><path opacity=".5" fill="#fff" d="M33.949 13.22c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/></svg>
</svg>
</div>
The CSS:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
svg#bee_svg {
width: 100%;
padding: 40px 75px 40px 10px;
overflow: visible;
}
#snappy {
background-color: wheat;
position: relative;
display: block;
border: solid 1px #000;
}
The JS:
// Html Viewbox Reference :viewBox="0 0 1200 700"
var s = Snap("#snappy");
var bee = $("#bee");
console.log(bee);
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW-110}, 4000, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, animate1);
}
animate1();
I am very much a beginner with SVGs and animating them, any help is much appreciated.
Ideally I would like to achieve an animation where the Bee is buzzing
around that canvas but for now I am simple trying to move it left to
right.
Live Demo
The first half of the task can be solved not only with the help of JS libraries, but also using smil SVG.
#1. Animation of horizontal and vertical movement of the bee
By adding and changing coordinates in the translate (X, Y) command, you can get a combination of horizontal and vertical movement of an object.
If you add several pairs of coordinates in the values attribute of the animation command animateTransform, you can get an animation of movement of any shape
<animateTransform attributeName="transform" type="translate" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
Please see full screen
<style>
#wing1 { opacity:0.6;}
#wing2 {opacity:0.75;}
</style>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<defs>
<linearGradient id="grad1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0.5" stop-color="dodgerblue"/>
<stop offset="1" stop-color="gold"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" />
<g id="bee" transform="translate(100,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#EAEAEA"/>
</g>
<animateTransform attributeName="transform" type="translate" dur="20s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
</svg>
#2. Bee wings animation
In order for the wing to rotate correctly (without horizontal displacements), it is necessary to choose the right center of rotation
Pay attention to the image of the bee and its wings.
The correct choice of the center of rotation will be the bottom, left corner of the rectangle surrounding the wing of the bee
In this case, the CSS rules would be:
transform-origin: bottom left;
transform-box: fill-box;
Below is the animation of the bee's wings:
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .2s infinite;
}
#keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .2s infinite;
}
#keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<rect width="100%" height="100%" fill="#39D594" />
<g id="bee" transform="scale(4) translate(100,50)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
</g>
</svg>
3. Combining Wing Move and Rotate Animations
--
For realism, add a picture of a blooming meadow
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
To implement pauses when a bee sits on a flower, the corresponding pairs of coordinates in
<animateTransform values =" ... 610,150; 610,150; 610,150; ... " are duplicated
Below is the complete application code:
Animation starts after click
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .15s infinite;
}
#keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .15s infinite;
}
#keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
<g id="bee" transform="translate(1400,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
<!-- Bee moving animation -->
<animateTransform attributeName="transform" type="translate" begin="svg1.click" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
<text x="200" y="30" font-size="24px" fill="white">Click me </text>
</svg>
Change it to the following and it all should work...
The main thing is using Snap("bee") rather than $("bee") and including an "easing" function in the animate parameters.
Docs for animate can be found here
var s = Snap("#snappy");
var bee = Snap("#bee");
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW}, 4000, mina.linear, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, mina.linear, animate1);
}
animate1();
Related
How to select inside of SVG path?
How can I change the inside color of the circle? Or how can I do animation while my cursor goes inside of the SVG circle?
I tried to use fill, fill-rule, and fill-opacity but it is not working. I want them to do animation when I hover inside of the circle
Here's the code: https://codesandbox.io/s/framer-motion-svg-uh3sbv?file=/src/components/MainSVG.js
This is the path i want to select inside:
<motion.g id="circles" whileHover={{ scale: 6.5, rotate: 360 }} fill={"red"}>
<motion.g id="circle6" fill={"red"} fillRule={"green"}>
<motion.path className="cls-3" d="M124,546.69h-.29v-1H124c.57,0,1.13,0,1.69,0l.06,1C125.18,546.68,124.6,546.69,124,546.69Zm-2.32-.09c-.67-.05-1.35-.12-2-.22l.15-1c.64.09,1.3.17,2,.22Zm6.09-.14-.13-1c.64-.08,1.29-.18,1.94-.31l.2,1C129.12,546.26,128.44,546.37,127.78,546.46ZM117.67,546c-.66-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.49Zm14.1-.34-.27-1c.64-.17,1.27-.36,1.88-.58l.33,1C133.08,545.29,132.42,545.49,131.77,545.67Zm-18-.8c-.63-.23-1.27-.49-1.89-.77l.42-.91c.59.27,1.2.52,1.82.75Zm21.83-.53-.39-.92c.6-.26,1.2-.54,1.78-.83l.45.89C136.84,543.78,136.22,544.07,135.6,544.34Zm-25.54-1.14c-.6-.31-1.19-.66-1.76-1l.53-.84c.55.34,1.12.67,1.7,1Zm29.16-.71-.51-.86c.56-.33,1.11-.69,1.64-1.06l.58.82C140.38,541.77,139.8,542.14,139.22,542.49ZM106.61,541c-.54-.39-1.08-.81-1.6-1.25l.64-.77c.51.43,1,.83,1.55,1.21Zm35.94-.87-.62-.78c.5-.41,1-.85,1.48-1.29l.68.74C143.6,539.29,143.08,539.74,142.55,540.17Zm-39.05-1.74c-.48-.46-1-.95-1.42-1.46l.74-.67c.44.49.9,1,1.37,1.41Zm42-1-.73-.69c.45-.48.89-1,1.3-1.47l.77.63C146.45,536.4,146,536.91,145.54,537.41Zm-44.77-2c-.42-.53-.82-1.08-1.21-1.64l.83-.56c.37.54.76,1.07,1.16,1.58Zm47.35-1.15-.82-.58c.38-.54.75-1.09,1.09-1.64l.85.52C148.89,533.14,148.51,533.71,148.12,534.27Zm-49.64-2.2c-.34-.58-.67-1.19-1-1.79l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.78l.92.41C150.86,529.58,150.56,530.2,150.25,530.8Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.33c.22-.62.42-1.25.6-1.88l1,.28C152.32,525.78,152.11,526.43,151.88,527.07Zm-56.51-2.49c-.17-.65-.32-1.32-.44-2l1-.18c.12.64.27,1.29.43,1.92ZM153,523.16l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,521.83,153.12,522.5,153,523.16Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.31.17,2Zm58.91-1.44-1-.07c.05-.65.07-1.31.07-2h1C153.6,517.78,153.58,518.46,153.53,519.14Zm-58.1-2.6-1,0c0-.67,0-1.35.1-2l1,.09C95.47,515.23,95.44,515.89,95.43,516.54Zm57.16-.28c0-.65-.06-1.31-.12-2l1-.1c.07.67.11,1.36.13,2Zm-56.82-3.63-1-.15c.1-.67.23-1.34.38-2l1,.22C96,511.34,95.87,512,95.77,512.63Zm56.44-.28c-.11-.64-.24-1.29-.39-1.92l1-.23c.16.65.29,1.32.41,2ZM96.64,508.8l-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,507.55,96.83,508.18,96.64,508.8Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.36c.25.63.48,1.27.68,1.92ZM98,505.13l-.91-.42c.29-.61.59-1.22.92-1.82l.88.48C98.61,504,98.31,504.54,98,505.13Zm51.82-.25c-.27-.59-.58-1.18-.9-1.74l.88-.49c.33.58.64,1.19.93,1.8Zm-49.93-3.2-.84-.54c.37-.57.76-1.13,1.16-1.67l.8.6C100.66,500.59,100.29,501.13,99.93,501.68Zm48-.22c-.35-.55-.73-1.09-1.13-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.67-2.93-.76-.65q.66-.76,1.38-1.5l.71.7C103.14,497.55,102.69,498,102.27,498.53Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.7c.48.48.95,1,1.39,1.48ZM105,495.73l-.66-.75c.51-.45,1-.89,1.57-1.3l.61.79C106,494.87,105.52,495.29,105,495.73Zm37.78-.18c-.49-.43-1-.84-1.53-1.24l.61-.8c.54.41,1.07.85,1.58,1.29Zm-34.67-2.23-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.87C109.24,492.61,108.68,493,108.13,493.32Zm31.54-.14c-.55-.36-1.11-.7-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06Zm-28.14-1.81-.43-.9c.61-.3,1.23-.57,1.85-.82l.38.92C112.73,490.82,112.12,491.08,111.53,491.37Zm24.71-.12c-.58-.28-1.19-.54-1.8-.78l.36-.93c.63.25,1.26.52,1.87.81Zm-21.07-1.35-.31-.95c.64-.2,1.3-.39,2-.56l.24,1C116.43,489.52,115.79,489.7,115.17,489.9Zm17.41-.08c-.63-.2-1.26-.37-1.89-.52l.23-1c.65.16,1.31.34,2,.54ZM119,489l-.17-1c.66-.12,1.34-.22,2-.29l.11,1C120.28,488.75,119.62,488.84,119,489Zm9.78-.05c-.65-.1-1.31-.19-1.95-.25l.1-1c.66.07,1.34.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,488.5,123.54,488.51,122.89,488.53Z" transform="translate(-79.36 -47.97)"/>
</motion.g>
<motion.g id="circle5">
<motion.path className="cls-3" d="M124,465h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,465,124.6,465,124,465Zm-2.32-.09c-.67-.06-1.35-.13-2-.23l.15-1c.64.1,1.3.17,2,.22Zm6.09-.15-.13-1c.64-.08,1.29-.19,1.94-.32l.2,1C129.12,464.58,128.44,464.69,127.78,464.77Zm-10.11-.44c-.66-.15-1.32-.32-2-.51l.28-1c.63.19,1.27.35,1.9.49Zm14.1-.35-.27-1c.64-.17,1.27-.36,1.88-.57l.33.94C133.08,463.6,132.42,463.8,131.77,464Zm-18-.79c-.63-.24-1.27-.5-1.89-.78l.42-.91c.59.27,1.2.52,1.82.75Zm21.83-.54-.39-.92c.6-.26,1.2-.54,1.78-.83l.45.89C136.84,462.1,136.22,462.39,135.6,462.65Zm-25.54-1.13c-.6-.32-1.19-.67-1.76-1l.53-.85c.55.34,1.12.68,1.7,1Zm29.16-.72-.51-.85c.56-.34,1.11-.7,1.64-1.07l.58.82C140.38,460.08,139.8,460.45,139.22,460.8Zm-32.61-1.44c-.54-.4-1.08-.82-1.6-1.26l.64-.76c.51.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.41,1-.84,1.48-1.28l.68.73C143.6,457.61,143.08,458.05,142.55,458.48Zm-39.05-1.74c-.48-.46-1-.95-1.42-1.46l.74-.67c.44.49.9,1,1.37,1.41Zm42-1-.73-.69c.45-.47.89-1,1.3-1.47l.77.63C146.45,454.71,146,455.23,145.54,455.72Zm-44.77-2c-.42-.53-.82-1.08-1.21-1.63l.83-.57c.37.54.76,1.07,1.16,1.58Zm47.35-1.15-.82-.58c.38-.54.75-1.09,1.09-1.64l.85.52C148.89,451.46,148.51,452,148.12,452.58Zm-49.64-2.2c-.34-.58-.67-1.18-1-1.79l.89-.44c.29.58.61,1.16.94,1.72Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.77l.92.4C150.86,447.89,150.56,448.51,150.25,449.11Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.35-.94-.34c.22-.62.42-1.25.6-1.87l1,.27C152.32,444.09,152.11,444.75,151.88,445.39Zm-56.51-2.5c-.17-.65-.32-1.32-.44-2l1-.19c.12.64.27,1.29.43,1.92ZM153,441.47l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,440.14,153.12,440.82,153,441.47ZM94.62,438.9c-.08-.68-.13-1.36-.16-2l1-.05c0,.65.09,1.31.17,2Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,436.09,153.58,436.78,153.53,437.45Zm-58.1-2.59-1,0c0-.68,0-1.36.1-2l1,.08C95.47,433.54,95.44,434.2,95.43,434.86Zm57.16-.29c0-.65-.06-1.31-.12-2l1-.09c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.15c.1-.67.23-1.34.38-2l1,.23C96,429.65,95.87,430.3,95.77,430.94Zm56.44-.27c-.11-.65-.24-1.3-.39-1.93l1-.23c.16.65.29,1.33.41,2Zm-55.57-3.55-1-.29c.19-.65.41-1.3.65-1.93l.94.35C97,425.87,96.83,426.49,96.64,427.12Zm54.66-.27c-.2-.62-.42-1.25-.66-1.86l.93-.36c.25.63.48,1.27.68,1.92ZM98,423.44l-.91-.42c.29-.61.59-1.22.92-1.82l.88.49C98.61,422.26,98.31,422.85,98,423.44Zm51.82-.25c-.27-.59-.58-1.17-.9-1.74l.88-.49c.33.59.64,1.19.93,1.81ZM99.93,420l-.84-.55c.37-.57.76-1.13,1.16-1.67l.8.6C100.66,418.9,100.29,419.44,99.93,420Zm48-.23c-.35-.54-.73-1.08-1.13-1.6l.8-.61c.41.54.8,1.1,1.17,1.66Zm-45.67-2.93-.76-.65c.44-.5.9-1,1.38-1.5l.71.7C103.14,415.86,102.69,416.35,102.27,416.84Zm43.3-.2c-.42-.49-.87-1-1.34-1.43l.71-.71c.48.48.95,1,1.39,1.49ZM105,414l-.66-.75c.51-.45,1-.89,1.57-1.3l.61.79C106,413.18,105.52,413.6,105,414Zm37.78-.18c-.49-.42-1-.84-1.53-1.24l.61-.79c.54.41,1.07.84,1.58,1.28Zm-34.67-2.22-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.86C109.24,410.92,108.68,411.27,108.13,411.64Zm31.54-.15q-.82-.54-1.68-1l.49-.87q.89.5,1.74,1Zm-28.14-1.81-.43-.9c.61-.29,1.23-.57,1.85-.82l.38.93C112.73,409.13,112.12,409.4,111.53,409.68Zm24.71-.11c-.58-.28-1.19-.55-1.8-.79l.36-.93c.63.25,1.26.52,1.87.81Zm-21.07-1.35-.31-1c.64-.21,1.3-.4,2-.57l.24,1C116.43,407.83,115.79,408,115.17,408.22Zm17.41-.09c-.63-.2-1.26-.37-1.89-.52l.23-1c.65.15,1.31.33,2,.54Zm-13.6-.86-.17-1c.66-.12,1.34-.21,2-.28l.11,1C120.28,407.06,119.62,407.15,119,407.27Zm9.78,0c-.65-.11-1.31-.2-1.95-.26l.1-1c.66.07,1.34.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,406.82,123.54,406.82,122.89,406.85Z" transform="translate(-79.36 -47.97)"/>
</motion.g>
<motion.g id="circle4">
<motion.path className="cls-3" d="M124,383.32h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,383.3,124.6,383.32,124,383.32Zm-2.32-.09c-.67-.05-1.35-.13-2-.23l.15-1c.64.1,1.3.17,2,.22Zm6.09-.15-.13-1c.64-.08,1.29-.19,1.94-.31l.2,1C129.12,382.89,128.44,383,127.78,383.08Zm-10.11-.44c-.66-.15-1.32-.31-2-.5l.28-1c.63.18,1.27.34,1.9.48Zm14.1-.35-.27-1c.64-.18,1.27-.37,1.88-.58l.33.94C133.08,381.91,132.42,382.11,131.77,382.29Zm-18-.79c-.63-.23-1.27-.49-1.89-.77l.42-.91c.59.26,1.2.51,1.82.74ZM135.6,381l-.39-.92c.6-.25,1.2-.53,1.78-.83l.45.89C136.84,380.41,136.22,380.7,135.6,381Zm-25.54-1.13c-.6-.32-1.19-.66-1.76-1l.53-.85c.55.35,1.12.68,1.7,1Zm29.16-.71-.51-.86c.56-.34,1.11-.7,1.64-1.07l.58.82C140.38,378.4,139.8,378.77,139.22,379.12Zm-32.61-1.45c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.51.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.41,1-.84,1.48-1.28l.68.73C143.6,375.92,143.08,376.37,142.55,376.79Zm-39.05-1.73c-.48-.47-1-1-1.42-1.46l.74-.67c.44.48.9,1,1.37,1.4Zm42-1-.73-.69c.45-.47.89-1,1.3-1.47l.77.64C146.45,373,146,373.54,145.54,374Zm-44.77-2c-.42-.52-.82-1.08-1.21-1.63l.83-.57c.37.54.76,1.07,1.16,1.59Zm47.35-1.15-.82-.58c.38-.53.75-1.08,1.09-1.64l.85.52C148.89,369.77,148.51,370.34,148.12,370.89Zm-49.64-2.2c-.34-.58-.67-1.18-1-1.79l.89-.44c.29.58.61,1.16.94,1.72Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.77l.92.4C150.86,366.21,150.56,366.82,150.25,367.42Zm-53.58-2.36c-.26-.62-.5-1.27-.72-1.91l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.34c.22-.62.42-1.25.6-1.87l1,.27C152.32,362.41,152.11,363.06,151.88,363.7Zm-56.51-2.5c-.17-.65-.32-1.32-.44-2l1-.19c.12.65.27,1.29.43,1.92ZM153,359.79l-1-.21c.13-.63.25-1.28.33-1.93l1,.13C153.23,358.45,153.12,359.13,153,359.79Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.64.09,1.3.17,1.95Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,354.4,153.58,355.09,153.53,355.76Zm-58.1-2.59-1,0c0-.68,0-1.36.1-2l1,.09C95.47,351.86,95.44,352.52,95.43,353.17Zm57.16-.28c0-.66-.06-1.32-.12-2l1-.1c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.16c.1-.66.23-1.33.38-2l1,.22C96,348,95.87,348.61,95.77,349.26Zm56.44-.28c-.11-.64-.24-1.29-.39-1.93l1-.23c.16.66.29,1.33.41,2Zm-55.57-3.55-1-.29c.19-.65.41-1.29.65-1.93l.94.36C97,344.18,96.83,344.81,96.64,345.43Zm54.66-.27c-.2-.62-.42-1.25-.66-1.85l.93-.37c.25.63.48,1.28.68,1.92ZM98,341.75l-.91-.42c.29-.61.59-1.22.92-1.81l.88.48C98.61,340.57,98.31,341.16,98,341.75Zm51.82-.24c-.27-.6-.58-1.18-.9-1.75l.88-.49c.33.59.64,1.2.93,1.81Zm-49.93-3.2-.84-.54c.37-.57.76-1.14,1.16-1.68l.8.6C100.66,337.21,100.29,337.76,99.93,338.31Zm48-.23c-.35-.54-.73-1.08-1.13-1.6l.8-.61c.41.54.8,1.1,1.17,1.67Zm-45.67-2.93-.76-.65c.44-.5.9-1,1.38-1.49l.71.69C103.14,334.18,102.69,334.67,102.27,335.15Zm43.3-.2c-.42-.49-.87-1-1.34-1.43l.71-.71c.48.48.95,1,1.39,1.49ZM105,332.35l-.66-.75c.51-.45,1-.89,1.57-1.29l.61.79C106,331.49,105.52,331.91,105,332.35Zm37.78-.17c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.58,1.28ZM108.13,330l-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.86C109.24,329.24,108.68,329.58,108.13,330Zm31.54-.15q-.82-.54-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06ZM111.53,328l-.43-.9c.61-.3,1.23-.58,1.85-.83l.38.93C112.73,327.44,112.12,327.71,111.53,328Zm24.71-.12c-.58-.28-1.19-.54-1.8-.78l.36-.93c.63.24,1.26.52,1.87.8Zm-21.07-1.35-.31-.95c.64-.21,1.3-.4,2-.56l.24,1C116.43,326.15,115.79,326.33,115.17,326.53Zm17.41-.09c-.63-.19-1.26-.37-1.89-.52l.23-1c.65.15,1.31.33,2,.54Zm-13.6-.86-.17-1c.66-.11,1.34-.21,2-.28l.11,1C120.28,325.37,119.62,325.46,119,325.58Zm9.78-.05c-.65-.11-1.31-.2-1.95-.26l.1-1c.66.06,1.34.15,2,.26Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,325.13,123.54,325.13,122.89,325.16Z" transform="translate(-79.36 -47.97)"/>
</motion.g>
<motion.g id="circle3">
<motion.path className="cls-3" d="M124,301.63h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,301.61,124.6,301.63,124,301.63Zm-2.32-.09c-.67-.05-1.35-.13-2-.22l.15-1c.64.09,1.3.16,2,.22Zm6.09-.15-.13-1c.64-.08,1.29-.18,1.94-.31l.2,1C129.12,301.2,128.44,301.31,127.78,301.39ZM117.67,301c-.66-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.48Zm14.1-.35-.27-1c.64-.17,1.27-.37,1.88-.58l.33.95C133.08,300.23,132.42,300.43,131.77,300.6Zm-18-.79c-.63-.23-1.27-.49-1.89-.77l.42-.91c.59.27,1.2.52,1.82.74Zm21.83-.54-.39-.92c.6-.25,1.2-.53,1.78-.83l.45.89C136.84,298.72,136.22,299,135.6,299.27Zm-25.54-1.13c-.6-.32-1.19-.66-1.76-1l.53-.85c.55.35,1.12.68,1.7,1Zm29.16-.71-.51-.86c.56-.34,1.11-.7,1.64-1.07l.58.82C140.38,296.71,139.8,297.08,139.22,297.43ZM106.61,296c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.5.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.41,1-.84,1.48-1.28l.68.73C143.6,294.23,143.08,294.68,142.55,295.1Zm-39.05-1.73c-.49-.47-1-1-1.42-1.46l.74-.67c.44.48.9,1,1.37,1.41Zm42-1-.73-.68c.45-.48.88-1,1.3-1.48l.77.64C146.45,291.34,146,291.85,145.54,292.34Zm-44.77-2c-.42-.53-.83-1.08-1.21-1.64l.83-.56c.37.53.76,1.07,1.16,1.58Zm47.35-1.16-.82-.58c.38-.53.75-1.08,1.09-1.63l.85.52C148.89,288.08,148.51,288.65,148.12,289.2ZM98.48,287c-.35-.58-.67-1.18-1-1.78l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.26-.89-.47c.3-.58.59-1.17.85-1.77l.92.4C150.86,284.52,150.56,285.14,150.25,285.74Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84ZM151.88,282l-.94-.34c.22-.61.42-1.24.6-1.87l1,.27C152.32,280.72,152.11,281.37,151.88,282Zm-56.51-2.49c-.17-.66-.32-1.32-.44-2l1-.18c.12.64.27,1.28.43,1.91ZM153,278.1l-1-.21c.13-.63.25-1.28.33-1.93l1,.13C153.23,276.77,153.12,277.44,153,278.1Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.3.17,1.95Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,272.72,153.58,273.4,153.53,274.07Zm-58.1-2.59-1,0c0-.67,0-1.36.1-2l1,.09C95.47,270.17,95.44,270.83,95.43,271.48Zm57.16-.28c0-.66-.06-1.32-.12-2l1-.1c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.16c.1-.66.23-1.33.38-2l1,.22C96,266.28,95.87,266.93,95.77,267.57Zm56.44-.28c-.11-.64-.24-1.29-.39-1.93l1-.23c.16.66.29,1.33.4,2Zm-55.57-3.55-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,262.49,96.83,263.12,96.64,263.74Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.37c.25.63.48,1.28.68,1.92ZM98,260.07l-.91-.42c.28-.61.59-1.23.92-1.82l.88.48C98.61,258.88,98.31,259.48,98,260.07Zm51.83-.25c-.28-.59-.59-1.18-.91-1.75l.88-.49c.33.59.64,1.2.93,1.81Zm-49.94-3.2-.84-.54c.36-.57.75-1.13,1.16-1.67l.8.59C100.66,255.53,100.28,256.07,99.93,256.62Zm48-.22c-.36-.55-.74-1.09-1.14-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.68-2.93-.76-.65c.44-.51.9-1,1.38-1.5l.71.7C103.14,252.49,102.7,253,102.27,253.47Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.71c.48.48.95,1,1.39,1.49ZM105,250.66l-.66-.74c.5-.45,1-.89,1.56-1.3l.62.79C106,249.81,105.51,250.23,105,250.66Zm37.78-.17c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.57,1.28Zm-34.67-2.23-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.87C109.23,247.55,108.67,247.9,108.13,248.26Zm31.54-.15c-.55-.35-1.11-.7-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06Zm-28.14-1.8-.43-.9c.61-.3,1.23-.58,1.85-.82l.38.92C112.73,245.75,112.12,246,111.53,246.31Zm24.71-.12c-.59-.28-1.2-.54-1.8-.78l.36-.93c.63.24,1.26.52,1.87.81Zm-21.07-1.35-.31-1c.65-.21,1.31-.4,2-.56l.24,1Q116.12,244.54,115.17,244.84Zm17.41-.08c-.63-.2-1.26-.38-1.89-.53l.23-1c.65.16,1.31.34,2,.54Zm-13.6-.87-.17-1c.66-.11,1.34-.21,2-.28l.11,1C120.28,243.68,119.62,243.78,119,243.89Zm9.78,0c-.64-.1-1.3-.19-1.95-.25l.1-1c.67.07,1.35.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,243.44,123.54,243.45,122.89,243.47Z" transform="translate(-79.36 -47.97)"/>
</motion.g>
<motion.g id="circle2">
<motion.path className="cls-3" d="M124,218.8h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,218.79,124.6,218.8,124,218.8Zm-2.32-.09c-.68-.05-1.36-.13-2-.22l.15-1c.64.09,1.29.16,2,.22Zm6.09-.15-.13-1c.65-.08,1.3-.19,1.94-.31l.2,1C129.12,218.37,128.45,218.48,127.78,218.56Zm-10.11-.44c-.65-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.48Zm14.1-.35-.27-1c.63-.17,1.26-.37,1.88-.58l.33,1C133.07,217.4,132.42,217.6,131.77,217.77Zm-18-.79c-.63-.23-1.26-.49-1.88-.77l.4-.91c.61.27,1.22.52,1.83.74Zm21.83-.54-.39-.92c.6-.25,1.2-.53,1.78-.83l.45.89C136.84,215.89,136.22,216.18,135.6,216.44Zm-25.54-1.13c-.6-.32-1.19-.66-1.76-1l.53-.85c.55.35,1.13.68,1.7,1Zm29.16-.71-.51-.86c.56-.33,1.11-.69,1.64-1.07l.58.82Q140.09,214.08,139.22,214.6Zm-32.61-1.45c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.5.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.4,1-.84,1.48-1.28l.68.74C143.6,211.4,143.08,211.85,142.55,212.27Zm-39.05-1.73c-.49-.47-1-1-1.42-1.46l.74-.67c.44.48.9,1,1.37,1.41Zm42-1-.73-.69c.45-.48.88-1,1.3-1.48l.77.64C146.45,208.51,146,209,145.54,209.52Zm-44.77-2c-.42-.53-.83-1.08-1.21-1.64l.83-.56c.37.53.76,1.07,1.16,1.58Zm47.35-1.15-.82-.59c.38-.53.75-1.08,1.09-1.63l.85.52C148.89,205.26,148.51,205.83,148.12,206.38Zm-49.64-2.21c-.35-.58-.67-1.18-1-1.78l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.26-.89-.46c.3-.59.59-1.18.85-1.78l.92.4C150.86,201.69,150.56,202.31,150.25,202.91Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.34c.22-.61.42-1.24.6-1.87l1,.27C152.32,197.89,152.11,198.55,151.88,199.18Zm-56.51-2.49c-.17-.66-.32-1.32-.44-2l1-.18c.12.64.27,1.28.43,1.91ZM153,195.27l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,193.94,153.12,194.61,153,195.27Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.3.17,2Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,189.89,153.58,190.57,153.53,191.24Zm-58.1-2.59-1,0c0-.67,0-1.35.1-2l1,.09C95.47,187.34,95.44,188,95.43,188.65Zm57.16-.28c0-.66-.06-1.31-.12-2l1-.1c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.16c.1-.66.23-1.33.38-2l1,.22C96,183.45,95.87,184.1,95.77,184.74Zm56.44-.28c-.11-.64-.24-1.29-.39-1.92l1-.24c.16.66.29,1.33.4,2Zm-55.57-3.55-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,179.66,96.83,180.29,96.64,180.91Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.36c.25.62.48,1.27.68,1.91ZM98,177.24l-.91-.42c.28-.61.59-1.23.92-1.82l.88.48C98.61,176.06,98.31,176.65,98,177.24Zm51.83-.25c-.28-.59-.59-1.18-.91-1.75l.88-.48c.33.58.64,1.19.93,1.8Zm-49.94-3.2-.84-.54c.36-.57.75-1.13,1.16-1.67l.8.59C100.66,172.7,100.28,173.24,99.93,173.79Zm48-.22c-.36-.55-.74-1.09-1.14-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.68-2.93-.76-.65c.44-.51.9-1,1.38-1.5l.71.7C103.14,169.66,102.7,170.14,102.27,170.64Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.71c.48.48.95,1,1.39,1.49ZM105,167.83l-.66-.74c.5-.45,1-.89,1.56-1.3l.62.79C106,167,105.51,167.4,105,167.83Zm37.78-.17c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.57,1.28Zm-34.67-2.23-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.87C109.23,164.72,108.67,165.07,108.13,165.43Zm31.54-.15c-.55-.35-1.11-.7-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06Zm-28.14-1.8-.43-.9c.61-.3,1.23-.57,1.85-.82l.38.92C112.73,162.92,112.12,163.19,111.53,163.48Zm24.71-.12c-.59-.28-1.2-.54-1.8-.78l.36-.93c.63.24,1.26.52,1.87.81ZM115.17,162l-.31-.95c.65-.21,1.31-.4,2-.56l.24,1Q116.12,161.71,115.17,162Zm17.41-.08c-.63-.2-1.26-.38-1.89-.53l.23-1c.65.16,1.31.34,2,.54Zm-13.6-.87-.17-1c.66-.12,1.34-.22,2-.29l.11,1C120.28,160.85,119.62,161,119,161.06Zm9.78-.05c-.64-.1-1.3-.19-1.95-.25l.1-1c.67.07,1.35.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,160.61,123.54,160.62,122.89,160.64Z" transform="translate(-79.36 -47.97)"/>
</motion.g>
<motion.g id="circle1"
whileHover={{ scale: 1.2, rotate: 90 }}>
<motion.path className="cls-3" d="M124,137h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,137,124.6,137,124,137Zm-2.32-.09c-.68,0-1.36-.12-2-.22l.15-1c.64.09,1.29.17,2,.22Zm6.09-.14-.13-1c.65-.08,1.3-.18,1.94-.31l.2,1Q128.79,136.6,127.78,136.74Zm-10.11-.45c-.65-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.49Zm14.1-.34-.27-1c.63-.17,1.26-.36,1.88-.58l.33.95C133.07,135.57,132.42,135.77,131.77,136Zm-18-.8c-.63-.23-1.26-.49-1.88-.77l.4-.91q.92.41,1.83.75Zm21.83-.53-.39-.92c.6-.26,1.2-.54,1.78-.84l.45.9C136.84,134.06,136.22,134.35,135.6,134.62Zm-25.54-1.13c-.6-.32-1.19-.67-1.76-1l.53-.84c.55.34,1.13.68,1.7,1Zm29.16-.72-.51-.86c.56-.33,1.11-.69,1.64-1.06l.58.82C140.37,132.05,139.8,132.42,139.22,132.77Zm-32.61-1.45c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.5.42,1,.83,1.55,1.21Zm35.94-.87-.62-.78c.5-.41,1-.85,1.48-1.29l.68.74C143.6,129.57,143.08,130,142.55,130.45Zm-39.05-1.74c-.49-.46-1-1-1.42-1.46l.74-.67c.44.49.9,1,1.37,1.41Zm42-1-.73-.69c.45-.47.88-1,1.3-1.47l.77.63C146.45,126.68,146,127.2,145.54,127.69Zm-44.77-2c-.42-.53-.83-1.08-1.21-1.64l.83-.56c.37.54.76,1.07,1.16,1.58Zm47.35-1.15-.82-.58c.38-.53.75-1.09,1.09-1.64l.85.52C148.89,123.43,148.51,124,148.12,124.55Zm-49.64-2.2c-.35-.59-.67-1.19-1-1.79l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.78l.92.41C150.86,119.86,150.56,120.48,150.25,121.08Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.33c.22-.62.42-1.25.6-1.87l1,.27C152.32,116.07,152.11,116.72,151.88,117.35Zm-56.51-2.49c-.17-.65-.32-1.32-.44-2l1-.18c.12.64.27,1.29.43,1.92ZM153,113.44l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,112.11,153.12,112.78,153,113.44Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.31.17,2Zm58.91-1.45-1-.06c.05-.65.07-1.31.07-2h1C153.6,108.06,153.58,108.74,153.53,109.41Zm-58.1-2.59-1,0c0-.67,0-1.35.1-2l1,.08C95.47,105.51,95.44,106.17,95.43,106.82Zm57.16-.28c0-.65-.06-1.31-.12-2l1-.1c.07.67.11,1.36.13,2Zm-56.82-3.63-1-.15c.1-.67.23-1.34.38-2l1,.22C96,101.62,95.87,102.27,95.77,102.91Zm56.44-.28c-.11-.64-.24-1.29-.39-1.92l1-.23c.16.65.29,1.32.41,2ZM96.64,99.08l-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,97.84,96.83,98.46,96.64,99.08Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.36c.25.63.48,1.27.68,1.91ZM98,95.41,97.13,95c.29-.61.59-1.22.92-1.82l.88.48C98.61,94.23,98.31,94.82,98,95.41Zm51.83-.25c-.28-.59-.59-1.18-.91-1.74l.88-.49c.33.58.64,1.19.93,1.8ZM99.93,92l-.84-.54c.36-.57.75-1.13,1.16-1.67l.8.6C100.66,90.87,100.28,91.41,99.93,92Zm48-.22c-.35-.54-.73-1.08-1.13-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.67-2.93-.76-.65c.44-.51.9-1,1.38-1.5l.71.7C103.14,87.83,102.7,88.32,102.27,88.81Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.7c.48.48.95,1,1.39,1.48ZM105,86l-.66-.75c.51-.45,1-.89,1.57-1.3l.61.79C106,85.15,105.51,85.57,105,86Zm37.78-.18c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.58,1.29ZM108.13,83.6l-.56-.83c.57-.37,1.15-.73,1.73-1.07l.5.87C109.24,82.89,108.67,83.24,108.13,83.6Zm31.54-.14q-.82-.54-1.68-1l.49-.88c.59.33,1.17.69,1.74,1.06Zm-28.14-1.81-.43-.9c.61-.3,1.23-.57,1.85-.82l.38.93C112.73,81.1,112.12,81.36,111.53,81.65Zm24.71-.12c-.59-.28-1.2-.54-1.8-.78l.36-.93c.63.25,1.26.52,1.87.81Zm-21.07-1.35-.31-1c.65-.21,1.31-.4,2-.56l.24,1Q116.12,79.88,115.17,80.18Zm17.41-.08c-.62-.2-1.26-.37-1.89-.52l.23-1c.65.16,1.31.34,2,.54ZM119,79.23l-.17-1c.66-.12,1.34-.22,2-.29l.11,1C120.28,79,119.62,79.12,119,79.23Zm9.78,0c-.64-.11-1.29-.2-1.95-.26l.1-1c.67.07,1.35.16,2,.27Zm-5.87-.38,0-1c.67,0,1.36,0,2,0l0,1C124.2,78.79,123.54,78.79,122.89,78.81Z" transform="translate(-79.36 -47.97)"/>
</motion.g>
</motion.g>
As commented, the current svg structure won't allow the desired pointer events, since all dashed strokes are converted to hardcoded objects - there is no inner fill area, that could be used for pointer events.
body{
background:#000;
color:#fff
}
svg{
width:20em;
overflow:visible;
margin:1em;
}
circle:hover,
path:hover{
fill:red;
}
<p>Pointer area is stroke - hover works on stroke</p>
<svg viewBox="0 0 60 60">
<path d="M29.5 59.1h-0.3v-1h0.3c0.6 0 1.1 0 1.7 0l0.1 1c-0.6 0-1.2 0-1.8 0zm-2.3-0.1c-0.7 0-1.4-0.1-2-0.2l0.1-1c0.6 0.1 1.3 0.2 2 0.2zm6.1-0.1l-0.1-1c0.6-0.1 1.3-0.2 1.9-0.3l0.2 1c-0.7 0.1-1.3 0.2-2 0.3zm-10.1-0.5c-0.7-0.1-1.3-0.3-2-0.5l0.3-1c0.6 0.2 1.3 0.4 1.9 0.5zm14.1-0.3l-0.3-1c0.6-0.2 1.3-0.4 1.9-0.6l0.3 1c-0.6 0.2-1.3 0.4-1.9 0.6zm-18-0.8c-0.6-0.2-1.3-0.5-1.9-0.8l0.4-0.9c0.6 0.3 1.2 0.5 1.8 0.8zm21.8-0.5l-0.4-0.9c0.6-0.3 1.2-0.5 1.8-0.8l0.5 0.9c-0.6 0.3-1.2 0.6-1.8 0.9zm-25.5-1.1c-0.6-0.3-1.2-0.7-1.8-1l0.5-0.8c0.6 0.3 1.1 0.7 1.7 1zm29.2-0.7l-0.5-0.9c0.6-0.3 1.1-0.7 1.6-1.1l0.6 0.8c-0.6 0.4-1.1 0.8-1.7 1.1zm-32.6-1.5c-0.5-0.4-1.1-0.8-1.6-1.3l0.6-0.8c0.5 0.4 1 0.8 1.6 1.2zm35.9-0.9l-0.6-0.8c0.5-0.4 1-0.9 1.5-1.3l0.7 0.7c-0.5 0.5-1 0.9-1.5 1.4zm-39-1.7c-0.5-0.5-1-1-1.4-1.5l0.7-0.7c0.4 0.5 0.9 1 1.4 1.4zm42-1l-0.7-0.7c0.5-0.5 0.9-1 1.3-1.5l0.8 0.6c-0.4 0.5-0.8 1.1-1.3 1.6zm-44.8-2c-0.4-0.5-0.8-1.1-1.2-1.6l0.8-0.6c0.4 0.5 0.8 1.1 1.2 1.6zm47.4-1.1l-0.8-0.6c0.4-0.5 0.8-1.1 1.1-1.6l0.9 0.5c-0.3 0.6-0.7 1.2-1.1 1.7zm-49.6-2.2c-0.3-0.6-0.7-1.2-1-1.8l0.9-0.5c0.3 0.6 0.6 1.2 0.9 1.7zm51.8-1.3l-0.9-0.5c0.3-0.6 0.6-1.2 0.9-1.8l0.9 0.4c-0.2 0.6-0.5 1.3-0.8 1.9zm-53.6-2.4c-0.3-0.6-0.5-1.3-0.7-1.9l1-0.3c0.2 0.6 0.4 1.2 0.7 1.8zm55.2-1.4l-0.9-0.3c0.2-0.6 0.4-1.3 0.6-1.9l1 0.3c-0.2 0.7-0.4 1.3-0.6 2zm-56.5-2.5c-0.2-0.6-0.3-1.3-0.4-2l1-0.2c0.1 0.6 0.3 1.3 0.4 1.9zm57.7-1.4l-1-0.2c0.1-0.6 0.3-1.3 0.3-1.9l1 0.1c-0.1 0.7-0.2 1.3-0.3 2zm-58.4-2.6c-0.1-0.7-0.1-1.4-0.2-2h1c0 0.6 0.1 1.3 0.2 2zm58.9-1.4l-1-0.1c0-0.6 0.1-1.3 0.1-2h1c0 0.7 0 1.4-0.1 2.1zm-58.1-2.6h-1c0-0.7 0-1.4 0.1-2l1 0.1c-0.1 0.6-0.1 1.3-0.1 1.9zm57.2-0.3c0-0.6-0.1-1.3-0.1-2l1-0.1c0.1 0.7 0.1 1.4 0.1 2zm-56.8-3.6l-1-0.1c0.1-0.7 0.2-1.3 0.4-2l1 0.2c-0.2 0.6-0.3 1.3-0.4 1.9zm56.4-0.3c-0.1-0.6-0.2-1.3-0.4-1.9l1-0.2c0.2 0.6 0.3 1.3 0.4 2zm-55.6-3.5l-1-0.3c0.2-0.6 0.4-1.3 0.6-1.9l0.9 0.4c-0.2 0.6-0.4 1.2-0.6 1.9zm54.7-0.3c-0.2-0.6-0.4-1.2-0.7-1.9l0.9-0.4c0.3 0.6 0.5 1.3 0.7 1.9zm-53.3-3.4l-0.9-0.4c0.3-0.6 0.6-1.2 0.9-1.8l0.9 0.5c-0.3 0.6-0.6 1.2-0.9 1.8zm51.8-0.3c-0.3-0.6-0.6-1.2-0.9-1.7l0.9-0.5c0.3 0.6 0.6 1.2 0.9 1.8zm-49.9-3.2l-0.8-0.5c0.4-0.6 0.8-1.1 1.2-1.7l0.8 0.6c-0.3 0.5-0.7 1.1-1.1 1.6zm48-0.2c-0.4-0.6-0.7-1.1-1.1-1.6l0.8-0.6c0.4 0.5 0.8 1.1 1.2 1.7zm-45.7-2.9l-0.8-0.7q0.7-0.8 1.4-1.5l0.7 0.7c-0.4 0.5-0.9 0.9-1.3 1.4zm43.3-0.2c-0.4-0.5-0.9-1-1.3-1.4l0.7-0.7c0.5 0.5 1 1 1.4 1.5zm-40.5-2.6l-0.7-0.8c0.5-0.5 1-0.9 1.6-1.3l0.6 0.8c-0.5 0.4-1 0.8-1.5 1.3zm37.8-0.2c-0.5-0.4-1-0.8-1.5-1.2l0.6-0.8c0.5 0.4 1.1 0.9 1.6 1.3zm-34.7-2.2l-0.6-0.8c0.6-0.4 1.2-0.7 1.7-1.1l0.5 0.9c-0.5 0.3-1.1 0.7-1.7 1zm31.5-0.1c-0.5-0.4-1.1-0.7-1.7-1l0.5-0.9c0.6 0.3 1.2 0.7 1.7 1.1zm-28.1-1.8l-0.4-0.9c0.6-0.3 1.2-0.6 1.9-0.8l0.4 0.9c-0.6 0.2-1.2 0.5-1.8 0.8zm24.7-0.1c-0.6-0.3-1.2-0.5-1.8-0.8l0.4-0.9c0.6 0.3 1.3 0.5 1.9 0.8zm-21.1-1.4l-0.3-1c0.6-0.2 1.3-0.4 2-0.6l0.2 1c-0.6 0.1-1.3 0.3-1.9 0.5zm17.4-0.1c-0.6-0.2-1.3-0.4-1.9-0.5l0.2-1c0.6 0.2 1.3 0.3 2 0.5zm-13.6-0.8l-0.2-1c0.7-0.1 1.3-0.2 2-0.3l0.1 1c-0.7 0-1.3 0.1-1.9 0.3zm9.8-0.1c-0.6-0.1-1.3-0.2-2-0.3l0.1-1c0.7 0.1 1.3 0.2 2 0.3zm-5.9-0.4v-1c0.7 0 1.4 0 2 0v1c-0.7-0.1-1.4-0.1-2-0.1z" fill="#cccccc" stroke="#000000" stroke-width="0" stroke-linecap="butt"></path>
</svg>
<p>Stroke via stroke-dasharray; Transparent fill - hover works</p>
<svg viewBox="0 0 60 60">
<circle cx="50%" cy="50%" r="50%" fill="transparent" stroke-dasharray="2 3" stroke-width="1" stroke="#ccc" />
</svg>
<p>No fill: hover doesn't work</p>
<svg viewBox="0 0 60 60">
<circle cx="50%" cy="50%" r="50%" fill="none" stroke-dasharray="2 3" stroke-width="1" stroke="#ccc" />
</svg>
I'm afraid refactoring the graphic is the only solution - Hopefully the original graphic files with dynamic/styled strokes still exists.
Javascript SVG place arrow on bezier [closed]
Closed. This question needs debugging details. It is not currently accepting answers. Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question. Closed 4 years ago. Improve this question I have a cubic bezier. And I don't know how to put an arrow in the middle of it. Example below: I want it to be like this, but with bezier. How can I do this. Note: I've tried textPaths, markers. But nothing helped.
You have two options: Position the marker(s), yourself, at the correct place Split the line into two paths. One up to the first marker, and one for the rest of the path. Then assign an end marker on each path.
#1 Solution
I thank #Paul LeBeau, who found a solution and below the implementation:
We make two patches: a straight line and a curve at the end of which
there will also be markers.
<path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" />
<path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0
0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/>
For accurate positioning of the marker, the following attributes are
used: refX="10", refY="5"
<svg width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<marker id="MarkerArrow" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="10" markerHeight="10">
<polyline points="0,0 10,5 0,10 3,5" fill="red"/>
</marker>
</defs>
<style>
#line_Path, #curve_Path {
fill:none;
stroke:red;
stroke-width:2;
marker-end:url(#MarkerArrow);
}
</style>
<path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" />
<path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0 0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/>
</svg>
#2 Solution
You can draw an arrow as an independent object
<polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>
And place it on the curve the required number of times with the help
of the command
<use xlink:href="#MarkerArrow" x="80" y="18"/>
<svg width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>
</defs>
<path d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1 5.4 0 6.8 2.9 6.9 6.8 0.4 22.6-0.8 45.9 0 66.6 0.2 4.2 2.6 6.5 6.6 6.6C129.1 103.1 180 102.2 180 102.2l0.7 0.5" style=" fill:none; stroke:red; stroke-width:2; "/>
<use xlink:href="#MarkerArrow" x="80" y="18"/>
<use xlink:href="#MarkerArrow" x="178" y="97"/>
</svg>
How to prepare SVG code from Inkscape for Angular JS / Angular Material app directive template
I forked a CodePen app by the Angular Material Team and am trying to replace their user avatar icon with an icon I made in Inkscape.
This is their code, in an app directive template field:
<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>
The code I see in Inkscape's XML editor or when opening the SVG file with Notepad++ is quite a bit different:
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
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="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="rb icon.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient4179"
osb:paint="solid">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop4181" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6394886"
inkscape:cx="-607.16873"
inkscape:cy="903.12934"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showborder="false"
showguides="false"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<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">
<circle
style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
id="path3336"
cx="-602.85712"
cy="69.505058"
r="151.42857" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4158"
width="193.80003"
height="144.85301"
x="-699.19604"
y="24.652056" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4162"
width="155.71428"
height="155.71428"
x="373.2374"
y="322.82352"
transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4173"
width="19.512196"
height="71.951218"
x="-682.92682"
y="-47.637794"
ry="9.7560978" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
x="-635.36584"
y="20.654888"
id="text4195"
sodipodi:linespacing="127%"><tspan
sodipodi:role="line"
id="tspan4197"
x="-635.36584"
y="20.654888"
style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-597.46344"
y="54.801228"
id="text4199"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4201"
x="-597.46344"
y="54.801228"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text>
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z"
id="rect4207"
inkscape:connector-curvature="0" />
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z"
id="rect4207-6"
inkscape:connector-curvature="0" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect4307"
width="47.575813"
height="54.895168"
x="-626.08392"
y="115.31452" />
</g>
</svg>
and when I try replacing the default user avatar SVG with mine it breaks the website. The web console says
Uncaught SyntaxError: Invalid or unexpected token.
Here's the directive with the original SVG:
app.directive('userAvatar', function() {
return {
replace: true,
template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
};
});
I've tried a dozen variations on this, but using a 1-line style where I insert only class="user-avatar" into the new XML here is what the updated directive looks like:
app.directive('userAvatar', function() {
return {
replace: true,
//template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
template: '<svg class="user-avatar" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" 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="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="rb icon.svg"> <defs id="defs4"> <linearGradient id="linearGradient4179" osb:paint="solid"> <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop4181" /> </linearGradient> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1.6394886" inkscape:cx="-607.16873" inkscape:cy="903.12934" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="false" showguides="false" inkscape:window-width="1536" inkscape:window-height="801" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" /> <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"> <circle style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" id="path3336" cx="-602.85712" cy="69.505058" r="151.42857" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4158" width="193.80003" height="144.85301" x="-699.19604" y="24.652056" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4162" width="155.71428" height="155.71428" x="373.2374" y="322.82352" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4173" width="19.512196" height="71.951218" x="-682.92682" y="-47.637794" ry="9.7560978" /> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;" x="-635.36584" y="20.654888" id="text4195" sodipodi:linespacing="127%"><tspan sodipodi:role="line" id="tspan4197" x="-635.36584" y="20.654888" style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="-597.46344" y="54.801228" id="text4199" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4201" x="-597.46344" y="54.801228" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z" id="rect4207" inkscape:connector-curvature="0" /> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z" id="rect4207-6" inkscape:connector-curvature="0" /> <rect style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none" id="rect4307" width="47.575813" height="54.895168" x="-626.08392" y="115.31452" /> </g> </svg>'
};
});
You can reproduce the error by replacing the original directive with the one above in the CodePen app.
Original: https://codepen.io/team/AngularMaterial/pen/mVxgbg
Broken: https://codepen.io/hack-r/pen/LRdVPN
It is tipical " ,' problem You have ' inside Your string representing svg, change all ' to " and it will work. First of them in svg is 'sans-serif, Normal'. Your code breaks because string starts on ' and ends on first ' which is inside svg string so next part of code has error syntax.
How can this path stroke set the opacity of the group behind it?
I have this code which shows my current output when the snippet is run. <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 300 300" viewBox="0 0 300 300" x="0px" y="0px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1"> <g fill-opacity=".2"> <path fill="#f79820" d="M 150 0 c 82.8 0 150 67.2 150 150 s -67.2 150 -150 150 S 0 232.8 0 150 S 67.2 0 150 0" /> <circle fill="#f5f4b7" cx="150" cy="150" r="141.9" /> <path fill="#f79820" d="M 135.7 103.3 c 3.5 18.3 4 19 7.8 19.2 c 3.8 0.2 10.4 -4.1 13.6 -12.1 c 3.1 -8 5 -20.2 7.8 -27.9 s 15.4 -29.6 18.7 -39.2 s 0.2 -19.2 -3.1 -23.6 c -3.3 -4.4 -10.7 -4.4 -23.5 -3.4 c -12.7 1 -33.4 -0.1 -40.8 3.4 c -8.4 3.9 -12.1 4.8 -8.9 15.5 C 110.2 45.9 132.2 84.9 135.7 103.3 Z" /> <path fill="#f79820" d="M 153.9 124.2 c -1.7 2.9 3.3 5.6 5.3 5.6 c 2 0 10.1 -2.9 23 -10.4 c 12.9 -7.5 49.9 -25.1 60.2 -35.2 c 10.2 -10 4.3 -22.8 0 -28.9 c -4.3 -6.1 -21 -22.8 -34.4 -29.7 c -13.4 -7 -16.7 1.2 -19.2 12.4 c -2.5 11.2 -12.1 31.1 -15.4 38.2 C 170 83.4 155.5 121.3 153.9 124.2 Z" /> <path fill="#f79820" d="M 213.5 108.7 c -23.7 12.8 -50.5 24.7 -50.4 27.2 c 0.1 3.1 11.1 6.5 27.4 9.9 c 16.4 3.4 29.1 2.5 44.6 9 c 15.5 6.5 36.7 9.9 45 -5.4 s 0.5 -47.6 -8.3 -58.1 c -8.8 -10.5 -10.9 -15.1 -25.6 -3.6 C 240.8 92 227.6 101.1 213.5 108.7 Z" /> <path fill="#f79820" d="M 283.6 167.2 c -2.2 -8.7 -11.1 1.4 -55.9 -8.5 c -44.8 -9.9 -60.7 -13.6 -63 -10.2 c -1.3 1.9 13.4 14.1 36 25.1 c 22.5 11 34.6 21.6 43.7 27.9 c 9.1 6.3 20.2 6.3 26.9 0 C 278.1 195.2 285.8 175.8 283.6 167.2 Z" /> <path fill="#f79820" d="M 226.6 194.7 c -16 -3.6 -35.4 -19 -42.1 -23.8 c -6.8 -4.8 -21.2 -17.1 -25.4 -13.3 c -2.6 2.4 -0.7 15.6 8.4 38.7 s 18.7 56.7 21.6 73.6 c 3 16.8 10.9 9.5 19 2.5 c 8.1 -7 26.4 -21.4 40 -30.7 c 13.6 -9.3 11.6 -19 10.1 -21.7 S 242.6 198.2 226.6 194.7 Z" /> <path fill="#f79820" d="M 157.9 178.9 c -4.1 -13.1 -5.2 -20.5 -9 -20.4 c -4.5 0.2 -9.1 18.7 -12.4 27.4 c -3.3 8.7 -12.7 52.3 -16.7 72.4 c -4 20 -1.8 25.8 15.2 26.7 s 36.7 4.9 42.8 -1 c 6.1 -5.9 5.3 -23.1 0 -44.5 C 172.5 217.9 161.9 192 157.9 178.9 Z" /> <path fill="#f79820" d="M 135.5 171.9 c 2.5 -9.2 3.2 -13.5 -2 -14.3 c -7.1 -1 -17.5 10.5 -25.3 22.1 S 77.5 213.4 63 228.7 c -14.5 15.3 -4 23.8 16 36.2 c 20 12.4 27.9 13.8 31.6 10.9 c 3.6 -2.9 6.6 -26.3 11.1 -43.8 C 126.1 214.4 133 181.1 135.5 171.9 Z" /> <path fill="#f79820" d="M 61.1 227.1 c 5.1 -6.8 32.2 -34.3 40 -44.8 c 7.8 -10.5 26.3 -28.2 27.9 -29.2 c 1.7 -1 -1.1 -4 -3.8 -6.8 c -2.1 -2.1 -2.8 -1.2 -11.1 0 c -8.3 1.2 -39 13.4 -53.4 17.7 c -14.4 4.2 -22.5 3.9 -31.1 7.5 c -8.6 3.6 -11.7 12.4 -1.7 26.8 c 10.1 14.4 6.3 18.9 13.6 28.9 C 48.9 237.1 56 233.9 61.1 227.1 Z" /> <path fill="#f79820" d="M 25.8 169.4 c 9.1 -1 41.5 -11.6 59.2 -18.9 c 17.7 -7.3 40.9 -11.4 40.7 -13.9 c -0.5 -5.6 -29.9 -17 -40.5 -22.6 c -10.6 -5.6 -25 -19.9 -35.4 -25.1 c -10.4 -5.3 -23.3 -4.8 -25.4 8.2 c -2.1 12.9 -8.8 27.9 -11.4 48 C 10.2 165.1 16.7 170.4 25.8 169.4 Z" /> <path fill="#f79820" d="M 54.5 88.3 c 16 5.4 37.5 19.7 43.1 24 c 5.6 4.2 31.2 20.9 35.2 17.5 c 3.4 -2.9 0.3 -21.1 -6.3 -31.8 c -6.6 -10.7 -9.1 -29.4 -14.5 -45.2 c -5.5 -15.8 -17.7 -28.4 -34 -18 s -33.4 24.8 -37.8 36 C 35.7 82 38.5 82.9 54.5 88.3 Z" /> </g> <svg style="display: block; width: 100%;" viewBox="0 0 100 100"> <path stroke="#f79820" stroke-opacity=".4" fill-opacity="0" style="stroke-dasharray: 157.698, 157.698; stroke-dashoffset: 55;" stroke-width="49.81" d="M 50,50 m 0,-25.095 a 25.095,25.095 0 1 1 0,50.19 a 25.095,25.095 0 1 1 0,-50.19" /> </svg> </svg> My goal is to get everything covered by the stroke to be shown "darker" than the remaining portion of the circle. However the effect that is happening is the opacity of the stroke is compounding with the groups opacity so it doesn't have the contrast it needs to have. Ideally it would look something like this...
Would inverting the pieces be an option? Instead of darkening the section, lighten the inverse? I removed the fill-opacity on the outer svg, changed the stroke of the inner path to white and increased the opacity to .6. I did not change the path, though, this was just to demonstrate the concept. <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 300 300" viewBox="0 0 300 300" x="0px" y="0px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1"> <g> <path fill="#f79820" d="M 150 0 c 82.8 0 150 67.2 150 150 s -67.2 150 -150 150 S 0 232.8 0 150 S 67.2 0 150 0" /> <circle fill="#f5f4b7" cx="150" cy="150" r="141.9" /> <path fill="#f79820" d="M 135.7 103.3 c 3.5 18.3 4 19 7.8 19.2 c 3.8 0.2 10.4 -4.1 13.6 -12.1 c 3.1 -8 5 -20.2 7.8 -27.9 s 15.4 -29.6 18.7 -39.2 s 0.2 -19.2 -3.1 -23.6 c -3.3 -4.4 -10.7 -4.4 -23.5 -3.4 c -12.7 1 -33.4 -0.1 -40.8 3.4 c -8.4 3.9 -12.1 4.8 -8.9 15.5 C 110.2 45.9 132.2 84.9 135.7 103.3 Z" /> <path fill="#f79820" d="M 153.9 124.2 c -1.7 2.9 3.3 5.6 5.3 5.6 c 2 0 10.1 -2.9 23 -10.4 c 12.9 -7.5 49.9 -25.1 60.2 -35.2 c 10.2 -10 4.3 -22.8 0 -28.9 c -4.3 -6.1 -21 -22.8 -34.4 -29.7 c -13.4 -7 -16.7 1.2 -19.2 12.4 c -2.5 11.2 -12.1 31.1 -15.4 38.2 C 170 83.4 155.5 121.3 153.9 124.2 Z" /> <path fill="#f79820" d="M 213.5 108.7 c -23.7 12.8 -50.5 24.7 -50.4 27.2 c 0.1 3.1 11.1 6.5 27.4 9.9 c 16.4 3.4 29.1 2.5 44.6 9 c 15.5 6.5 36.7 9.9 45 -5.4 s 0.5 -47.6 -8.3 -58.1 c -8.8 -10.5 -10.9 -15.1 -25.6 -3.6 C 240.8 92 227.6 101.1 213.5 108.7 Z" /> <path fill="#f79820" d="M 283.6 167.2 c -2.2 -8.7 -11.1 1.4 -55.9 -8.5 c -44.8 -9.9 -60.7 -13.6 -63 -10.2 c -1.3 1.9 13.4 14.1 36 25.1 c 22.5 11 34.6 21.6 43.7 27.9 c 9.1 6.3 20.2 6.3 26.9 0 C 278.1 195.2 285.8 175.8 283.6 167.2 Z" /> <path fill="#f79820" d="M 226.6 194.7 c -16 -3.6 -35.4 -19 -42.1 -23.8 c -6.8 -4.8 -21.2 -17.1 -25.4 -13.3 c -2.6 2.4 -0.7 15.6 8.4 38.7 s 18.7 56.7 21.6 73.6 c 3 16.8 10.9 9.5 19 2.5 c 8.1 -7 26.4 -21.4 40 -30.7 c 13.6 -9.3 11.6 -19 10.1 -21.7 S 242.6 198.2 226.6 194.7 Z" /> <path fill="#f79820" d="M 157.9 178.9 c -4.1 -13.1 -5.2 -20.5 -9 -20.4 c -4.5 0.2 -9.1 18.7 -12.4 27.4 c -3.3 8.7 -12.7 52.3 -16.7 72.4 c -4 20 -1.8 25.8 15.2 26.7 s 36.7 4.9 42.8 -1 c 6.1 -5.9 5.3 -23.1 0 -44.5 C 172.5 217.9 161.9 192 157.9 178.9 Z" /> <path fill="#f79820" d="M 135.5 171.9 c 2.5 -9.2 3.2 -13.5 -2 -14.3 c -7.1 -1 -17.5 10.5 -25.3 22.1 S 77.5 213.4 63 228.7 c -14.5 15.3 -4 23.8 16 36.2 c 20 12.4 27.9 13.8 31.6 10.9 c 3.6 -2.9 6.6 -26.3 11.1 -43.8 C 126.1 214.4 133 181.1 135.5 171.9 Z" /> <path fill="#f79820" d="M 61.1 227.1 c 5.1 -6.8 32.2 -34.3 40 -44.8 c 7.8 -10.5 26.3 -28.2 27.9 -29.2 c 1.7 -1 -1.1 -4 -3.8 -6.8 c -2.1 -2.1 -2.8 -1.2 -11.1 0 c -8.3 1.2 -39 13.4 -53.4 17.7 c -14.4 4.2 -22.5 3.9 -31.1 7.5 c -8.6 3.6 -11.7 12.4 -1.7 26.8 c 10.1 14.4 6.3 18.9 13.6 28.9 C 48.9 237.1 56 233.9 61.1 227.1 Z" /> <path fill="#f79820" d="M 25.8 169.4 c 9.1 -1 41.5 -11.6 59.2 -18.9 c 17.7 -7.3 40.9 -11.4 40.7 -13.9 c -0.5 -5.6 -29.9 -17 -40.5 -22.6 c -10.6 -5.6 -25 -19.9 -35.4 -25.1 c -10.4 -5.3 -23.3 -4.8 -25.4 8.2 c -2.1 12.9 -8.8 27.9 -11.4 48 C 10.2 165.1 16.7 170.4 25.8 169.4 Z" /> <path fill="#f79820" d="M 54.5 88.3 c 16 5.4 37.5 19.7 43.1 24 c 5.6 4.2 31.2 20.9 35.2 17.5 c 3.4 -2.9 0.3 -21.1 -6.3 -31.8 c -6.6 -10.7 -9.1 -29.4 -14.5 -45.2 c -5.5 -15.8 -17.7 -28.4 -34 -18 s -33.4 24.8 -37.8 36 C 35.7 82 38.5 82.9 54.5 88.3 Z" /> </g> <svg style="display: block; width: 100%;" viewBox="0 0 100 100"> <path stroke="#ffffff" stroke-opacity=".6" fill-opacity="0" style="stroke-dasharray: 157.698, 157.698; stroke-dashoffset: 55;" stroke-width="49.81" d="M 50,50 m 0,-25.095 a 25.095,25.095 0 1 1 0,50.19 a 25.095,25.095 0 1 1 0,-50.19" /> </svg> </svg>
Trigger animation when svg is in the viewport
Trigger animation when svg is in the viewport
I have a page with a big header image and an svg animation below the fold.
Here's the example:
html, body {
height: 100%;
margin: 0
}
.header-image {
height: 100%;
background-color: #ffcc00
}
/*Line animations*/
.line {
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation-fill-mode: forwards;
}
#line01, #line02 {
animation-delay:1s;
-webkit-animation-delay:1s;
}
#line03, #line04 {
animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}
#line05, #line06 {
animation-delay:1.6s;
-webkit-animation-delay:1.6s;
}
#line07, #line08 {
animation-delay:1.9s;
-webkit-animation-delay:1.9s;
}
#line09, #line10 {
animation-delay:2.3s;
-webkit-animation-delay:2.3s;
}
#line11,
#line12,
#line13,
#line14,
#line15,
#line16,
#line17,
#line18{
animation-delay:3.1s;
-webkit-animation-delay:3.1s;
}
#line19,
#line20,
#line21,
#line22,
#line23,
#line24,
#line25,
#line26{
animation-delay:3.5s;
-webkit-animation-delay:3.5s;
}
/*Keyframes*/
#keyframes dash {
0% {stroke-dashoffset: 150;}
100% {stroke-dashoffset: 0;}
}
#-webkit-keyframes dash {
0% {stroke-dashoffset: 150;}
100% {stroke-dashoffset: 0;}
}
<div class="header-image">Please scroll down</div>
<div class="svg-animation">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="guida" x="0px" y="0px" viewBox="0 0 480.669 305.346" enable-background="new 0 0 480.669 305.346" xml:space="preserve">
<rect id="ombra-carta01" x="52.2" y="31.8" transform="matrix(-0.9026 0.4305 -0.4305 -0.9026 331.4025 234.5817)" fill="#A2DEF1" width="174" height="246.1"/>
<path id="ombra-occhiali" fill="#A2DEF1" d="M406.66 105.7 c-4.273-0.759-20.888-8.967-33.1-12.474c-12.225-3.512-30.973-5.673-34.362-5.288c-4.051 0.459-4.223 0.747-4.973 3.6 c-0.75 2.86-0.772 5.4 1.3 6.642c2.683 1.5 2.2 5 1.9 14.967c-2.108 4.115-3.231 8.417-3.774 11.1 c-1.042 5.2 3.5 8.4 6.4 3.745c2.822 4.8 8.4 8.9 19 11.889c18.588 5.2 27.35-5.681 30.177-9.188 c5.041-6.253 5.85-16.103 15.383-14.193c9.534 1.9 6.7 11.2 8.9 18.887c1.259 4.3 4.9 17.9 24.1 20.2 c10.921 1.3 17.632-0.292 22.104-3.697c0.914 5.5 6.3 4.3 7.35-0.96c0.546-2.726 1.171-7.168 0.795-11.811 c3.57-9.194 4.472-12.6 7.528-12.981c2.4-0.299 3.373-2.688 3.782-5.617c0.41-2.93 0.362-3.263-3.2-5.246 c-2.979-1.66-21.113-6.885-33.747-8.354C430.991 105.7 416.7 107.5 406.7 105.694z"/>
<path id="fine-asta-dx" fill="#254659" d="M333.111 84.4 c23.972 4.3 106.6 28 118.9 33.554c12.3 5.5 10.6 21.7 9.3 28.158c-1.297 6.473-9.299 6.76-7.104-4.195 c2.193-10.955 2.428-17.082-5.075-19.285c-7.504-2.203-109.515-28.483-116.636-30.113C325.357 90.9 328.4 83.2 333.1 84.4 z"/>
<path id="fine-asta-sx" fill="#254659" d="M469.952 111.8 c-23.768-5.291-109.196-15.194-122.675-14.834c-13.479 0.359-18.091 15.947-19.387 22.421s5.978 9.8 8.172-1.136 c2.194-10.955 4.337-16.699 12.11-15.843c7.773 0.9 112 15.9 119.2 17.127C474.609 120.8 474.8 112.5 470 111.8 z"/>
<path id="montatura" d="M435.583 151.139c16.586 1.1 22.116-5.72 25.721-14.82 c4.24-10.709 5.044-14.575 8.313-14.983c2.399-0.299 3.372-2.688 3.782-5.617c0.409-2.93 0.362-3.263-3.201-5.246 c-2.979-1.66-21.113-6.885-33.747-8.354c-0.287-0.033-0.577-0.063-0.868-0.093v3.04c10.722 1.3 21.4 4.6 24 7 c5.566 5 0.8 22.641-5.935 30.514c-3.718 4.371-10.928 6.027-18.09 5.686V151.139z M400.826 100.8 c-4.274-0.759-20.888-8.967-33.101-12.475c-1.937-0.556-4.037-1.078-6.215-1.562v3.164c10.889 2.3 22.7 6.8 25.8 13.1 c4.493 9.401-9.373 27.347-19.625 29.896c-1.816 0.452-3.909 0.615-6.135 0.52v2.915c12.997 0.5 19.536-7.608 21.905-10.548 c5.042-6.253 5.85-16.103 15.384-14.193c9.533 1.9 6.7 11.2 8.9 18.887c1.258 4.3 4.9 17.9 24.1 20.2 c1.308 0.2 2.6 0.3 3.7 0.354v-2.87c-6.226-0.296-12.414-2.102-16.24-4.946c-8.479-6.302-14.364-28.202-6.597-35.148 c4.281-3.828 13.587-4.225 22.837-3.108v-3.04C424.432 100.9 410.6 102.6 400.8 100.828z M361.51 86.8 c-11.565-2.569-25.294-4.049-28.147-3.726c-4.051 0.459-4.223 0.747-4.973 3.608c-0.75 2.86-0.772 5.4 1.3 6.6 c2.86 1.6 2.1 5.5 1.9 17.028c-0.191 10.5 2.7 19.4 21.6 24.697c3.01 0.8 5.8 1.3 8.3 1.36v-2.915 c-9.958-0.431-22.591-6.071-25.262-14.423c-3.147-9.843-0.785-27.983 6.275-30.445c2.736-0.953 10.573-0.455 19 1.337V86.792z"/>
<path id="riflesso-bottom" fill="#B0CAD9" d="M342.523 88.6 c6.276-2.188 39.4 3.3 44.7 14.452c4.493 9.401-9.373 27.347-19.625 29.896c-9.948 2.477-28.129-3.686-31.396-13.903 C333.102 109.2 335.5 91.1 342.5 88.619L342.523 88.619z M459.608 112.069c-4.949-4.436-37.619-12.161-46.861-3.896 c-7.768 6.946-1.882 28.8 6.6 35.148c8.228 6.1 27.4 7.4 34.33-0.739C460.369 134.7 465.2 117.1 459.6 112.069z"/>
<path id="riflesso-top-sx" fill="#D1E2EB" d="M345.894 88.2 c10.529-0.32 36.7 5.1 41.4 14.913c3.151 6.594-2.729 17.39-10.059 24.13L345.894 88.158z"/>
<path id="riflesso-top-dx" fill="#D1E2EB" d="M418.783 105.355l31.898 39.8 c1.146-0.716 2.158-1.559 2.992-2.539c6.695-7.873 11.501-25.523 5.935-30.514C455.452 108.3 431.7 102.3 418.8 105.355z"/>
<path id="retro-aste" fill="#617F91" d="M452.192 108.6 c-8.324-1.297-18.175-2.673-28.473-4.008c-2.935 0.211-5.595 0.716-7.759 1.6l0 0l-0.059 0.024l-0.017 0.007l-0.041 0 l-0.059 0.024l-0.058 0.025h-0.001l-0.057 0.024l-0.058 0.024l-0.042 0.019l-0.016 0.007l-0.113 0.051l-0.026 0.013l-0.029 0 l-0.057 0.026l-0.056 0.026l-0.011 0.004l-0.045 0.022l-0.056 0.026l-0.051 0.024l-0.004 0.002l-0.055 0.026l-0.055 0 l-0.035 0.018l-0.02 0.011l-0.054 0.026l-0.054 0.028l-0.021 0.01l-0.033 0.019l-0.054 0.028l-0.013 0.007l-0.087 0 l-0.005 0.003l-0.053 0.029l-0.043 0.023l-0.009 0.006l-0.053 0.028l-0.052 0.029l-0.027 0.016l-0.023 0.014l-0.051 0 l-0.051 0.029l-0.051 0.03l-0.05 0.03l-0.051 0.03l0 0l-0.05 0.03l-0.05 0.031l-0.049 0.031l-0.049 0.031l-0.048 0.031l-0.022 0 l-0.026 0.018l-0.048 0.031l-0.048 0.032l-0.009 0.006l-0.039 0.026l-0.08 0.056l-0.009 0.006l-0.005 0.004l-0.009 0 l-0.084 0.06l-0.029 0.021l-0.017 0.012l-0.046 0.034l-0.046 0.033l-0.016 0.013l-0.029 0.021l-0.045 0.034l-0.044 0 l-0.005 0.003l-0.039 0.031l-0.045 0.035l-0.035 0.028l-0.008 0.006l-0.003 0.002l-0.084 0.069l-0.023 0.02l-0.019 0 l-0.085 0.071l-0.011 0.011l-0.113 0.099l-0.043 0.039l-0.014 0.013l-0.029 0.026l-0.026 0.024l-0.017 0.015l-0.039 0 l-0.002 0.002l-0.042 0.04l-0.012 0.011l-0.03 0.03l-0.024 0.023l-0.017 0.017l-0.037 0.037l-0.004 0.004l-0.041 0.041l-0.009 0 l-0.031 0.032l-0.021 0.021l-0.019 0.021l-0.034 0.035l-0.005 0.007l-0.04 0.042c-0.938 1.008-1.644 2.262-2.142 3.7 c19.726 5.1 36.2 9.4 39 10.253c7.503 2.2 7.3 8.3 5.1 19.285l-0.005 0.024c2.821-3.578 5.257-8.839 6.642-14.028 c-1.398-4.124-4.051-7.831-8.789-9.959c-0.717-0.322-1.673-0.705-2.843-1.144c5.22 0.8 9.6 1.4 12.8 1.9 c-0.122-2.879-0.866-5.261-2.421-6.654C458.445 111 455.8 109.8 452.2 108.647L452.192 108.647z M350.696 88.3 c8.174 2 17.8 4.5 27.8 7.258c2.633 1.3 4.9 2.8 6.6 4.476h0.001l0.044 0.045l0.006 0 c0.072 0.1 0.1 0.1 0.2 0.219l0.025 0.027l0.018 0.019l0.042 0.045l0.043 0.045l0.014 0.015l0.028 0.031l0.041 0 l0.042 0.046l0.002 0.002l0.039 0.043l0.04 0.046l0.032 0.036l0.009 0.01l0.04 0.046l0.04 0.046l0.021 0.024l0.019 0 l0.039 0.046l0.039 0.047l0.011 0.012l0.028 0.034l0.038 0.047l0.038 0.046l0 0l0.037 0.047l0.038 0.047l0.026 0.033l0.01 0 l0.037 0.047l0.035 0.047l0.037 0.047l0.035 0.047l0.036 0.047l0.006 0.01l0.028 0.038l0.034 0.047l0.033 0.044l0.002 0 l0.034 0.048l0.033 0.048l0.022 0.031l0.011 0.016l0.033 0.048l0.032 0.048l0.013 0.019l0.021 0.029l0.031 0.047l0.032 0 l0.004 0.006l0.027 0.042l0.03 0.048l0.026 0.041l0.005 0.007l0.03 0.049l0.029 0.048l0.019 0.028l0.012 0.021l0.029 0 l0.029 0.049l0.009 0.017l0.019 0.032l0.028 0.048l0.028 0.049l0.002 0.004l0.025 0.046l0.026 0.049l0.022 0.039l0.005 0 l0.026 0.05l0.04 0.075l0.013 0.022l0.05 0.099l0.007 0.014l0.018 0.036l0.048 0.099l0.024 0.053l0.009 0.017l0.016 0 l0.016 0.033l0.009 0.019l0.022 0.051l0.001 0.002l0.023 0.053l0.007 0.015l0.016 0.039l0.014 0.031l0.009 0.021l0.021 0 l0.001 0.005l0.022 0.053l0.005 0.013l0.017 0.041l0.041 0.108l0.021 0.054l0.004 0.011l0.016 0 c0.462 1.3 0.6 2.7 0.5 4.182c-20.156-2.878-36.996-5.244-39.944-5.569c-7.773-0.856-9.917 4.888-12.11 15.843l-0.021 0.1 c-1.242-4.382-1.474-10.187-0.757-15.526c2.882-3.294 6.772-5.718 11.993-5.857c0.785-0.021 1.816-0.007 3.1 0 c-5.132-1.308-9.462-2.407-12.614-3.198c1.222-2.61 2.826-4.521 4.797-5.208C343.999 88.1 347 88 350.7 88.319z"/>
<path id="riflesso-aste-top-sx" fill="#8097A6" d="M345.893 88.158l12.551 15.6 c7.396 1 18 2.5 29.7 4.194c0.09-1.494-0.073-2.904-0.535-4.182l-0.016-0.044l-0.004-0.011l-0.021-0.054l-0.041-0.108 l-0.017-0.041l-0.005-0.013l-0.022-0.053l-0.001-0.005l-0.021-0.049l-0.009-0.021l-0.014-0.031l-0.016-0.039l-0.007-0.015 l-0.023-0.053l-0.001-0.002l-0.022-0.051l-0.009-0.019l-0.016-0.033l-0.016-0.036l-0.009-0.017l-0.024-0.053l-0.048-0.099 l-0.018-0.036l-0.007-0.014l-0.05-0.099l-0.013-0.022l-0.04-0.075l-0.026-0.05l-0.005-0.009l-0.022-0.039l-0.026-0.049l-0.025-0.046 l-0.002-0.004l-0.028-0.049l-0.028-0.048l-0.019-0.032l-0.009-0.017l-0.029-0.049l-0.029-0.048l-0.012-0.021l-0.019-0.028 l-0.029-0.048l-0.03-0.049l-0.005-0.007l-0.026-0.041l-0.03-0.048l-0.027-0.042l-0.004-0.006l-0.032-0.049l-0.031-0.047 l-0.021-0.029l-0.013-0.019l-0.032-0.048l-0.033-0.048l-0.011-0.016l-0.022-0.031l-0.033-0.048l-0.034-0.048l-0.002-0.003 l-0.033-0.044l-0.034-0.047l-0.028-0.038l-0.006-0.01l-0.036-0.047l-0.035-0.047l-0.037-0.047l-0.035-0.047l-0.037-0.047 l-0.01-0.013l-0.026-0.033l-0.038-0.047l-0.037-0.047l0 0l-0.038-0.046l-0.038-0.047l-0.028-0.034l-0.011-0.012l-0.039-0.047 l-0.039-0.046l-0.019-0.021l-0.021-0.024l-0.04-0.046l-0.04-0.046l-0.009-0.01l-0.032-0.036l-0.04-0.046l-0.039-0.043l-0.002-0.002 l-0.042-0.046l-0.041-0.046l-0.028-0.031l-0.014-0.015l-0.043-0.045l-0.042-0.045l-0.018-0.019l-0.025-0.027 c-0.07-0.073-0.142-0.146-0.214-0.219l-0.006-0.006l-0.044-0.045h-0.001c-1.659-1.653-3.926-3.147-6.559-4.476 c-10.013-2.731-19.623-5.251-27.797-7.258C348.887 88.2 347.3 88.1 345.9 88.158z"/>
<path id="riflesso-aste-top-dx" fill="#8097A6" d="M452.192 108.6 c-8.324-1.297-18.175-2.673-28.473-4.008c-1.761 0.126-3.422 0.358-4.937 0.716l9.427 11.751c10.996 2.9 19 5 20.9 5.5 c7.503 2.2 7.3 8.3 5.1 19.285l-0.005 0.024c2.821-3.578 5.257-8.839 6.642-14.028c-1.398-4.124-4.051-7.831-8.789-9.959 c-0.717-0.322-1.673-0.705-2.843-1.144c5.22 0.8 9.6 1.4 12.8 1.898c-0.122-2.879-0.866-5.261-2.421-6.654 C458.445 111 455.8 109.8 452.2 108.647z"/>
<rect id="carta01" x="46.3" y="26.9" transform="matrix(-0.9026 0.4305 -0.4305 -0.9026 318.206 227.8356)" fill="#FFFFFF" width="174" height="246.1"/>
<line class="line" id="line26" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="182.6" y1="239.7" x2="224" y2="220"/>
<line class="line" id="line25" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="179.3" y1="232.8" x2="238.6" y2="204.6"/>
<line class="line" id="line24" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="176.1" y1="226" x2="235.3" y2="197.7"/>
<line class="line" id="line23" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="172.8" y1="219.1" x2="232.1" y2="190.9"/>
<line class="line" id="line22" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="169.5" y1="212.2" x2="228.8" y2="184"/>
<line class="line" id="line21" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="166.2" y1="205.4" x2="225.6" y2="177.2"/>
<line class="line" id="line20" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="163" y1="198.5" x2="222.3" y2="170.3"/>
<line class="line" id="line19" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="159.7" y1="191.7" x2="219" y2="163.4"/>
<line class="line" id="line18" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="113.7" y1="272.5" x2="142.6" y2="258.7"/>
<line class="line" id="line17" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="110.4" y1="265.6" x2="168.8" y2="237.8"/>
<line class="line" id="line16" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="107.1" y1="258.8" x2="165.5" y2="231"/>
<line class="line" id="line15" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="103.9" y1="251.9" x2="162.3" y2="224.1"/>
<line class="line" id="line14" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="100.6" y1="245" x2="159" y2="217.3"/>
<line class="line" id="line13" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="97.3" y1="238.2" x2="155.7" y2="210.4"/>
<line class="line" id="line12" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="94.1" y1="231.3" x2="152.4" y2="203.5"/>
<line class="line" id="line11" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="90.8" y1="224.5" x2="149.2" y2="196.7"/>
<line class="line" id="line10" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="62.5" y1="166.6" x2="118.3" y2="140.1"/>
<line class="line" id="line09" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="59.3" y1="159.7" x2="187.5" y2="98.7"/>
<line class="line" id="line08" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="56" y1="152.9" x2="184.2" y2="91.8"/>
<line class="line" id="line07" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="52.7" y1="146" x2="181" y2="85"/>
<line class="line" id="line06" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="49.5" y1="139.1" x2="177.7" y2="78.1"/>
<line class="line" id="line05" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="46.2" y1="132.3" x2="174.4" y2="71.3"/>
<line class="line" id="line04" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="42.9" y1="125.4" x2="171.2" y2="64.4"/>
<line class="line" id="line03" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="39.7" y1="118.6" x2="167.9" y2="57.5"/>
<line class="line" id="line02" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="36.4" y1="111.7" x2="164.6" y2="50.7"/>
<line class="line" id="line01" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="54.4" y1="82.6" x2="130.7" y2="46.3"/>
</svg>
</div>
http://jsfiddle.net/qx7p46f3/4/
By the time the user has scrolled down, the animation has already played because it starts as soon as the page is loaded. I want to trigger it when the svg is in the viewport instead, when the user scrolls to that specific part of the page. How can I do that?
I don't know much about js but I'd rather not use jquery cause it doesn't seem to be the most efficient solution in this case, correct me if I'm wrong.
If you don't know much about javascript, then you might want to consider jQuery since it will be a lot easier for you to accomplish the desired effect.
Using a plugin like jQuery.onScreen you could simply write:
$('svg').onScreen({
container: window,
direction: 'vertical',
toggleClass: 'onScreen',
});
And in your css:
.onScreen .line {
animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation-fill-mode: forwards;
}
Edit:
Without jQuery:
var wrapper = document.querySelector('.svg-animation');
window.onscroll = function (event) {
if (wrapper.getBoundingClientRect().top < 0) {
wrapper.className = "svg-animation onScreen";
window.onscroll = null;
}
}
Please note that this hasn't been tested in all browsers and I can't guarantee full support.
Here's a working demo: http://codepen.io/btpoe/pen/caeb32b678521d82144ae1f953c3e332