index.haml

.box
  .one
  .two

Playing-with-CSS-Filters..markdown

Playing with CSS Filters.

Using contrast() to posterise the image, in turn rounding the overlapped blurred regions of the two circles to a block colour.

A Pen by Sam Jarvis on CodePen.

License.

style.scss

body,
html {
  height:100%;
}

body {
  text-align:center;
  background-color:black;
  
  &:before {
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
  }
}

@keyframes pulse {
  
  70% {
    background-color:lighten(purple, 50);
  }
}

.box {
  -webkit-filter:contrast(30);
  background-color:black;
  font-size:10em;
  padding:0.5em;
  position:relative;
  color:mix(white, black, 50%);
  border:2px solid;
  
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:middle;
  
  transition:background-color 2s linear;
  
  &:before {
    content:"hover";
    font-size:14px;
    position:absolute;
    bottom:104%;
    left:0;
  }
  
  &:after {
    content:"or click";
    font-size:14px;
    position:absolute;
    top:104%;
    right:0;
  }
  
  &:hover {
    background-color:lighten(purple, 30);
    animation:pulse 5s ease-in infinite;
  }
  
  &:active {
    background-color:black;
    -webkit-filter:contrast(50) invert(1) ;
    animation:none;
  }
}

@keyframes swayx {
  50% {
    left:75%;
  }
}

@keyframes swayy {
  50% {
    top:75%;
  }
}

@keyframes color {
 @for $i from 1 through 7 {
    #{percentage($i/7)} {
      background-color:adjust-hue( red, percentage($i/7));
    }
  }
}

.circle {
  border-radius:50%;
  height:1em;
  width:1em;
  -webkit-filter:blur(25px);
  position:absolute;
  background-color:white;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.one {
  @extend .circle;
  animation:
    color 12s linear infinite alternate;
}

.two {
  @extend .circle;
  font-size:0.75em;
  left:-75%;
  top:-75%;
  
  animation:
    swayx 3s ease-in-out infinite,
    swayy 3.3s ease-in-out infinite,//apparent chaos
    color 16s linear infinite alternate-reverse;
}