Inhale - Hold - Exhale animation using SVG circles

Recently I was working on the UI of a meditation app, there requirement was like user can click in circles and the 7 concentric circles will increase from inside on the count of 4-3-2-1. Then it will ask the user to hold for 4 more seconds and again Exhale 4-3-2-1.  In first version I prepared GIF images and animated completely using jquery.  One image used to load after another using setTimeout().  But that was not properly running. The images were loading at different times so the animations were starting at different times giving some unwanted results. I decided to do this with SVG shapes and animations. Used SVG circle for concentric circles.  Used the value of circles in percent to get the responsive circles.  No need of animations just the opacity on/off worked for me. Finally I ended up with the following code and function.

DEMO

PUSH TO START

HTML

<h3 id="pushToStart" class="blinking">PUSH TO START</h3>

<svg viewBox="0 0 140 140" preserveAspectRatio="xMinYMin meet" id="ccircle">
  <g>
    <circle id="c7" r="46%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c6" r="40%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c5" r="34%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c4" r="28%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c3" r="22%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c2" r="16%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c1" r="10%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
  </g>
</svg>
<div id="counterValue"></div>

CSS

.blinking{
    animation:blinkingText 1.2s infinite; color:#fff;
}
@keyframes blinkingText{
    0%{     color: #fff;    }
    49%{    color: #fff; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #fff;    }
} // this is for the text PUST TO START to prompt user to do the action

#counterValue{font-size:90px; color:#dccf07; font-weight: bold;}
#pushToStart.noBlink{dispay:block; color:#fff;}

JQuery Script

jQuery(document).ready(function() {


jQuery("#ccircle").click(function(){


jQuery("#pushToStart").html("INHALE");
jQuery("#pushToStart").removeClass("blinking").addClass("noBlink");

        setTimeout(function () { $("#c1").attr("stroke-opacity", "1"); }, 500);
setTimeout(function () { $("#c2").attr("stroke-opacity", "1"); }, 1000);
setTimeout(function () { $("#c3").attr("stroke-opacity", "1"); }, 1500);
setTimeout(function () { $("#c4").attr("stroke-opacity", "1"); }, 2000);
setTimeout(function () { $("#c5").attr("stroke-opacity", "1"); }, 2500);
setTimeout(function () { $("#c6").attr("stroke-opacity", "1"); }, 3000);
setTimeout(function () { $("#c7").attr("stroke-opacity", "1"); }, 3500);

setTimeout(function () { $("#counterValue").html("4"); }, 1000);
setTimeout(function () { $("#counterValue").html("3"); }, 2000);
setTimeout(function () { $("#counterValue").html("2"); }, 3000);
setTimeout(function () { $("#counterValue").html("1"); }, 4000);
setTimeout(function () { $("#counterValue").html("0"); }, 4000);

setTimeout(function () { $("#pushToStart").html("HOLD"); }, 4000);

setTimeout(function () { $("#counterValue").html("4"); }, 5000);
setTimeout(function () { $("#counterValue").html("3"); }, 6000);
setTimeout(function () { $("#counterValue").html("2"); }, 7000);
setTimeout(function () { $("#counterValue").html("1"); }, 8000);
setTimeout(function () { $("#counterValue").html("0"); }, 9000);

setTimeout(function () { $("#pushToStart").html("EXHALE"); }, 10000);
    setTimeout(function () { $("#counterValue").html("4"); }, 11000);
setTimeout(function () { $("#counterValue").html("3"); }, 12000);
setTimeout(function () { $("#counterValue").html("2"); }, 13000);
setTimeout(function () { $("#counterValue").html("1"); }, 14000);
setTimeout(function () { $("#counterValue").html("0"); }, 15000);
 
setTimeout(function () { $("#c1").attr("stroke-opacity", "0.3"); }, 14000);
setTimeout(function () { $("#c2").attr("stroke-opacity", "0.3"); }, 13500);
setTimeout(function () { $("#c3").attr("stroke-opacity", "0.3"); }, 13000);
setTimeout(function () { $("#c4").attr("stroke-opacity", "0.3"); }, 12500);
setTimeout(function () { $("#c5").attr("stroke-opacity", "0.3"); }, 12000);
setTimeout(function () { $("#c6").attr("stroke-opacity", "0.3"); }, 11500);
setTimeout(function () { $("#c7").attr("stroke-opacity", "0.3"); }, 11000);


setTimeout(function () { $("#pushToStart").html("PUSH TO START"); $("#pushToStart").removeClass("noBlink").addClass("blinking");}, 15000);

});



});

You can make this code more dynamic by using the loops or variables.  I have used very basic code to show you how exactly the animation is working with simple script.


Share Your Solutions

Corporate Branding for a Restaurant in Midnapore

With 2020 I completed my 10 years as a web designer and front end developer.  All these years worked on many projects with different clients.  This time one of my old boss cum friend owner of this restaurant asked me to help him with the branding of his restaurant.  His idea was to start one of the First Theme Restaurant in Midnapore town.  After a lot brainstorming we came up with an idea of train compartment and finalised the brand name as - ZBRDST EXPRESS.

We end up on this logo for the brand.

Menu Booklet

The Side Kick - Menu Card

The interior of the restaurant was made like a train.

Each seat was made like a train coup with a window and conventional fans on top, the wings were replaced with bulbs for beautiful ambience.

Designed few billboards and signboards as well for the promotion of the restaurant and for the display outside the restaurant walls.  I was happy with the end result, and I think the client was also satisfied with my work.

Share Your Solutions

Enroute KedarKantha Trek

Some unforgettable views