<div class="container">
  <h1 class="title">
    This is <br/> 
    just SVG
  </h1>
  <div class="subtitle">
    How cool is that?
  </div>
</div>

<div class="cursor">
  <div class="cursor__point"></div>
  <div class="cursor__light"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <filter id="light">
    <feSpecularLighting result="specOut" surfaceScale="1" specularConstant="1.2" specularExponent="10" lighting-color="#999">
      <fePointLight id="point-light" x="50" y="75" z="100" />
    </feSpecularLighting>
  </filter>

  <filter id="noise">
    <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.999 0.999" seed="1" numOctaves="10" />
    <feColorMatrix type="saturate" values="0" />
    <feComponentTransfer result="noise">
      <feFuncA type="linear" slope="1" />
    </feComponentTransfer>
    <feBlend in="noise" in2="SourceGraphic" mode="multiply" />
  </filter>
</svg>

body {  
  background: black;
  cursor: none;
}

.container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
  
  align-items: center;
  flex-direction: column;
  filter: url('#noise') url('#light');
  justify-content: center;
  transform: translate3d(0, 0, 0);
  z-index: 1;
  
  color: #fff;
  text-align: center;
}

.title {
  margin: 0 0 0.075em;
  font-family: 'Dorsa', sans-serif;
  font-size: 18em;
  font-weight: 400;
  line-height: 0.8;
  text-transform: uppercase;
}

.subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  z-index: 10;
}

.cursor {
  &__point {
    margin: -3px 0 0 -3px;
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;

    background-color: white;
    border-radius: 50%;
    z-index: 2;
  }
  
  &__light {
    margin: -24px 0 0 -24px;
    position: fixed;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;

    background-color: white;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 2;
  }
}

/* Constants */
const mouse = {
  x: 0,
  y: 0,
  smoothX: 0,
  smoothY: 0
}

const cursorPoint = document.querySelector('.cursor__point')
const cursorLight = document.querySelector('.cursor__light')
const light = document.querySelector('#point-light')
const turbulence = document.querySelector('#turbulence')
let noise = 0

/* Get mouse coordinates */
function onMouseMove (e) {
  mouse.x = e.pageX
  mouse.y = e.pageY
}
window.addEventListener('mousemove', onMouseMove)

/* Animate */
function tick () {
  // Move light
  light.setAttribute('x', mouse.smoothX)
  light.setAttribute('y', mouse.smoothY)
  
  // Noise
  noise += 0.5
  turbulence.setAttribute('seed', Math.round(noise))
  
  // Move cursor
  cursorPoint.style.transform = 'translate3d(' + mouse.x + 'px, ' + mouse.y + 'px, 0)'
  cursorLight.style.transform = 'translate3d(' + mouse.smoothX + 'px, ' + mouse.smoothY + 'px, 0)'
  
  // Smooth mouse
  mouse.smoothX += (mouse.x - mouse.smoothX) * 0.1
  mouse.smoothY += (mouse.y - mouse.smoothY) * 0.1
  
  requestAnimationFrame(tick)
}
tick()