<div>
  <form class="options">
  <label>
    <input type="checkbox" id="toggler" checked />
    Show circles
  </label>
  <label>
    <input type="radio" id="ri" name="method" />
    R<sub>i</sub> + E
  </label>
  <label>
    <input type="radio" id="re" name="method" />
      R<sub>e</sub> - E
  </label>
    <button type="reset">Reset</button>
  </form>
</div>
<div 
     class="container"
     data-show-circles="true"
     data-internal-radius-plus-padding="false"
     data-external-radius-minus-padding="false"
>
  <div class="outer text">
    <div class="inner text"></div>
  </div>
</div>
  

* {
  box-sizing: border-box;
}

body {
  background: #111;
  color: #fff;
  padding: 1rem;
  display: flex;
  gap: 2rem;
  margin: 1rem;
  align-items: center;
  font-family: sans-serif;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.container {
  --border-width: 3px;
  --padding: 20px;
  --radius: 40px;
  
  aspect-ratio: 1 / 1;
  max-width: 300px;
}

.container div {
  width: 100%;
  height: 100%;
  position: relative;
}

.container[data-show-circles="false"] div:before {
  display: none;
}

.container[data-internal-radius-plus-padding="true"] {
  --inner-radius: calc(var(--radius) - var(--padding));
}

.container[data-external-radius-minus-padding="true"] {
  --outer-radius: calc(var(--radius) + var(--padding));
}

.outer:before {
  --side: calc(var(--outer-radius, var(--radius)) * 2);
  
  width: var(--side);
  height: var(--side);
}

.text:before, .text:after {
  font-size: 18px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  display: flex;
}

.outer:after {
  content: 'E';
  position: absolute;
  color: yellow;
  width: var(--padding);
  border-top: var(--border-width) solid yellow;
  right: 0;
  top: 50%;
}

.inner:before {
  --side: calc(var(--inner-radius, var(--radius)) * 2);
  
  width: var(--side);
  height: var(--side);
}

.outer:before,
.inner:before {
  position: absolute;
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  border: var(--border-width) dashed;
  border-radius: 9999px;
}

.outer:before {
  content: '·';
  color: red;
  border-color: red;
}

.inner:before {
  content: '·';
  color: blue;
  border-color: blue;
}

.outer,
.inner {
  border: var(--border-width) solid;
}

.outer {
  padding: var(--padding);
  border-radius: var(--outer-radius, var(--radius));
}

.inner {
  padding: 5rem;
  border-radius: var(--inner-radius, var(--radius));
}

const container = document.querySelector('.container')
const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
const toggler = document.querySelector('#toggler')
const ri = document.querySelector('#ri')
const re = document.querySelector('#re')
const reset = document.querySelector('button[type="reset"]')

toggler.addEventListener('click', () => {
    const current = container.dataset.showCircles
    container.dataset.showCircles = current === 'false' ? 'true' : 'false'
})

ri.addEventListener('click', () => {
  container.dataset.internalRadiusPlusPadding = 'true'
  container.dataset.externalRadiusMinusPadding = 'false'
})

re.addEventListener('click', () => {
  container.dataset.internalRadiusPlusPadding = 'false'
  container.dataset.externalRadiusMinusPadding = 'true'
})

reset.addEventListener('click', () => {
  container.dataset.showCircles = 'false'
  container.dataset.internalRadiusPlusPadding = 'false'
  container.dataset.externalRadiusMinusPadding = 'false'
})