<div class="wrap">
  <svg id="sun-ray-ban" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-5.5 168 512 175">
    <defs>
       <clipPath id="circle-mask-L">
          <circle fill="transparent" cx="119" cy="250" r="76"></circle>
       </clipPath>
       <clipPath id="circle-mask-R">
          <circle fill="transparent" cx="390" cy="250" r="76"></circle>
       </clipPath>
      <linearGradient id="glass-tint" x1="66" x2="66" y1="19.7" y2="19" gradientUnits="userSpaceOnUse" gradientTransform="matrix(256 0 0 205 -16971 -3713)">
        <stop offset="0" stop-color="rgba(0,0,0,0)" stop-opacity="0"/>
        <stop offset=".3" stop-color="rgba(0,0,0,.7)" stop-opacity=".5"/>
        <stop offset="1" stop-opacity="1"/>
      </linearGradient>
      <path class="glass-ray-ban" id="glass-left" d="M93.426 182.358c23.233-2.564 47.277-3.953 70.17.801 68.2 14.161 69.575 41.75 41.498 98.782-22.879 46.473-70.245 58.119-117.999 46.982-22.014-5.137-37.075-20.275-44.175-40.936-7.492-21.803-13.191-44.954-11.907-67.872 1.719-30.686 37.099-34.962 62.413-37.757z"/>
      <path class="glass-ray-ban" id="glass-right" d="M412.889 182.358c-23.236-2.564-47.277-3.953-70.172.801-68.199 14.161-69.576 41.75-41.496 98.782 22.879 46.473 70.246 58.119 118 46.982 22.014-5.137 37.076-20.275 44.176-40.936 7.49-21.803 13.188-44.954 11.906-67.872-1.719-30.686-37.1-34.962-62.414-37.757z"/>
      <ellipse class="btn-ray-ban" id="btn" cx="16" cy="200" fill="#BFBFBF" rx="14" ry="3"/>
      <clipPath id="white-clip">
        <path class="eye-white" id="white-path" d="M24.183,258.374c41.989-62.214,117.006-70.754,167.556-19.075 c5.632,5.758,10.819,12.143,15.498,19.075C153.738,301.209,77.684,301.209,24.183,258.374z" />
      </clipPath>
      <circle id="iris" class="iris" cx="114" cy="249" r="33" clip-path="url(#white-clip)" />
    </defs>
   <!-- use back-eyes if bg-color = eye-white-color, setting opacity to 1 -->
    <g id="back-eyes" style="opacity: 1">
      <use id="glass-left-back" xlink:href="#glass-left" />
      <use id="glass-right-back" xlink:href="#glass-right" />
    </g>
    <g class="svg-eyes">
      <use id="eye-white-left" xlink:href="#white-path" />
       <use id="iris-left" xlink:href="#iris" />

      <use id="eye-white-right" xlink:href="#eye-white-left" x="275" />
      <use id="iris-right" xlink:href="#iris" x="275" />
    </g>
    <g class="svg-ray-ban">
      <use id="glass-left-front" xlink:href="#glass-left" />
      <use id="glass-right-front" xlink:href="#glass-right" />  
      <path class="bezels" d="M402.107 169.113c-41.488.271-81.467 13.003-122.188 18.095-16.996 2.124-34.514 2.646-51.538.669-22.636-2.627-44.549-9.606-67.17-12.733-20.215-2.793-40.684-5.713-61.025-5.83-35.549-.205-69.932 10.723-104.781 16.619 0 10.009-2.07 22.854 3.141 29.889 5.373 7.256 14.438 13.891 16.79 23.723 5.577 23.319 13.496 46.173 23.619 68.087 4.918 10.646 14.205 18.074 24.574 23.186 24.968 12.314 54.52 14.125 81.914 10.254 39.008-5.516 60.171-34.248 76.316-67.08 6.044-13.344 6.718-28.745 14.675-40.943 4.729-7.244 15.705-4.193 23.551-4.222 7.844-.025 14.494 12.784 16.926 21.31 8.617 30.176 22.984 62.191 51.537 78.006 42.645 23.611 109.814 19.191 137.482-23.389 10.826-16.662 13.816-36.885 19.248-55.753 3.305-11.486 6.26-25.183 18.021-31.497 4.746-2.549 1.414-12.72 2.117-18.63.764-6.441 2.234-12.138-7.098-13.403-16.283-2.208-32.076-8.919-48.738-11.192-15.789-2.159-31.261-5.271-47.373-5.166zm-274.276 10.722c11.777-.072 23.505.773 34.951 3.15 68.201 14.162 69.579 41.746 41.504 98.778-22.88 46.473-70.271 58.113-118.025 46.977-22.014-5.137-37.065-20.221-44.166-40.879-7.494-21.805-13.16-44.969-11.878-67.885 1.719-30.687 37.074-35 62.392-37.796 11.617-1.282 23.446-2.271 35.222-2.345zm249.021 0c11.779.072 23.607 1.063 35.223 2.344 25.318 2.797 60.672 7.109 62.391 37.797 1.283 22.916-4.383 46.081-11.877 67.884-7.1 20.66-22.152 35.744-44.168 40.879-47.752 11.139-95.146-.504-118.023-46.977-28.076-57.03-26.697-84.616 41.502-98.778 11.448-2.376 23.174-3.221 34.952-3.149z"/>
      <use id="btn-left" xlink:href="#btn" />
      <use id="btn-right" xlink:href="#btn" x="471" />
    </g>
    <g>
      <use id="squareL" xlink:href="#squareL" />
    </g>
      <foreignObject class="reflect reflect-l" clip-path="url(#circle-mask-L)">
        <!-- clip-path="url(#circle-mask-L)"-->
        <video autoplay class="video" width="175" height="175"></video>
      </foreignObject>
      <foreignObject class="reflect reflect-r" clip-path="url(#circle-mask-R)">
        <video autoplay class="video" width="175" height="175" ></video>
      </foreignObject>
  </svg>
</div>

$main-background-color: #fcfcfc88;
/*$background-image: url('http://hubertsouchaud.free.fr/Hubert-Souchaud-480x640.jpg');*/
$background-image-color: #4988e4;
$pulse-color: #cdde44;
$bezels-color: black;
$pupil-color: rgba(0,0,0,.5);

:root {
  --body-background: #{$background-image-color};
  --glasses-width: 80vw;
  --bezels-color: #{$bezels-color};
  --bezels-stroke-color: lighten($bezels-color, 13.5%);
  --mouse-x: .5;
  --mouse-y: .5;
  --eye-white: #{$main-background-color};
  --iris-color: var(--body-background);
  --pupil-color: #{$pupil-color};
  --reflect-l-x: 32px;
  --reflect-r-x: 296px;
  --reflect-y: 100%;
}
body {
  margin: 0;
  padding: 0;
  color: #000;
  background-color: var(--body-background);
  background-image: radial-gradient(circle at calc( 100% * var(--mouse-x) ) calc( 100% * var(--mouse-y) ), #ffffff, rgba(205, 222, 68, 0.75), rgba(0, 0, 0, 0) 25vmin);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.wrap {
  height: 100vh;
	display: flex;
	align-items: center;
  justify-content: center;
}
#sun-ray-ban {
	width: var(--glasses-width);
}
.svg-ray-ban {
  fill: var(--bezels-color);
}
.bezels {
  stroke: var(--bezels-stroke-color);
}
.glass-ray-ban {
  fill-opacity: .85;
  stroke: var(--bezels-stroke-color);
  fill: url(#glass-tint);
}
.btn-ray-ban {
  fill: darken($pulse-color, 20%);
}

.eye-white {
  fill: var(--eye-white);
}
.iris {
  stroke: var(--iris-color);
  stroke-width: 26;
  fill: var(--pupil-color);
  /*look the mouse: (cx&cy not css scriptable in FF, see Javascript)*/
  cx: calc(57px + 114px * var(--mouse-x));
  cy: calc(217px + 56px * var(--mouse-y));
}
video {
  width: 175px;
  height: 175px;
  object-fit: cover;
}
.video {
__transform: rotate(180deg);
}
.reflect {
  width: 175px;
  height: 175px;
  y: var(--reflect-y);
  &-l {
    x: var(--reflect-l-x);
  }
  &-r {
    x: var(--reflect-r-x);
  }
}

var root = document.documentElement;

root.classList.add(navigator.product);

document.addEventListener("mousemove", evt => {
	let x = evt.clientX / innerWidth;
	let y = evt.clientY / innerHeight;

	root.style.setProperty("--mouse-x", x);
	root.style.setProperty("--mouse-y", y);
  
  if (root.classList.contains("Gecko")) {
    //console.log("Firefox");
    var iris = document.getElementById("iris");
    let cx = parseInt( (x * 114) + 57 );
    let cy = parseInt( (y * 56) + 217 );
    var iris = document.getElementById("iris");
    //el.style.setProperty("fill","red");
    iris.setAttribute("cx",cx);
    iris.setAttribute("cy",cy);
    //console.log('cx:'+cx+' cy:'+cy);
  }
});
/*
navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: 'environment',
  }
})
.then((stream) => {
  const videos = document.querySelectorAll('video');
  videos.forEach(function(video) {
    video.srcObject = stream;
  });
})
.catch(err => console.error('getUserMedia() failed: ', err));
*/