<svg class="svg svg--rays">
    <circle r="50%" cx="50%" cy="50%" class="c-rays"></circle>
</svg>

<svg class="svg svg--hand" viewBox="0 0 700 440">
    <defs>
        <mask id="mask" 
              maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
            <image xlink:href="https://img-fotki.yandex.ru/get/9167/5091629.a4/0_8d418_ba8c7e7d_orig" 
                   width="700" height="440"></image>
        </mask>
        
        <pattern
            id="patt" width="500" height="500"
           patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
            
                <rect width="10" height="10" 
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" x="10"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" x="20"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" x="30"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" x="40"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" x="50"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" x="60"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" x="70"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" x="80"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" x="90"
                      fill="purple" class="cell"></rect>
            
                <!-- line -->
                <rect width="10" height="10" 
                      y="10"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="10"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="10"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="10"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="10"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="10"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="10"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="10"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="10"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="10"
                      fill="purple" class="cell"></rect>
            
               <!-- line -->
                <rect width="10" height="10" 
                      y="20"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="20"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="20"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="20"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="20"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="20"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="20"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="20"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="20"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="20"
                      fill="purple" class="cell"></rect>
            
               <!-- line -->
                <rect width="10" height="10" 
                       y="30"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="30"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="30"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="30"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="30"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="30"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="30"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="30"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="30"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="30"
                      fill="purple" class="cell"></rect>
            
              <!-- line -->
                <rect width="10" height="10" 
                      y="40"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="40"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="40"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="40"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="40"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="40"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="40"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="40"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="40"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="40"
                      fill="purple" class="cell"></rect>
            
               <!-- line -->
                <rect width="10" height="10" 
                      y="50"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="50"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="50"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="50"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="50"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="50"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="50"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="50"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="50"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="50"
                      fill="purple" class="cell"></rect>
            
               <!-- line -->
                <rect width="10" height="10" 
                      y="60"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="60"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="60"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="60"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="60"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="60"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="60"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="60"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="60"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="60"
                      fill="purple" class="cell"></rect>
            
               <!-- line -->
                <rect width="10" height="10" 
                      y="70"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="70"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="70"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="70"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="70"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="70"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="70"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="70"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="70"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="70"
                      fill="purple" class="cell"></rect>
            
               <!-- line -->
                <rect width="10" height="10" 
                      y="80"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="80"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="80"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="80"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="80"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="80"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="80"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="80"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="80"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="80"
                      fill="purple" class="cell"></rect>
            
               <!-- line -->
                <rect width="10" height="10" 
                      y="90"
                      fill="maroon" class="cell"></rect>
                <rect width="10" height="10" 
                      x="10" y="90"
                      fill="crimson" class="cell"></rect>
                <rect width="10" height="10" 
                      x="20" y="90"
                      fill="orangered" class="cell"></rect>
                <rect width="10" height="10" 
                      x="30" y="90"
                      fill="gold" class="cell"></rect>
                <rect width="10" height="10" 
                      x="40" y="90"
                      fill="yellowgreen" class="cell"></rect>
                <rect width="10" height="10" 
                      x="50" y="90"
                      fill="skyblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="60" y="90"
                      fill="steelblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="70" y="90"
                      fill="darkslateblue" class="cell"></rect>
                <rect width="10" height="10" 
                      x="80" y="90"
                      fill="darkviolet" class="cell"></rect>
                <rect width="10" height="10" 
                      x="90" y="90"
                      fill="purple" class="cell"></rect>

        </pattern>
    </defs>
    
    <rect width="100%" height="100%" fill="url(#patt)" mask="url(#mask)">
    </rect>
</svg>
$patt-max: 24;


BODY {
    background: #000;
}

.svg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    
    &--rays {
        width: 100%;
        height: 100%;        
    }
    
    &--hand {
        width: 95vmin;
        height: 95vmin;        
    }
}

.cell {
    fill: maroon;
 
// Transform Doesn't work in FF :(
//     @for $item from 1 through 10 {
//         $num: $item * 10;
//         $pos: $num + 1;
//         $offset: #{$num}px;
        
//         &:nth-child(n + #{$pos}) {
//             transform: translateY($offset);   
//         }
//     }
    
    animation: colors 3.5s linear infinite;
    
    @for $item from 1 through $patt-max {
        $rand: random($patt-max);
        
        &:nth-child(#{$patt-max}n + #{$item}) {
            animation-delay: -#{$rand * .5s};
        }
    }
        
}

@keyframes colors {
    0% {
        fill: maroon;
    }
    10% {
        fill: crimson;
    }
    20% {
        fill: orangered;
    }
    30% {
        fill: gold;
    }
    40% {
        fill: yellowgreen;
    }
    50% {
        fill: skyblue;
    }
    60% {
        fill: steelblue;
    }
    70% {
        fill: slateblue;
    }
    80% {
        fill: darkviolet;
    }
    90% {
        fill: purple;
    }
}

.c-rays {
    fill: none;
    stroke: hsl(0, 0, 2);
    stroke-width: 100%;
    stroke-dasharray: 5%;
    animation: rotate 20s linear infinite;
    transform-origin: 50% 50%;
    }

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.