Floor Plan — Small Office
Top-down floor plan of a four-room office suite with door swings.
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:600; }
rect.wall { fill:#f1f5f9; stroke:#0f172a; stroke-width:2; }
line.door { stroke:#0f172a; stroke-width:2; stroke-dasharray:2 2; }
path.swing { fill:none; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2 2; }
</style>
<!-- Outer -->
<rect class="wall" x="20" y="20" width="440" height="280"/>
<!-- Inner walls -->
<line x1="220" y1="20" x2="220" y2="160" stroke="#0f172a" stroke-width="2"/>
<line x1="20" y1="160" x2="460" y2="160" stroke="#0f172a" stroke-width="2"/>
<line x1="340" y1="160" x2="340" y2="300" stroke="#0f172a" stroke-width="2"/>
<!-- Doors -->
<line class="door" x1="120" y1="160" x2="160" y2="160"/>
<path class="swing" d="M120,160 A40,40 0 0,1 160,160"/>
<line class="door" x1="220" y1="80" x2="220" y2="120"/>
<path class="swing" d="M220,80 A40,40 0 0,1 220,120"/>
<line class="door" x1="340" y1="230" x2="340" y2="270"/>
<path class="swing" d="M340,230 A40,40 0 0,0 340,270"/>
<!-- Labels -->
<text x="80" y="90">Office A</text>
<text x="290" y="90">Office B</text>
<text x="80" y="230">Conference room</text>
<text x="380" y="230">Kitchen</text>
<!-- North arrow -->
<text x="430" y="40">N ↑</text>
</svg>