CSS Sqrt Function Basic

<!DOCTYPE html>
<title>My Example</title>

.sqrt-circle {
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
    
    /* 
      Calculate the width and height using sqrt().
      We multiply the base size by the square root of our area multiplier.
    */
    width: calc(var(--base-size) * sqrt(var(--area-multiplier)));
    height: calc(var(--base-size) * sqrt(var(--area-multiplier)));
  }

/* The base circle (1x area) */
  .circle-1x { 
    --area-multiplier: 1; 
    background-color: #6c757d;
  }

/* The scaled circle (2x area) */
  .circle-2x { 
    --area-multiplier: 2; 
    background-color: #0d6efd;
  }
</style>