SVG Drawing - Basic example

by PrismDan

HTML

<label>
  <input id="toggle" type="checkbox" />
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <circle class="target" cx="100" cy="100" r="95" />
    <circle class="placeholder" cx="100" cy="100" r="95" />
  </svg>
</label>

CSS

body {
  background-color: rgb(2, 62, 80);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  width: 120px;
  max-width: 90vw;
  height: auto;
  transform: rotate(-90deg);
  transform-origin: center;
}

circle {
  --path-length: 595.9384155273438;
  
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  transition: stroke-dashoffset 1s ease-in-out;
}

circle.placeholder {
  stroke-dashoffset: 0;
  opacity: .15;
}

#toggle:checked ~ svg circle.target {
  stroke-dashoffset: 0;
}

label {
  position: relative;
  cursor: pointer;
}

label:after {
  content: 'Click to draw';
  position: absolute;
  color: #fff;
  font-family: monospace;
  top: calc(100% + 1em);
  left: 0;
  width: 100%;
  text-align: center;
}

#toggle {
  display: none;
}