<svg class="demo demo--text">
            <defs>
                <pattern
                   id="p-anim-spots"
                   width="120" height="120"
                   viewBox="0 0 120 120"
                   patternUnits="userSpaceOnUse">

                    <g class="g-anim-spots">
                        <circle r="5"
                                cx="15" cy="15"/>
                        <circle r="5"
                                cx="45" cy="15"/>
                        <circle r="5"
                                cx="75" cy="15"/>
                        <circle r="5"
                                cx="105" cy="15"/>
                      
                        <circle r="5"
                                cx="15" cy="45"/>
                        <circle r="5"
                                cx="45" cy="45"/>
                        <circle r="5"
                                cx="75" cy="45"/>
                        <circle r="5"
                                cx="105" cy="45"/>
                        
                        <circle r="5"
                                cx="15" cy="75"/>
                        <circle r="5"
                                cx="45" cy="75"/>
                        <circle r="5"
                                cx="75" cy="75"/>
                        <circle r="5"
                                cx="105" cy="75"/>
                        
                        <circle r="5"
                                cx="15" cy="105"/>
                        <circle r="5"
                                cx="45" cy="105"/>
                        <circle r="5"
                                cx="75" cy="105"/>
                        <circle r="5"
                                cx="105" cy="105"/>
                    </g>

                  </pattern>
            </defs>

            <text x="50%" y="50%" dy=".3em" text-anchor="middle"
                class="text--fill"
                fill="url(#p-anim-spots)"
                >text</text>
        </svg>

// @import compass

@import url(https://fonts.googleapis.com/css?family=Russo+One);

BODY {
  background: #000;
  }
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  }

.demo--text {
    font: 16em/1 'Russo One', Impact;
    letter-spacing: .05em;
    stroke: royalblue;
    stroke-width: 2;
    stroke-dasharray: 20 10;
    }

$anim-spots-colors:
    yellowgreen,
    deeppink,
    royalblue,
    gold,
    orangered,
    yellow,
    lightseagreen,
    orange,
    darkviolet,
    skyblue,
    magenta,
    mediumslateblue,
    lightgreen,
    tomato,
    chartreuse,
    teal
    ;
$anim-spots-max: length($anim-spots-colors);
$anim-spots-time: 20s;
$anim-spots-step: $anim-spots-time/$anim-spots-max;

.g-anim-spots circle {

    fill: chartreuse;
    stroke: chartreuse;
    stroke-width: 0;
    stroke-dasharray: 1000;
    animation: anim-spots $anim-spots-time infinite linear;
    animation-name: anim-spots, anim-spots-stroke;
    animation-duration: $anim-spots-time, $anim-spots-time/10;

    @for $item from 1 through $anim-spots-max {
        $fill-color: nth($anim-spots-colors, $item);

        &:nth-child(#{$item}) {
          fill: $fill-color;
          stroke: $fill-color;
          animation-delay: -$anim-spots-step*$item;
          }
    }
}

@keyframes anim-spots {

    @for $item from 1 through $anim-spots-max {
        $perc: percentage(100/$anim-spots-max*$item/100);
        $fill-color: nth($anim-spots-colors, $item);

        #{$perc} {
            fill: $fill-color;
            stroke: $fill-color;
        }
    }
}

@keyframes anim-spots-stroke {
  50% {
    stroke-width: 18;
  }
}