JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
  <defs>
    <path id="vLine" d="M50,0 50,100" stroke-width="2px" vector-effect="non-scaling-stroke"></path> 
    <path id="hLine" d="M0,50 100,50" stroke-width="2px" vector-effect="non-scaling-stroke"></path>
  </defs>
<use xlink:href="#vLine" stroke="#0ff"></use>
<use xlink:href="#hLine" stroke="#af0"></use>
<circle
  cx="50"
  cy="50"
  r="10"
  stroke="#fa0"
  fill="none"
  stroke-width="3px"
  vector-effect="non-scaling-stroke"
></circle>
</svg>

CSS

html, body {
  height: 100%;

svg, use {
  width: 100%;
  height: 100%;
}