Dizzy dots

Dizzy-dots.markdown

Dizzy dots

A Pen by yoksel on CodePen.

License.

index.html

<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="64%"
          y="35%"
          class="text--line"
          >
      Dizzy
    </text>
    <text text-anchor="middle"
          x="50%"
          y="86.7%"
          class="text--line2"
          >
      Dots
    </text>
    
  </symbol>
  <clippath id="cp-text">
    <text text-anchor="middle"
          x="64%"
          y="35%"
          class="text--line"
          >
      Dizzy
    </text>
    <text text-anchor="middle"
          x="50%"
          y="86.7%"
          class="text--line2"
          >
      Dots
    </text>
  </clippath>
  
  <pattern
           id="p-dottes"
           width="50"
           height="50"
           viewBox="0 0 100 100"
          patternUnits="userSpaceOnUse"
           >
    <rect
          width="100%"
          height="100%"
          fill="hsl(10,100%,55%)"></rect>
    
    <g fill="#FFF">
      <circle r="15" cx="20" cy="20"></circle>
      <circle r="22" cx="70" cy="70"></circle>
    </g>
    
  </pattern>
  
  
  <use xlink:href="#s-text"
      class="text-copy--shadow"></use>
  
  <use xlink:href="#s-text"
      class="text-copy"></use>
 
  <g clip-path="url(#cp-text)">
    <circle r="450"
        cx="400"
        cy="300"
      class="r-fill--color"
    ></circle>
    <circle r="420"
        cx="400"
        cy="300"
      class="r-fill"
    ></circle>
  </g>
  
  
  
  
</svg>

style.scss

@import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic);
HTML, BODY {
  height: 100%;
  }

BODY {
  background: hsl(200,70,70) 
    linear-gradient( 90deg,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,.4) 50%);
  background-size: .12em 100%;
  font: 25em/1 Lobster, Arial;
}

.text--line {
  font-size: .5em;
  }

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

.text-copy {
  fill: none;
  stroke: white;
  stroke-width: 20px;
  }
.text-copy--shadow {
  fill: rgba(0,0,0,.25);
  transform: translate(0, .065em);
  }
.r-fill {
  fill: url(#p-dottes);
  transform-origin: 400px 300px;
  animation: rotate 10s linear infinite;
  }

/* Fix for firefox */
.r-fill--color {
  fill: hsl(10,100%,55%);
}

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