JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<div class="container">

  <div class="out-alt" id="testAlt">
    <div class="in-alt">A</div>
  </div>
  <svg height="34" width="34" id="testSvg">

    <circle cx="16" cy="16" r="14" fill="black"></circle>
    <circle cx="16" cy="16" r="16" stroke="black" stroke-width="1" fill="none"></circle>
    <text x="7" y="25" font-size="25" fill="white">
      V
    </text>
  </svg>
  <div class="out" id="testZoom">
    <div class="in">Z</div>
  </div>
  <div class="out" id="testScale">
    <div class="in">S</div>
  </div>


</div>

CSS

html,
body {
  width: 100%;
  height;
  100%;
}

.container {
  display: flex;
  flex-direction: row;
}

.out {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  border: 1px solid black;
  transform-origin: 0 0;
}

.in {
  font-size: 25px;
  color: #fff;
  border-radius: 50%;
  width: 29px;
  height: 29px;
  text-align: center;
  background-color: black;
}

.out-alt {
  text-align: center;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  border: 1px solid black;
  position:relative;
}

.in-alt {
  font-size: 25px;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  background-color: black;
  position: absolute;
  top:1px;
  bottom:1px;
  left:1px;
  right:1px;
  line-height:1.1;
}

JavaScript

var elSlider = document.createElement("input");
var elTestZoom = document.getElementById("testZoom");
var elTestScale = document.getElementById("testScale");
var elTestSvg = document.getElementById("testSvg");
var elTestAlt = document.getElementById("testAlt")
elSlider.type = "range";
elSlider.min = 1;
elSlider.max = 1000;
elSlider.value = 100;
elSlider.style = "width:95%;position:absolute;top:0";
document.body.appendChild(elSlider);
elSlider.addEventListener("input", function(e) {
  var v = this.value;
  var z = v + "%";
  elTestSvg.style.zoom = z;
  elTestZoom.style.zoom = z;
  elTestAlt.style.zoom = z;
  elTestScale.style.transform = "scale(" + v / 100 + ")";
})