Bold Turquoise Bear 5

#bold_turquoise_bear-5 {
  padding: 1rem;

  svg {
    border: 1px solid teal;

    .bg-rect {
      fill: coral;
    }

    // So the transform origin is the center of the clip path as it's absolutely
    // placed by the svg code...and we can move the transform-origin around to
    // scale up around a different point

    // Cool! You can use transform-origin in the transition property! Huh!
    .clip-1-rect,
    .clip-2-rect,
    .clip-3-rect {
      transition: transform 0.35s ease-in-out, transform-origin 0.25s ease-out;
    }

    .clip-1-rect {
      transform: scale(0.5, 0.5);
      transform-origin: 90px 90px;
    }

    .clip-2-rect {
      transform: scale(0.15, 0.75);
      transform-origin: 175px 50px;
    }

    .clip-3-rect {
      transform: scale(0.5, 0.5);
      transform-origin: 290px 50px;
    }
  }

  // And transforming around the transform-origin works at this point about
  // as one would expect. (See ex 4)

  // So what happens if we move the transform origin around?
  &.active {
    .clip-1-rect,
    .clip-2-rect,
    .clip-3-rect {
      transition: transform 2s ease-out, transform-origin 2s ease-out;
    }

    .clip-1-rect {
      transform: scale(1, 1);
      transform-origin: 10px 10px;
    }

    .clip-2-rect {
      transform: scale(0.75, 0.15);
      transform-origin: 125px 50px;
    }

    .clip-3-rect {
      transform: scale(0.15, 0.95);
      transform-origin: 210px 50px;
    }
  }
}