<div class="l-wrapper">
  <svg>
    <defs>
      <pattern id="p-1" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
        <image xlink:href="http://static.colourlovers.com/images/patterns/3342/3342643.png" width="200" height="200"/>
      </pattern>

      <pattern id="p-2" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
        <image xlink:href="http://static.colourlovers.com/images/patterns/2617/2617226.png" width="200" height="200"/>
      </pattern>

      <pattern id="p-3" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
        <image xlink:href="http://static.colourlovers.com/images/patterns/3271/3271725.png" width="200" height="200"/>
      </pattern>
      
      <pattern id="p-4" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
        <image xlink:href="http://static.colourlovers.com/images/patterns/2617/2617452.png" width="200" height="200"/>
      </pattern>
      
      <pattern id="p-wave" width="204" height="270" viewBox="3 0 198 204" patternUnits="userSpaceOnUse">
         <g transform="translate(0, 80)">
           <path d="M201.940328,1.61369997 C154,1.5 152.131621,41.5536648 102.06581,41.5341357 C52,41.5146065 53,1.5 2.17578125,1.5" fill="none" class="elem-mask"/>
         </g>
      </pattern>
      
      <mask id="m-line">
        <rect width="100%" height="100%" fill="url(#p-wave)"/>
      </mask>
    </defs>
    
    <g class="rotation">
      <rect width="100%" height="100%" fill="url(#p-1)" class="rotation__item" />
      <rect width="100%" height="100%" fill="url(#p-2)" class="rotation__item"/>
      <rect width="100%" height="100%" fill="url(#p-3)" class="rotation__item"/>
      <rect width="100%" height="100%" fill="url(#p-4)" class="rotation__item"/>
    </g>
  </svg>  
  
  <div class="progress"></div>
</div>
/* Mask Animation
-------------------------------*/
$mask-duration: 4s;

.elem-mask {
  stroke: white;
  stroke-width: 0;
  animation: stroke-width $mask-duration infinite;
}

@keyframes stroke-width {
  50% {
    stroke-width: 290;
  }
}

/* Change Image Animation
-------------------------------*/

$max: 4;
$duration: $mask-duration*$max;
$step: $duration/$max;
$step-perc: percentage(1/$max);

.rotation__item {
  mask: url(#m-line);
  opacity: 0;
  animation: hide $duration step-end infinite;
  border: 1px solid transparent;
  
  @for $item from 2 through $max {
    &:nth-child(#{$max}n + #{$item}){
    animation-delay: $step*($item - 1);
    }
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  #{$step-perc} {
    opacity: 0;
    }
  
}


/* Progress Bar
-------------------------------*/

.progress {
  width: 0;
  height: 5px;
  background: rgba(154, 205, 50,.5);
  animation: timer $duration infinite linear;
}

@keyframes timer {
  100% {
    width: 100%;
  }
}

/* Common
-------------------------------*/

BODY {
  background: #FFF linear-gradient(90deg, rgba(154, 205, 50,.3) 50%, rgba(154, 205, 50,.15) 50%);
  background-size: 2em 2em;
  }


/* Demo layers
-------------------------------*/

$rotation-height: 270px;

svg {
  display: inline-block;
  width: 100%;
  height: $rotation-height;
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.