Skip to content
Raw SVG templates

Free-body Diagram (SVG)

Block on an incline with all forces drawn.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 280" width="600">
  <defs>
    <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto">
      <path d="M0,0 L10,5 L0,10 z" fill="#0f172a"/>
    </marker>
  </defs>
  <!-- incline -->
  <polygon points="40,240 420,240 420,140" fill="#fde68a" stroke="#92400e"/>
  <!-- block -->
  <g transform="translate(280,180) rotate(-15)">
    <rect x="-30" y="-25" width="60" height="50" fill="#bfdbfe" stroke="#1d4ed8"/>
    <!-- forces -->
    <line x1="0" y1="-25" x2="0" y2="-100" stroke="#0f172a" stroke-width="2" marker-end="url(#arr)"/>
    <text x="6" y="-90" font-family="Inter" font-size="13" fill="#0f172a">N</text>
    <line x1="0" y1="25" x2="0" y2="90" stroke="#0f172a" stroke-width="2" marker-end="url(#arr)"/>
    <text x="6" y="80" font-family="Inter" font-size="13" fill="#0f172a">mg</text>
    <line x1="30" y1="0" x2="100" y2="0" stroke="#dc2626" stroke-width="2" marker-end="url(#arr)"/>
    <text x="70" y="-6" font-family="Inter" font-size="13" fill="#dc2626">f_k</text>
  </g>
  <text x="160" y="270" font-family="Inter" font-size="13" fill="#0f172a">Block on incline (θ = 15°)</text>
</svg>