Skip to content
Raw SVG templates

Free-Body — Cantilever

Cantilever beam with point load, reaction force and moment.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 240" width="480" height="240">
  <style>
    text { font:12px Inter, sans-serif; fill:#0f172a; font-weight:600; }
    line.f { stroke:#0f172a; stroke-width:1.8; }
  </style>
  <defs>
    <marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M0,0 L10,5 L0,10 z" fill="#0f172a"/>
    </marker>
  </defs>
  <!-- Wall -->
  <rect x="40" y="40"  width="20" height="140" fill="#94a3b8" stroke="#0f172a"/>
  <!-- Beam -->
  <rect x="60" y="100" width="360" height="20" fill="#dbeafe" stroke="#0f172a"/>
  <!-- Applied load P at free end -->
  <line class="f" x1="420" y1="40" x2="420" y2="100" marker-end="url(#a)"/>
  <text x="430" y="60">P</text>
  <!-- Reaction force + moment at wall -->
  <line class="f" x1="60" y1="180" x2="60" y2="120" marker-end="url(#a)"/>
  <text x="30" y="160">R = P</text>
  <text x="10" y="100">M = P·L</text>
  <path d="M40,90 A20,20 0 0,1 60,110" fill="none" stroke="#0f172a" stroke-width="2" marker-end="url(#a)"/>
  <!-- Dimensions -->
  <line x1="60" y1="200" x2="420" y2="200" stroke="#475569"/>
  <text x="220" y="220">L</text>
</svg>