Breathing Animation (Web App) | © Nick Freear, 01-April-2020 | License: MIT.

breathing-animation.web-app.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg
  viewBox="0 0 100% 100%"
  width="100%" height="100%"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xml:lang="en-GB"
  >
  <title> Breathing Animation (Web App) </title>

  <desc>
    © Nick Freear, 01-April-2020 | License: MIT.

    * See :~ https://gist.github.com/nfreear/c8666ec92360d09c4f6d559a4e4d55ec

    --
    Browser support ?

     * Chrome  :~ OK!
     * Firefox :~ "Unexpected value breath-in-anim.end + 1s parsing begin attribute."

    --

    * Inspiration :~ https://play.google.com/store/apps/details?id=org.ayny.breathingapp#
    * (Developer  :~ https://play.google.com/store/apps/developer?id=Sergey+Varichev)
    * https://css-tricks.com/guide-svg-animations-smil/
    * https://en.wikipedia.org/wiki/File:Racquetball_ball.svg
    * https://commons.wikimedia.org/wiki/File:Soccer_ball_animated.svg
    * https://www.rapidtables.com/web/color/color-wheel.html
  </desc>

  <defs>
    <style>
      .Teal      { fill: #008080; }
      .Dark-Teal { fill: #005060; }
      .Off-White { fill: #DDD;    }
      .Silver    { fill: #C0C0C0; }
      [ role = button ] { cursor: pointer; }
      a > text   { fill: #FFF; font: .9rem sans-serif; }
      a:hover > text { text-decoration: underline; }
    </style>
  </defs>

  <rect class="Dark-Teal" x="0" y="0" width="100%" height="100%" />

  <circle id="breath" class="Off-White" cx="50%" cy="50%" r="10%" role="button" tabindex="0">
    <title> Click to breath! </title>
  </circle>

  <a xlink:href="https://gist.github.com/nfreear/c8666ec92360d09c4f6d559a4e4d55ec" target="_blank">
    <text x="78%" y="97%">© Nick Freear</text>
    <title>Breathing Web App &#10;&#10; © 2020 Nick Freear | License: MIT &#10;&#10; — Link opens in a new window. </title>
  </a>

  <animate
    id="breath-in-anim"
    xlink:href="#breath"
    attributeType=""
    attributeName="r"
    from="10%"
    to="30%"
    dur="5s"
    begin="click"
    fill="freeze"
    data-X-repeatCount="indefinite" />

  <animate
    id="breath-out-anim"
    xlink:href="#breath"
    attributeType=""
    attributeName="r"
    from="30%"
    to="10%"
    dur="5s"
    fill="freeze"
    begin="breath-in-anim.end + 1s" />

  <script>
    const $BREATH = document.querySelector('#breath');
    const $BREATH_IN = document.querySelector('#breath-in-anim');
    const $BREATH_OUT= document.querySelector('#breath-out-anim');

    [ 'click' /*, 'keypress' */ ].forEach(evName => {
      $BREATH.addEventListener(evName, ev => {
        console.warn('Click to breath!', ev);

        if ($BREATH_IN.getAttribute('begin') === 'click') {

          $BREATH_IN.setAttribute('begin', 'breath-out-anim.end + 1s');
          $BREATH_OUT.setAttribute('begin', 'breath-in-anim.end + 1s');
        } else {
          $BREATH_IN.setAttribute('begin', 'click');
          $BREATH_OUT.setAttribute('begin', '');
        }
      });
    });
  </script>

</svg>