Skip to content
Raw SVG templates

Four-Bar Linkage

Crank-rocker four-bar mechanism with link labels.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 280" width="480" height="280">
  <style>
    text { font:12px Inter, sans-serif; fill:#0f172a; font-weight:600; }
    line.link { stroke:#0f172a; stroke-width:3; stroke-linecap:round; }
    circle.j { fill:#3666ff; stroke:#0f172a; stroke-width:1.4; }
  </style>
  <!-- Ground -->
  <polygon points="60,220 100,220 80,240" fill="#94a3b8" stroke="#0f172a"/>
  <polygon points="380,220 420,220 400,240" fill="#94a3b8" stroke="#0f172a"/>
  <line x1="60" y1="240" x2="420" y2="240" stroke="#94a3b8" stroke-dasharray="4 4"/>
  <!-- Links -->
  <line class="link" x1="80"  y1="220" x2="160" y2="100"/>
  <line class="link" x1="160" y1="100" x2="340" y2="140"/>
  <line class="link" x1="340" y1="140" x2="400" y2="220"/>
  <line class="link" x1="80"  y1="220" x2="400" y2="220"/>
  <!-- Joints -->
  <circle class="j" cx="80"  cy="220" r="6"/>
  <circle class="j" cx="160" cy="100" r="6"/>
  <circle class="j" cx="340" cy="140" r="6"/>
  <circle class="j" cx="400" cy="220" r="6"/>
  <!-- Labels -->
  <text x="100" y="160">a (crank)</text>
  <text x="220" y="110">b (coupler)</text>
  <text x="350" y="180">c (rocker)</text>
  <text x="200" y="260">d (ground)</text>
</svg>