CODEWITHSUNDEEP
htmlcsssvgpath
vaishali kapadia
vaishali kapadia

Reputation: 934

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 you know any). Anyone please help me with raising the smiley's eyebrows. Here is my code

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
 </svg>

I was trying with following. Sorry for bad code :P

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <animateMotion 
									 xlink:href="#eyebrow1" 
									 dur="1.2s" 
									 fill="freeze"
									 calcMode="spline"
									 keyTimes="0; 0.5; 1"
									 keySplines="0 0 1 1;
															 .42 0 .58 1;"
									 path ="M30, 20 Q27, 10 35, 20"
									 />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
 </svg>

Upvotes: 0

Views: 212

Answers (1)

Temani Afif
Temani Afif

Reputation: 274354

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:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
  
 <animateTransform 
      xlink:href="#eyebrow1"
      attributeName="transform" 
      attributeType="XML"
      type="translate"
      from="9 17"
      to="9 22" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      />
       <animateTransform 
      xlink: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:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <g transform="translate(10,20)" id="eyebrow">

  <path d="M16, 20 Q27, 10 35, 20" fill="none" stroke="#000" stroke-width="1.5px" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(30,0)" fill="none" stroke="#000" stroke-width="1.5px" />
  
  </g>
  
  <animateTransform 
      xlink: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/

Upvotes: 2

Related Questions