<svg viewBox="0 0 600 300">

  <!-- Pattern -->
  <pattern
           id="p-spots"
           width="50"
           height="50"
           viewBox="0 0 90 90"
           patternUnits="userSpaceOnUse"
           >

    <g class="g-spots">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(45,45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(-45,45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(-45,-45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(45,-45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

  </pattern>

  <!-- Text -->
  <text text-anchor="middle"
        x="50%"
        y="50%"
        dy=".35em"
        class="text"
        >
    Text
  </text>

</svg>
/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: none;
  stroke: url(#p-spots);
  stroke-width: 8;
  stroke-linejoin: round;
}

/* Colorize & animate pattern */
.g-spots ellipse {
  stroke-width: 0;
  stroke-opacity: 1;
  -webkit-animation: stroke 1.5s infinite;
  animation: stroke 1.5s infinite;
}

.g-spots ellipse:nth-child(5n + 1) {
  fill: #3F0B1B;
  stroke: #3F0B1B;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.g-spots ellipse:nth-child(5n + 2) {
  fill: #7A1631;
  stroke: #7A1631;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.g-spots ellipse:nth-child(5n + 3) {
  fill: #CF423C;
  stroke: #CF423C;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.g-spots ellipse:nth-child(5n + 4) {
  fill: #FC7D49;
  stroke: #FC7D49;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.g-spots ellipse:nth-child(5n + 5) {
  fill: #FFD462;
  stroke: #FFD462;
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}

/* Change stroke-width inside animation */
@-webkit-keyframes stroke {
  50% {
    stroke-width: 27;
    stroke-opacity: .5;
  }
}

@keyframes stroke {
  50% {
    stroke-width: 27;
    stroke-opacity: .5;
  }
}

/* Other styles */
html, body {
  height: 100%;
}

body {
  background: #21060e -webkit-linear-gradient(0deg, #21060e 50%, #18040a 50%);
  background: #21060e linear-gradient(90deg, #21060e 50%, #18040a 50%);
  background-size: .2em 100%;
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}