CSS stroke-dasharray Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
  background: #f7f9fc;
  color: #111;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}

h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

svg {
  width: 100%;
  height: auto;
  display: block;
}

.label {
  font-size: 12px;
  fill: #444;
}

/* Stroke styles */
line {
  vector-effect: non-scaling-stroke;
}

.solid {
  stroke: #1a73e8;
  stroke-width: 8;
  stroke-linecap: round;
}

.dashed {
  stroke: #e37400;
  stroke-width: 8;
  stroke-linecap: butt;
  stroke-dasharray: 12 6; /* 12px dash, 6px gap */
}

.dotted {
  stroke: #34a853;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 2 8; /* short dash, larger gap -> dotted appearance */
}
</style></head><body><div class="container">
  <h2>SVG stroke-dasharray examples</h2>
  <svg viewBox="0 0 500 150" width="800" height="240" role="img" aria-label="stroke-dasharray examples">
    <g transform="translate(20,20)">
      <text x="0" y="0" class="label">Solid (no dash)</text>
      <line x1="0" y1="20" x2="460" y2="20" class="solid" />

      <text x="0" y="60" class="label">Dashed (12 6)</text>
      <line x1="0" y1="80" x2="460" y2="80" class="dashed" />

      <text x="0" y="120" class="label">Dotted (2 8)</text>
      <line x1="0" y1="140" x2="460" y2="140" class="dotted" />
    </g>
  </svg>
</div></body></html>