Skip to content
flowss
Start freeChecking your session
Raw SVG templates

Basketball — Pick & Roll

Classic high pick-and-roll play with screen, roll and pop arrows.

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:#0f172a; font-weight:700; text-anchor:middle; }
  </style>
  <rect x="20" y="20" width="440" height="280" fill="#fef3c7" stroke="#0f172a"/>
  <rect x="180" y="220" width="120" height="80" fill="none" stroke="#0f172a"/>
  <circle cx="240" cy="220" r="48" fill="none" stroke="#0f172a"/>
  <circle cx="240" cy="300" r="6"  fill="none" stroke="#0f172a"/>
  <circle cx="240" cy="120" r="14" fill="#3666ff"/><text x="240" y="124" fill="white">PG</text>
  <circle cx="200" cy="170" r="14" fill="#3666ff"/><text x="200" y="174" fill="white">C</text>
  <circle cx="110" cy="200" r="12" fill="#3666ff"/><text x="110" y="204" fill="white">SG</text>
  <circle cx="380" cy="200" r="12" fill="#3666ff"/><text x="380" y="204" fill="white">SF</text>
  <circle cx="340" cy="270" r="12" fill="#3666ff"/><text x="340" y="274" fill="white">PF</text>
  <defs>
    <marker id="aa" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M0,0 L10,5 L0,10 z" fill="#dc2626"/>
    </marker>
  </defs>
  <line x1="240" y1="130" x2="208" y2="160" stroke="#dc2626" stroke-width="2" marker-end="url(#aa)"/>
  <line x1="200" y1="180" x2="160" y2="220" stroke="#dc2626" stroke-width="2" marker-end="url(#aa)" stroke-dasharray="5 3"/>
  <line x1="240" y1="135" x2="280" y2="180" stroke="#dc2626" stroke-width="2" marker-end="url(#aa)"/>
  <text x="200" y="60">High pick-and-roll · PG drives off C, C rolls to rim</text>
</svg>