<div class="dots">

  <div class="dot">
    <svg viewBox="-250 -250 500 500">
      <circle r="200" id="circle" />
    </svg>
  </div><!-- dot -->

  <div class="dot">
    <svg viewBox="-250 -250 500 500">
      <circle r="200" id="circle" />
    </svg>
  </div><!-- dot -->

  <div class="dot">
    <svg viewBox="-250 -250 500 500">
      <circle r="200" id="circle" />
    </svg>
  </div><!-- dot -->

  <div class="dot">
    <svg viewBox="-250 -250 500 500">
      <circle r="200" id="circle" />
    </svg>
  </div><!-- dot -->

</div><!-- dots -->

.dots {
  padding: 25px 0;
  text-align: center;
  background: #f67714;
}

.dot {
  width: 10px;
  height: 10px;
  background: #000;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5%;
  position: relative;
  cursor: pointer;
  transition: 0.34s linear;
}

.dot.active {
  background: #fff;
}

.dot:hover {
  background: #888;
}

/* 1256 */
svg circle {
  fill: none;
  stroke: #000;
  stroke-width: 20;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  stroke-dasharray: 0 1256;
  transition: 0.34s linear;
}

.dot svg {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

svg circle.active {
  stroke-dasharray: 1256 1256;
  stroke: #fff;
}

document.querySelectorAll("svg").forEach(function (el) {
  el.setAttribute("xmlns", "http://www.w3.org/2000/svg");
}); /* set xmlns attribute in svg */

let parent = document.querySelector(".dots");
let dots = document.querySelectorAll("svg circle");

parent.addEventListener("click", function (e) {
  dots.forEach(function (el) {
    el.classList.remove("active");
    el.closest(".dot").classList.remove("active");
  });
  e.target.children[0].classList.add("active");
  e.target.parentNode.classList.add("active");
});