<svg viewBox="0 0 600 300">

  <!-- Pattern -->
  <pattern
           id="p-stars"
           width="70"
           height="70"
           viewBox="0 0 120 120"
           patternUnits="userSpaceOnUse"
           >

    <g class="g-stars">
      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549 "
               transform="
                          scale(.9,.9)"        
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(30,30)
                          scale(.9,.9)
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(90,30)
                          scale(.9,.9)
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(0,60)
                          scale(.9,.9)" 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549 "
               transform="
                          translate(60,0)
                          scale(.9,.9)  
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(60,60)
                          scale(.9,.9)  
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(90,90)
                          scale(.9,.9)
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(30,90)
                          scale(.9,.9)
                          " 
               ></polygon>


      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(120,60)
                          scale(.9,.9)
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(60,120)
                          scale(.9,.9)
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(0,120)
                          scale(.9,.9)
                          " 
               ></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(-30,90)
                          scale(.9,.9)
                          " 
               ></polygon>

      <!-- Hack to make shapes full  -->
      <polygon></polygon>
      <polygon></polygon>
      <polygon></polygon>

      <polygon
               points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
               transform="
                          translate(120,0)
                          scale(.9,.9)
                          " 
               ></polygon>

    </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: url(#p-stars);
  stroke: #551F7A;
  stroke-width: 3;
}

/* Colorize & animate pattern */
.g-stars polygon {
  stroke-width: 0;
  -webkit-animation: stroke 2s infinite;
  animation: stroke 2s infinite;
}

.g-stars polygon:nth-child(5n + 1) {
  fill: #551F7A;
  stroke: #551F7A;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.g-stars polygon:nth-child(5n + 2) {
  fill: #BA2799;
  stroke: #BA2799;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.g-stars polygon:nth-child(5n + 3) {
  fill: #D9587A;
  stroke: #D9587A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.g-stars polygon:nth-child(5n + 4) {
  fill: #FFDD00;
  stroke: #FFDD00;
  -webkit-animation-delay: -1.6s;
  animation-delay: -1.6s;
}

.g-stars polygon:nth-child(5n + 5) {
  fill: #FFF3A1;
  stroke: #FFF3A1;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

/* Change stroke-width within animation */
@-webkit-keyframes stroke {
  50% {
    stroke-width: 8;
  }
}
@keyframes stroke {
  50% {
    stroke-width: 8;
  }
}

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

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

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