HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SVG Circle — styles</title>
</head>
<body>
  <h1>SVG &lt;circle&gt; — dashed &amp; opacity</h1>
  <svg width="220" height="120" role="img" aria-label="Semi-transparent and dashed circles">
    <circle cx="60" cy="60" r="40" fill="#ef4444" fill-opacity="0.35" stroke="#991b1b" stroke-width="2" />
    <circle cx="160" cy="60" r="40" fill="none" stroke="#6d28d9" stroke-width="3" stroke-dasharray="6 4" />
  </svg>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Circle — dashed border and opacity (Try It)