Floodlight logo animated

by kthornbloom

HTML

<div class="demo-container">



<div class="flood-border">
  <div class="floodlight">
    <div class="the-flood"></div>
  </div>
</div>
<svg class="clip">
  <clipPath id="squircle" clipPathUnits="objectBoundingBox"><path d="m0.964,0.177 c-0.014,-0.061,-0.08,-0.126,-0.141,-0.141 C0.716,0.012,0.608,0,0.5,0 S0.284,0.012,0.177,0.036 c-0.061,0.014,-0.126,0.08,-0.141,0.141 c-0.048,0.216,-0.048,0.431,0,0.647 c0.014,0.061,0.08,0.126,0.141,0.141 c0.108,0.024,0.216,0.036,0.323,0.036 s0.216,-0.012,0.323,-0.036 c0.061,-0.014,0.126,-0.08,0.141,-0.141 c0.048,-0.216,0.048,-0.431,0,-0.647"></path></clipPath>
</svg>



</div>

CSS

.flood-border {
  background: #000;
  box-sizing: border-box;
  width: 108px;
  height: 108px;
  padding: 4px 0 0 4px;
  background-size: cover;
  -webkit-clip-path: url(#squircle);
  clip-path: url(#squircle);
}

.floodlight {
  background: #fff;
  width: 100px;
  height: 100px;
  background-size: cover;
  -webkit-clip-path: url(squircle);
  clip-path: url(#squircle);
}

.the-flood {
  background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCAxNDYiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTAsMHYxNDUuOTVjMy41NS0xLjEsMTAuMTEtNC42OCwxNS4wNC0xNi40Nyw2LjM0LTE1LjEzLDIwLjQ1LTIwLjM1LDMwLjY3LTExLjMxLTExLjM4LS43My0yNC4yMSwyNS41My01LjAzLDI3LjgzaDcuMzFWMEgwWiIvPjwvc3ZnPg=="); /*inline a base64 encoded svg because I'm a MONSTER */
  background-size: 25%;
  background-position: 0 -24px;
  width: 100%;
  height: 52%;
  animation: move 1s linear infinite; /* speed and easing of animation */
}

.clip {
  position: absolute;
  width: 0;
  height: 0;
}

@keyframes move {
  0% {background-position: 0 -24px}
  100% {background-position: 99% -24px;}
}












.demo-container {
  background: radial-gradient(#fff 50%, #ccc);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}