h1.intro animation practice - 8
  small ripple effect

.box
  svg.svg(version="1.1")
    - var i = 20
    - while(i--)
      circle(cy="200", cx="200", r=20*i)
      // r=20*i is basic, for screenshot

blockquote.info
  | inspired from <a href="http://gif.flrn.nl/post/105482225994">http://gif.flrn.nl/post/105482225994</a>
View Compiled
$color--darker: #262626;
$color--lighter: #dfdfc4;

$box-size: 400px;
$circle-count: 20;
$circle-size-1st: $box-size * .11;
$decrease-ratio: .75;

///
/// major style
///

.svg {
  position: relative;
  x: 0;
  y: 0;
  width: $box-size;
  height: $box-size;
  color: $color--lighter;
}

$distances: ();
@for $i from 1 through ($circle-count + 2) {
  @if $i % 2 != 0 {
  $distances: join($distances, ($i - 1) * ($circle-size-1st - $decrease-ratio * ($i - 2)) * .5, auto);
  }
}

//////

circle {
  cx: $box-size / 2;
  cy: $box-size / 2;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  &:nth-of-type(2n+1) {
    color: $color--darker;
    animation-delay: -.9s;
  }
}

@for $i from 1 through $circle-count {
  $_i: ceil($i / 2);

  @if $i % 2 != 0 {
    %ripple-#{$_i} {
      r: nth($distances, $_i);
      animation-name: d#{$_i};
    }

    @keyframes d#{$_i} {
      0%   { r: nth($distances, $_i); }
      100% { r: nth($distances, $_i + 1); }
    }
  }

  circle:nth-of-type(#{$i}) {
    @extend %ripple-#{$_i};
  }

}

.box {
  position: relative;
  width: $box-size;
  height: $box-size;
  margin: 0 auto;
  background-image: linear-gradient(45deg, $color--lighter 50%, $color--darker 50%);

  &:hover  * {animation-play-state: paused; }
  &:active * {animation-play-state: running; }
}



///
/// reset style
///

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  padding-top: 1px;
  text-align: center;
  background-color: #2b2e2d;
  color: #e4e3c8;
}

.intro {
  width: 80%;
  max-width: 30rem;
  padding-bottom: 1rem;
  margin: .5em auto 1em;
  text-transform: capitalize;
  border-bottom: 1px dashed #999;

  small {
    display: block;
    opacity: .5;
    font-style: italic;
    text-transform: none;
  }
}

.info {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 1em;
  font-size: .9em;
  font-style: italic;
  font-family: serif;
  text-align: right;
  color: #999;

  a {
    color: inherit;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.