CSS stroke Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">:root {
  --stroke: #2563eb;
  --accent: #f97316;
}

.example {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
}

.icon {
  width: 360px;
  height: 220px;
  overflow: visible;
}

/* circle uses a solid stroke and reduced opacity */
.icon .outline {
  stroke: var(--stroke);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.9;
}

/* rect uses a different color and miter join */
.icon .box {
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
}

/* path uses dashed stroke and round joins */
.icon .zig {
  stroke: #10b981;
  stroke-width: 5;
  stroke-dasharray: 12 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* long dashed line */
.icon .dash {
  stroke: #6b21a8;
  stroke-width: 4;
  stroke-dasharray: 6 6;
}

/* stroked text (SVG) - stroke provides outline */
.icon .stroked {
  fill: white;
  stroke: #111827;
  stroke-width: 2;
  font-size: 30px;
  font-weight: 700;
}

/* demo: using -webkit-text-stroke for HTML text fallback */
.example h1 {
  margin: 0;
  font-size: 16px;
  -webkit-text-stroke: 1px #111827;
  color: #111827;
}
</style></head><body><div class="example">
  <h1>SVG stroke examples</h1>
  <svg viewBox="0 0 200 120" class="icon" aria-hidden="true">
    <circle class="outline" cx="40" cy="40" r="30" fill="none" />
    <rect class="box" x="80" y="10" width="60" height="60" fill="none" />
    <path class="zig" d="M10 90 Q 50 50 90 90 T 170 90" fill="none" />
    <line class="dash" x1="10" y1="110" x2="190" y2="110" />
    <text class="stroked" x="100" y="90" text-anchor="middle" dominant-baseline="middle">SVG</text>
  </svg>
</div></body></html>