JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<!-- <h1>This title is 5vw</h1>

<div class="box">
  The window is <span class="window"></span> px.
  The heading is <span class="heading"></span> px
</div> -->

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
  with relative unit such as percentage, the visual size
  of the square looks unchanged regardless of the viewBox
  -->
  <rect x="0" y="0" width="100%" height="100%"/>

  <!--
  with a large viewBox the circle looks small
  as it is using user units for the r attribute:
  4 resolved against 100 as set in the viewBox
  -->
  <circle cx="50%" cy="50%" r="10px" fill="white"/>
</svg>

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <!--
  with relative unit such as percentage, the visual size
  of the square looks unchanged regardless of the viewBox`
  -->
  <rect x="0" y="0" width="100%" height="100%"/>

  <!--
  with a small viewBox the circle looks large
  as it is using user units for the r attribute:
  4 resolved against 10 as set in the viewBox
  -->
  <circle cx="50%" cy="50%" r="10px" fill="white"/>
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  The point of coordinate 0,0 is now in the center of the viewport,
  and 100% is still resolve to a width or height of 10 user units so
  the rectangle looks shifted to the bottom/right corner of the viewport
  -->
  <rect x="0" y="0" width="100%" height="100%"/>

  <!--
  With the point of coordinate 0,0 in the center of the viewport the
  value 50% is resolve to 5 which means the center of the circle is
  in the bottom/right corner of the viewport.
  -->
  <circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>

CSS

h1 {
  font-size: 10vw;
  display: inline-block;
}

.box {
  display: block;
  padding: 20px;
  margin-top: 100px;
}


body {
  display: flex;
  width: 100vw;
  height: 100vh;
}

svg {
  display: block;
  width: 100%;
  overflow: hidden;
  background: blue;
}

rect {
  fill: red;
  
}

JavaScript

function getWidths() {
$('.window').text($(window).width());
$('.heading').text($('h1').css('font-size'));
}

getWidths();

$(window).on('resize', function(){
	getWidths();
})