Eyebrow Raising Animation With Svg Path

I am trying to animate eyebrows with SVG. But got stuck as I am not getting proper tutorial showing the meaning and use of numbers used in path='' (please share a tutorial link if

Solution 1:

You can simply use the animateTransform since you are using transform for you path and you have to specify the type (here you can use translate) and the from and to in order to specify the start/end point of animation:

<svgheight="100"width="100"><circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="none" /><ellipsecx="35"cy="45"rx="4"ry="5"stroke="red"stroke-width="2"fill="none" /><ellipsecx="65"cy="45"rx="4"ry="5"stroke="red"stroke-width="2"fill="none" /><pathd="M16, 20 Q27, 10 35, 20"transform="translate(9, 17)"fill="none"stroke="#000"stroke-width="1.5px"id="eyebrow1"/><pathd="M16, 20 Q27, 10 35, 20"transform="translate(40, 17)"fill="none"stroke="#000"stroke-width="1.5px"id="eyebrow2"/><animateTransformxlink:href="#eyebrow1"attributeName="transform"attributeType="XML"type="translate"from="9 17"to="9 22"dur="2s"begin="0s"repeatCount="indefinite"
      /><animateTransformxlink:href="#eyebrow2"attributeName="transform"attributeType="XML"type="translate"from="40 17"to="40 22"dur="2s"begin="0s"repeatCount="indefinite"
      /></svg>

And as I described in my previous answer (SVG path positioning) for your question, you can use g element to be able to animate them both at the same time:

<svgheight="100"width="100"><circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="none" /><ellipsecx="35"cy="45"rx="4"ry="5"stroke="red"stroke-width="2"fill="none" /><ellipsecx="65"cy="45"rx="4"ry="5"stroke="red"stroke-width="2"fill="none" /><gtransform="translate(10,20)"id="eyebrow"><pathd="M16, 20 Q27, 10 35, 20"fill="none"stroke="#000"stroke-width="1.5px" /><pathd="M16, 20 Q27, 10 35, 20"transform="translate(30,0)"fill="none"stroke="#000"stroke-width="1.5px" /></g><animateTransformxlink:href="#eyebrow"attributeName="transform"attributeType="XML"type="translate"from="10 15"to="10 22"dur="2s"begin="0s"repeatCount="indefinite"fill="freeze" 
      /></svg>

Here is some useful links :

https://css-tricks.com/guide-svg-animations-smil/

https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/