Skip to content
flowss
Start freeChecking your session
Raw SVG templates

Football Formation — 4-3-3

4-3-3 attacking formation on a half-pitch with role labels.

Raw SVGCustom / SVGRaw SVG syntax docs
Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 320" width="480" height="320">
  <style>
    text { font:11px Inter, sans-serif; fill:white; font-weight:700; text-anchor:middle; }
    .lab { font-size:10px; fill:#0f172a; }
  </style>
  <rect x="20" y="20" width="440" height="280" fill="#16a34a" stroke="#0f172a"/>
  <line x1="240" y1="20" x2="240" y2="300" stroke="white"/>
  <circle cx="240" cy="160" r="40" fill="none" stroke="white"/>
  <rect x="20"  y="100" width="60" height="120" fill="none" stroke="white"/>
  <rect x="400" y="100" width="60" height="120" fill="none" stroke="white"/>
  <circle cx="50"  cy="160" r="12" fill="#dc2626"/><text x="50"  y="164">GK</text>
  <circle cx="120" cy="60"  r="12" fill="#dc2626"/><text x="120" y="64">RB</text>
  <circle cx="120" cy="140" r="12" fill="#dc2626"/><text x="120" y="144">CB</text>
  <circle cx="120" cy="180" r="12" fill="#dc2626"/><text x="120" y="184">CB</text>
  <circle cx="120" cy="260" r="12" fill="#dc2626"/><text x="120" y="264">LB</text>
  <circle cx="200" cy="100" r="12" fill="#dc2626"/><text x="200" y="104">CM</text>
  <circle cx="200" cy="160" r="12" fill="#dc2626"/><text x="200" y="164">CDM</text>
  <circle cx="200" cy="220" r="12" fill="#dc2626"/><text x="200" y="224">CM</text>
  <circle cx="300" cy="80"  r="12" fill="#dc2626"/><text x="300" y="84">RW</text>
  <circle cx="300" cy="160" r="12" fill="#dc2626"/><text x="300" y="164">ST</text>
  <circle cx="300" cy="240" r="12" fill="#dc2626"/><text x="300" y="244">LW</text>
  <text class="lab" x="80" y="14">4-3-3 attacking</text>
</svg>