CSS vector-effect Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Layout and basic styles */
:root {
  --gap: 18px;
  --bg: #fbfdff;
  --muted: #6b7280;
}

.wrap {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  max-width: 880px;
  margin: 24px auto;
  padding: 18px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(13, 30, 37, 0.06);
}

h1 {
  font-size: 18px;
  margin: 0 0 12px 0;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--muted);
}

.controls input[type='range'] {
  width: 240px;
}

.svgs {
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: center;
}

figure {
  margin: 0;
  text-align: center;
}

figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

/* SVG demo sizing and smooth transform */
.demo {
  width: 300px;
  height: 150px;
  display: block;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 150ms ease;
  transform-origin: center center;
  transform-box: fill-box; /* ensure transform origin is inside the SVG's viewBox */
}

/* Apply the CSS vector-effect property so stroke width does not scale */
.non-scaling rect,
.non-scaling line {
  vector-effect: non-scaling-stroke;
}

/* Visual tweak so the normal SVG shows stroke scaling more clearly */
.scaling {
  opacity: 0.98;
}

/* Small responsive behavior */
@media (max-width: 720px) {
  .svgs { flex-direction: column; }
  .demo { width: 260px; height: 130px; }
}
</style></head><body><div class="wrap">
  <h1>vector-effect: non-scaling-stroke (CSS example)</h1>

  <div class="controls">
    <label for="scale">Scale: <output id="scaleOut">100%</output></label>
    <input id="scale" type="range" min="50" max="300" value="100" />
  </div>

  <div class="svgs">
    <figure>
      <figcaption>Non-scaling stroke (CSS)</figcaption>
      <svg class="demo non-scaling" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="180" height="80" fill="none" stroke="#1e90ff" stroke-width="6" />
        <line x1="10" y1="10" x2="190" y2="90" stroke="#ff4500" stroke-width="6" stroke-linecap="round" />
      </svg>
    </figure>

    <figure>
      <figcaption>Normal scaling stroke</figcaption>
      <svg class="demo scaling" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="180" height="80" fill="none" stroke="#1e90ff" stroke-width="6" />
        <line x1="10" y1="10" x2="190" y2="90" stroke="#ff4500" stroke-width="6" stroke-linecap="round" />
      </svg>
    </figure>
  </div>
</div>

<script>
  (function () {
    const scale = document.getElementById('scale');
    const out = document.getElementById('scaleOut');
    const svgs = document.querySelectorAll('.svgs svg');

    function update() {
      const s = scale.value / 100;
      out.textContent = scale.value + '%';
      svgs.forEach(el => {
        el.style.transform = 'scale(' + s + ')';
      });
    }

    scale.addEventListener('input', update);
    update();
  })();
</script></body></html>