#follower
  #circle1
  #circle2
View Compiled
html
  cursor none
  background #666

#follower
  position absolute
  top 50%
  left 50%
  #circle1
    position absolute
    -webkit-animation: pulse 2s infinite; /* Chrome, Safari, Opera */
    animation: pulse 2s infinite;
    background white
    border-radius 50%
    height 0em
    width 0em
    margin-top 0em
    margin-left 0em
  #circle2
    position absolute
    -webkit-animation: pulse 4s infinite; /* Chrome, Safari, Opera */
    animation: pulse 4s infinite;
    background rgba(200,0,0,0.8)
    border-radius 50%
    height 0em
    width 0em
    margin-top 0em
    margin-left 0em

  

$keyframe-name = pulse
@keyframes {$keyframe-name}
    {0%}
      opacity 0.2
      height 1em
      width 1em
      margin-top -0.5em
      margin-left -0.5em
    {50%}
      opacity 0.9
      height 3em
      width 3em
      margin-top -1.5em
      margin-left -1.5em
    {100%}
      opacity 0.2
      height 1em
      width 1em
      margin-top -0.5em
      margin-left -0.5em


View Compiled
follower = document.getElementById('follower')
printout = document.getElementById('printout')

mouseX = (event) =>
  return event.clientX

mouseY = (event) =>
  return event.clientY

positionElement = (event) =>
  mouse = {
    x: mouseX(event)
    y: mouseY(event)
  }
  follower.style.top = mouse.y + 'px'
  follower.style.left = mouse.x + 'px'

timer = false
window.onmousemove = init = (event) =>
  _event = event
  timer = setTimeout =>
    positionElement(_event)
  , 1
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.