CODEWITHSUNDEEP
animationsvgsmil
laidback1
laidback1

Reputation: 9

Reverse smil animation based on path

I'm new to SVG and trying to reverse run the animation instead of starting it from the beginning. Is there a way to do it using SMIL or should I just switch to keyframes?

`https://codepen.io/anon/pen/LayQRL`

Thanks for all help in advance!

Upvotes: 0

Views: 77

Answers (1)

enxaneta
enxaneta

Reputation: 33054

You may use the values attribute instead of to like this: The red path is what you have, the blue one is using 3 values

I hope this is what you are asking.

svg {
 border:1px solid;
}
<svg width="200" viewBox="0 0 849 681">
       
    <path fill="red" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" id="path-2">
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite" to="M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" rotate="auto" keyPoints="1;0">
      </animate>
    </path>
 
</svg>

<svg viewBox="0 0 849 681" width="200">
         
    <path fill="skyblue" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" >
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite"
         values="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z "      
      />
  </path>
  
</svg>

Upvotes: 1

Related Questions