"changing dots" optical illusion w/ bg gradients😎😵

changing-dots-optical-illusion-w-bg-gradients.markdown

"changing dots" optical illusion w/ bg gradients😎😵

Creating another optical illusion with CSS.

As your eyes move around the page, the dots should change between white and black.

Simply made with a combination of background size and use of gradients.

Enjoy!

A Pen by jh3y on CodePen.

License.

style.stylus

*
  box-sizing border-box
  animation  fadeIn .5s

$bg = #000
$fg = rgb(153, 153, 153)
$cc = #fff
$lw = 20%
$bgSize = 100px

body
  background linear-gradient(90deg, $fg, $fg $lw, transparent $lw, transparent 100%),
    linear-gradient(180deg, $fg, $fg $lw, $bg $lw, $bg 100%)
  background-size $bgSize $bgSize

  &:after
    content ''
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    background radial-gradient(75% 75% at 20px 20px, $cc $lw, transparent $lw)
    background-size $bgSize $bgSize
    background-position -10px -10px

@keyframes fadeIn
  from
    opacity 0
  to
    opacity 1