SVG Success message animation

user_9103039 0
Viewed 886

When I make a successful insertion I show a success message to the user containing an svg success icon as it's shown. I want to first show the green circle than animate the OK mark and how to do that using Java Script for future SVG animation.

Here is the html:

#svgcont {
  width: 400px;
  height: 430px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div>
  <div id="svgcont">
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
           <circle style="fill:#25AE88;" cx="25" cy="25" r="25"/>
           <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
              38,15 22,33 12,25 "/>
        </svg>
    <p>The success message</p>
  </div>
</div>

animation svg html javascript
1 Answers

Pure svg solution

  1. Animation of the appearance of a green circle
    Starts after clicking on the svg canvas
<animate id="an_op"
    attributeName="opacity"
    begin="Capa_1.click"
    dur="0.5s"
    from="0" to="1"
    fill="freeze"
    restart="whenNotActive" />
  1. Check mark drawing animation

For line drawing use attribute change stroke-dasharray from="0, 37" to="37, 0"
where 37 is the total line length

<animate id="check"
  attributeName="stroke-dasharray"
  begin="an_op.end-0.5s"
  dur="1.5s"
  from="0,37" to="37,0"
  fill="freeze"
  restart="whenNotActive" />

Below is the complete code

#svgcont {
  width: 400px;
  height: 430px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}
</style>
<div>
  <div id="svgcont">
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;border:1px solid" xml:space="preserve">
           <circle style="fill:#25AE88; opacity:0" cx="25" cy="25" r="25">
        <!-- Animation of the appearance of a green circle           -->
            <animate id="an_op"
               attributeName="opacity"
               begin="Capa_1.click"
               dur="0.5s"
               from="0" to="1"
               fill="freeze"
               restart="whenNotActive" />
            </circle>
           <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-dasharray:0,37;  stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
              38,15 22,33 12,25 ">
            <!-- Check mark drawing animation -->
            <animate id="check"
               attributeName="stroke-dasharray"
               begin="an_op.end-0.5s"
               dur="3s"
               from="0,37" to="37,0"
               fill="freeze"
               restart="whenNotActive" /> 
            </polyline>  
        </svg>
    <p>The success message</p>
  </div>
</div>

JS solution

Add an animation start button

 <button onclick="RestartAnimate()">Success</button>

Setting the value begin="indefinite"

 var animation = document.getElementById("an_op")
    function RestartAnimate() {
        animation.beginElement();
}
#svgcont {
  width: 400px;
  height: 430px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div>
  <div id="svgcont"> 
  <button onclick="RestartAnimate()">Success</button>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;border:1px solid" xml:space="preserve">
           <circle style="fill:#25AE88; opacity:0" cx="25" cy="25" r="25">
        <!-- Animation of the appearance of a green circle           -->
            <animate id="an_op"
               attributeName="opacity"
               begin="indefinite"
               dur="0.5s"
               from="0" to="1"
               fill="freeze"
               restart="whenNotActive" />
            </circle>
           <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-dasharray:0,37;  stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
              38,15 22,33 12,25 ">
            <!-- Check mark drawing animation -->
            <animate id="check"
               attributeName="stroke-dasharray"
               begin="an_op.end-0.25s"
               dur="1.5s"
               from="0,37" to="37,0"
               fill="freeze"
               restart="whenNotActive" /> 
            </polyline>  
        </svg>
    <p>The success message</p>
  </div>
</div>

user_73948710
Related