Skip to content
Raw SVG templates

Feynman Diagram (SVG)

Particle physics interaction — Compton-style electron + photon vertex.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 240" 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>
  <style>
    .fermion { stroke: #0f172a; stroke-width: 2; fill: none; }
    .photon  { stroke: #1f47f5; stroke-width: 1.8; fill: none; }
    .lbl     { font: 13px Inter; fill: #0f172a; }
  </style>
  <!-- incoming electron -->
  <line class="fermion" x1="60"  y1="60"  x2="180" y2="120" marker-end="url(#arr)"/>
  <!-- outgoing electron -->
  <line class="fermion" x1="180" y1="120" x2="60"  y2="180"/>
  <!-- internal electron propagator -->
  <line class="fermion" x1="180" y1="120" x2="280" y2="120" marker-end="url(#arr)"/>
  <!-- internal continued -->
  <line class="fermion" x1="280" y1="120" x2="400" y2="60"/>
  <line class="fermion" x1="280" y1="120" x2="400" y2="180"/>
  <!-- incoming photon -->
  <path class="photon" d="M180,120 q 10 -20 20 0 q 10 20 20 0 q 10 -20 20 0 q 10 20 20 0"
        transform="translate(0,-40) rotate(-45 180 120)"/>
  <!-- outgoing photon -->
  <path class="photon" d="M280,120 q 10 -20 20 0 q 10 20 20 0 q 10 -20 20 0 q 10 20 20 0"
        transform="translate(0,-40) rotate(45 280 120)"/>
  <!-- vertices -->
  <circle cx="180" cy="120" r="4" fill="#dc2626"/>
  <circle cx="280" cy="120" r="4" fill="#dc2626"/>
  <g class="lbl">
    <text x="40" y="55">e⁻</text>
    <text x="40" y="195">e⁻</text>
    <text x="410" y="55">e⁻</text>
    <text x="410" y="195">e⁻</text>
    <text x="125" y="65" fill="#1f47f5">γ</text>
    <text x="320" y="65" fill="#1f47f5">γ</text>
    <text x="225" y="135" font-size="11" fill="#475569">e⁻</text>
  </g>
  <text x="230" y="225" font-family="Inter" font-size="12" text-anchor="middle" fill="#475569">Compton scattering: e⁻ + γ → e⁻ + γ</text>
</svg>