Trefoil Knot

Trefoil knot — the simplest non-trivial knot.

Template previewRaw SVG

Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" width="320" height="320">
  <style>
    text { font:12px Inter, sans-serif; fill:#0f172a; font-weight:600; text-anchor:middle; }
  </style>
  <!-- Trefoil approximation -->
  <path d="M160,40
           C 230,40 260,110 220,160
           C 180,210 100,210 80,160
           C 60,110 90,40 160,40 Z" fill="none" stroke="#3666ff" stroke-width="6"/>
  <path d="M160,60
           C 220,60 240,110 210,150
           C 190,180 130,180 110,150
           C 90,110 100,60 160,60 Z" fill="none" stroke="#dc2626" stroke-width="4" stroke-dasharray="2 4"/>
  <text x="160" y="290">Trefoil — 3 crossings, chirality matters</text>
</svg>