JSFiddle - React, Tailwind, and code Playground

CSS

label { display: block; margin-top: 0.5em;}

input:not(:valid) { box-shadow: 2px 2px 2px red; }

JavaScript

console.clear();
let i, x1=750, y1=300, r = 100, r2 = r*r, c0=0;
// Base runtime for loop
let start = performance.now();
for (i=0; i<1000000; i++) {
   let x2 = i % 1000, y2 = i/1000;
   let dx = x1 - x2, dy = y1 - y2;
   let d = 0;
   if (d < r) c0++;
}
let runtime0 = performance.now() - start;
// manual distance calculation
start = performance.now();
let c1 = 0;
for (let i=0; i<1000000; i++) {
   let x2 = i % 1000, y2 = i/1000;
   let dx = x1 - x2, dy = y1-y2;
   let d = dx*dx+dy*dy;
   if (d < r2) c1++;
}
let runtime1 = performance.now() - start;
// manual distance calculation, with sqrt
start = performance.now();
let c2 = 0;
for (let i=0; i<1000000; i++) {
   let x2 = i % 1000, y2 = i/1000;
   let dx = x1 - x2, dy = y1-y2;
   let d = Math.sqrt(dx*dx+dy*dy);
   if (d < r) c2++;
}
let runtime2 = performance.now() - start;
// distance calculation with Math.hypot
start = performance.now();
let c3 = 0;
for (i=0; i<1000000; i++) {
   let x2 = i % 1000, y2 = i/1000;
   let dx = x1 - x2, dy = y1 - y2;
   let d = Math.hypot(dx,dy);
   if (d < r) c3++;
}
let runtime3 = performance.now() - start;

console.log("Runtime base : " + runtime0 + ", " + c0 + " counted");
console.log("Runtime self : " + runtime1 + ", " + c1 + " counted");
console.log("Runtime sqrt : " + runtime2 + ", " + c2 + " counted" + 
     " factor " + (runtime2-runtime0)/(runtime1-runtime0));
console.log("Runtime hypot: " + runtime3 + ", " + c3 + " counted" + 
     " factor " + (runtime3-runtime0)/(runtime1-runtime0));