SCSS

by joplomacedo

HTML

<div class="toggle_container">
  <div class="toggle">
    -
    <div class="overlay"></div>
  </div>
</div>

SCSS

*,
*:after,
*:before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.toggle_container{
  position: relative;
  padding: 50px;
  background-color: #eee;
  max-width: 200px;
}

.toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 20px;
  width: 20px;
  border: 1px solid;
  border-radius: 50%;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background-color: #ffff0094;
  border: 1px solid;
  transform-origin: center;
  border-radius: 50%;
}

JavaScript

function calcHypotenuse(a, b) {
  return(Math.sqrt((a * a) + (b * b)));
}

const w = window,
			d = document,
			docEl = d.documentElement;

const toggle = d.querySelector('.toggle');
const overlay = d.querySelector('.overlay');


const vw = Math.max(docEl.clientWidth, w.innerWidth || 0);
const vh = Math.max(docEl.clientHeight, w.innerHeight || 0);

const rect = toggle.getBoundingClientRect();

const toggleCenterX  = rect.x+rect.width/2;
const toggleCenterY = rect.y+rect.height/2;

let maxXDistanceToWindowBoundary;

if (  toggleCenterX < vw/2 ) {
	maxXDistanceToWindowBoundary = vw-toggleCenterX;
} else {
	maxXDistanceToWindowBoundary = toggleCenterX;
}

console.log('maxXDistanceToWindowBoundary', maxXDistanceToWindowBoundary)

let maxYDistanceToWindowBoundary;

if ( toggleCenterY < vh/2  ) {
	maxYDistanceToWindowBoundary = vh-toggleCenterY;
} else {
	maxYDistanceToWindowBoundary = toggleCenterY;
}

let circleRaio = calcHypotenuse(maxXDistanceToWindowBoundary, maxYDistanceToWindowBoundary);

overlay.style.width = circleRaio*2+'px';
overlay.style.height = circleRaio*2+'px';