SVG Drawing - Explanation

by PrismDan

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 40">
  <mask id="lineMask">
    <path d="M0 5h330" stroke="#333" stroke-width="10" stroke-linecap="round" />
    <path d="M85 5h80" stroke="#fff" stroke-width="10" stroke-linecap="round" />
  </mask>

  <g mask="url(#lineMask)">
    <rect x="0" y="0" width="330" height="10" fill="none" />
    <path d="M85 5h80" stroke="rgba(0, 0, 0, .25)" stroke-width="10" stroke-linecap="round" />
    <path d="M5 5h320" class="target" />
  </g>
  
  <path d="M80 15v5h90v-5" stroke="#fff" stroke-width="1" fill="none" />
  
  <text x="80" y="35">Visible section</text>
</svg>

CSS

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

svg {
  width: 500px;
  max-width: 90vw;
  height: auto;
}

path.target {
  --path-length: 160;
  
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--path-length) / 2);
  stroke-dashoffset: 0;
  animation: animate-path 3s infinite linear;
  opacity: 1;
}

@keyframes animate-path {
  from {
    stroke-dashoffset: var(--path-length);
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

text {
  fill: #fff;
  font-family: monospace;
  font-size: 10px;
}