Aligning rounded objects: a practical guide

<blockquote> and 12.84% of R in all directions. </blockquote> This is <a href="https://ramdajs.com/repl/#?console.clear%28%29%0A%0Aconst%20squareSize%20%3D%20100%0A%0Aconst%20Area%20%3D%20squareSize%20%2A%20squareSize%0A%0Aconsole.log%28%601.%20A%20square%20with%20a%20side%20of%20%24%7BsquareSize%7D%20units%20has%20area%20of%20%24%7BArea%7D%20units%C2%B2.%60%29%0A%0A%2F%2F%20Area%20%3D%20PI%20%2A%20r%5E2%0A%2F%2F%20Area%20%2F%20PI%20%3D%20r%5E2%0Aconst%20radius%20%3D%20Math.sqrt%28Area%20%2F%20Math.PI%29%0A%0Aconsole.log%28%602.%20Radius%20of%20a%20circle%20with%20the%20same%20area%20of%20%24%7BArea%7D%20units%C2%B2%20as%20the%20squeare%20should%20be%20%24%7Bradius.toFixed%283%29%7D%20units.%60%29%0A%0Aconst%20diameter%20%3D%20radius%20%2A%202%0A%0Aconsole.log%28%603.%20Diameter%20of%20a%20such%20circle%20is%20therefor%20%24%7Bdiameter.toFixed%283%29%7D%20units.%60%29%0A%0Aconst%20differenceInPercents%20%3D%20%28diameter%20-%20squareSize%29%20%2F%20squareSize%20%20%2A%20100%0A%0Aconsole.log%28%604.%20Circle%20is%20%24%7BdifferenceInPercents.toFixed%283%29%7D%25%20wider%2Ftaller%20than%20the%20sqare%20of%20the%20same%20area.%60%29%0A%0Aconst%20negativaMarginToRadius%20%3D%20squareSize%20%2F%202%20-%20radius%0Aconst%20negativaMarginToRadiusInPercents%20%3D%20negativaMarginToRadius%20%2F%20radius%20%2A%20100%0A%0Aconsole.log%28%605.%20A%20circle%20extends%20%24%7BnegativaMarginToRadius.toFixed%283%29%7D%20units%20out%20of%20the%20box%2C%20which%20is%20%24%7BnegativaMarginToRadiusInPercents.toFixed%283%29%7D%25%20of%20radius.%60%29" rel="noopener ugc nofollow" target="_blank">the math behind it</a>. The square power affects the exponential decrease of the negative margin as the rounding radius decreases. As a result, the shape appears more rectangular and requires less negative expansion on the sides. <a href="https://bootcamp.uxdesign.cc/aligning-rounded-objects-a-practical-guide-3958d7ecd0da">Read More</a>