13Dotted Line Draw

II · Drawing with SVG

A dotted path draws itself by masking a solid twin underneath.

Auto

Source

2 files

<head>
  <link rel="stylesheet" href="/base.css" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <svg id="svg" aria-hidden="true" viewBox="0 0 24 24" width="420" fill="none">
    <defs>
      <mask id="mask">
        <path
          d="M2 12 Q7 4 12 12 T22 12"
          fill="none"
          stroke="white"
          stroke-linecap="round"
          stroke-width="2"
          stroke-dasharray="30"
          stroke-dashoffset="30"
        >
          <animate
            attributeName="stroke-dashoffset"
            to="0"
            dur="1s"
            fill="freeze"
          />
        </path>
      </mask>
    </defs>
    <path
      mask="url(#mask)"
      d="M2 12 Q7 4 12 12 T22 12"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-dasharray="2"
    />
  </svg>
</body>