CODEWITHSUNDEEP
javascripthtmlcsssvg
Ilimkan Omurzakova
Ilimkan Omurzakova

Reputation: 313

Svg animation for curved path

I have a SVG and want to animate it, and I'm new to animating SVG. So I want the circle to move on top of curved semi-oval, slowly within 5 minutes. Is there possible to animate with CSS? So far I found this brief explanation about curve path but it's not exactly what I want, or I'm not understanding how to implement to my code. Here is a partial code on codepen EDIT: I need the dot to move exactly on top of curved line. 

.container{
  position: relative;
    margin: 15% auto;
    width: 300px;
    height: 400px;
    background-color: #212121;
    box-shadow: 0 29px 38px rgba(0,0,0,0.50),
                0 25px 22px rgba(0,0,0,0.30),
                inset 0 0 15px 5px rgb(227, 228, 229);
    border-radius: 15px;
    border: 2px solid;
    border-color: #9E9E9E;
}
.time-container{
  margin: 0 auto;
  width: 180px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 130px 50px rgb(132, 2, 2),
              0px 120px 70px rgb(99, 1, 1);
}
.time{
  font-size: 3rem;
  color : #D50000;
  letter-spacing: 3px;
}
.semi-oval{
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="time-container"><p class="time">5:00</p></div>
  <div class="semi-oval">
   <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="shadow">
         <feDropShadow dx="0" dy="10" stdDeviation="6"/>
       </filter>
     </defs>
     <path id="path" d="M10 80 Q 95 10 180 80" stroke="red" stroke-width="2" fill="none" filter="url(#shadow)"/>
     <circle class="circle" cx=15 cy=76 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 />
  </svg>
 </div>
</div>

Upvotes: 4

Views: 4940

Answers (1)

mahan
mahan

Reputation: 14935

Use the animationMotion element to move the circle along #path path. For further info, refer to these two links.

  1. MDN - animationMotion
  2. CSS-tricks - A Guide to SVG Animations

.container {
  position: relative;
  margin: 15% auto;
  width: 300px;
  height: 400px;
  background-color: #212121;
  box-shadow: 0 29px 38px rgba(0, 0, 0, 0.50), 0 25px 22px rgba(0, 0, 0, 0.30), inset 0 0 15px 5px rgb(227, 228, 229);
  border-radius: 15px;
  border: 2px solid;
  border-color: #9E9E9E;
}

.time-container {
  margin: 0 auto;
  width: 180px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 130px 50px rgb(132, 2, 2), 0px 120px 70px rgb(99, 1, 1);
}

.time {
  font-size: 3rem;
  color: #D50000;
  letter-spacing: 3px;
}

.semi-oval {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="time-container">
    <p class="time">5:00</p>
  </div>
  <div class="semi-oval">
    <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <filter id="shadow">
             <feDropShadow dx="0" dy="10" stdDeviation="6"/>
           </filter>
         </defs>
         <circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
             <animateMotion dur="100s" repeatCount="indefinite" rotate="auto" >
                 <mpath xlink:href="#path"/>
             </animateMotion>
         </circle>
         <path id="path" d="M10 80 Q 95 10 180 80" stroke="red" stroke-width="2" fill="none" filter="url(#shadow)"/>
      </svg>
  </div>
</div>

At the moment, animation duration is 100s, but you can change it.

Update

AnimationMotion has an attribute called begin that defines when the animation should start. You can use it to define when the circle should start moving along the curve. For further info, visit these two links

  1. MDN - begin
  2. StackOverflow - SVG animation delay on each repetition

Upvotes: 3

Related Questions