137 lines
16 KiB
XML
137 lines
16 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
|
<!--
|
|
Sankey Data Flow Chart Template
|
|
Purpose: Precise value flow visualization, budget allocation, process mapping
|
|
Use cases: Budget distribution, energy consumption, resource allocation
|
|
Feature: Mathematically exact paths (Total Input = Total Output)
|
|
-->
|
|
<defs>
|
|
<filter id="nodeShadow" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
|
<feOffset dx="0" dy="2" result="offsetblur"/>
|
|
<feFlood flood-color="#0F172A" flood-opacity="0.15" result="shadowColor"/>
|
|
<feComposite in="shadowColor" in2="offsetblur" operator="in" result="shadow"/>
|
|
<feMerge>
|
|
<feMergeNode in="shadow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<!-- Layer 1 to Layer 2 Gradients -->
|
|
<linearGradient id="gPR" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#8B5CF6" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gPS" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#F43F5E" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gPO" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#F59E0B" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gPA" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#64748B" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gSR" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#10B981" stop-opacity="0.6"/><stop offset="100%" stop-color="#8B5CF6" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gSS" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#10B981" stop-opacity="0.6"/><stop offset="100%" stop-color="#F43F5E" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gSO" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#10B981" stop-opacity="0.6"/><stop offset="100%" stop-color="#F59E0B" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gIS" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#6366F1" stop-opacity="0.6"/><stop offset="100%" stop-color="#F43F5E" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gIA" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="560" y2="0"><stop offset="0%" stop-color="#6366F1" stop-opacity="0.6"/><stop offset="100%" stop-color="#64748B" stop-opacity="0.6"/></linearGradient>
|
|
<!-- Layer 2 to Layer 3 Gradients -->
|
|
<linearGradient id="gRP" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gRI" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.6"/><stop offset="100%" stop-color="#14B8A6" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gSP" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#F43F5E" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gSM" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#F43F5E" stop-opacity="0.6"/><stop offset="100%" stop-color="#EC4899" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gOP" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#F59E0B" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gOI" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#F59E0B" stop-opacity="0.6"/><stop offset="100%" stop-color="#14B8A6" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gOO" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#F59E0B" stop-opacity="0.6"/><stop offset="100%" stop-color="#78716C" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gAP" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#64748B" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
|
|
<linearGradient id="gAO" gradientUnits="userSpaceOnUse" x1="720" y1="0" x2="1080" y2="0"><stop offset="0%" stop-color="#64748B" stop-opacity="0.6"/><stop offset="100%" stop-color="#78716C" stop-opacity="0.6"/></linearGradient>
|
|
</defs>
|
|
<rect width="1280" height="720" fill="#F8FAFC"/>
|
|
<!-- ==================== Header ==================== -->
|
|
<text x="640" y="50" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="32" font-weight="800" fill="#0F172A" text-anchor="middle">Annual Budget Allocation Flow</text>
|
|
<text x="640" y="80" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15" font-weight="600" fill="#64748B" letter-spacing="1" text-anchor="middle">2025 FY · TOTAL BUDGET: $100M · ZERO-LOSS SANKEY DISTRIBUTION</text>
|
|
<!-- Column Labels -->
|
|
<text x="120" y="115" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#94A3B8" letter-spacing="1" text-anchor="middle">REVENUE SOURCE</text>
|
|
<text x="640" y="115" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#94A3B8" letter-spacing="1" text-anchor="middle">DEPARTMENT</text>
|
|
<text x="1160" y="115" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#94A3B8" letter-spacing="1" text-anchor="middle">EXPENSE TYPE</text>
|
|
<!-- ==================== FLOW PATHS (Background) ==================== -->
|
|
<g>
|
|
<!-- Layer 1 to Layer 2 -->
|
|
<!-- Product Sales flows -->
|
|
<path d="M 200 186.25 C 380 186.25, 380 186.25, 560 186.25" fill="none" stroke="url(#gPR)" stroke-width="112.5"/>
|
|
<path d="M 200 276.25 C 380 276.25, 380 341.25, 560 341.25" fill="none" stroke="url(#gPS)" stroke-width="67.5"/>
|
|
<path d="M 200 343.75 C 380 343.75, 380 496.25, 560 496.25" fill="none" stroke="url(#gPO)" stroke-width="67.5"/>
|
|
<path d="M 200 388.75 C 380 388.75, 380 606.25, 560 606.25" fill="none" stroke="url(#gPA)" stroke-width="22.5"/>
|
|
<!-- Service Revenue flows -->
|
|
<path d="M 200 442.5 C 380 442.5, 380 265, 560 265" fill="none" stroke="url(#gSR)" stroke-width="45"/>
|
|
<path d="M 200 487.5 C 380 487.5, 380 397.5, 560 397.5" fill="none" stroke="url(#gSS)" stroke-width="45"/>
|
|
<path d="M 200 532.5 C 380 532.5, 380 552.5, 560 552.5" fill="none" stroke="url(#gSO)" stroke-width="45"/>
|
|
<!-- Investment Income flows -->
|
|
<path d="M 200 586.25 C 380 586.25, 380 431.25, 560 431.25" fill="none" stroke="url(#gIS)" stroke-width="22.5"/>
|
|
<path d="M 200 608.75 C 380 608.75, 380 628.75, 560 628.75" fill="none" stroke="url(#gIA)" stroke-width="22.5"/>
|
|
<!-- Layer 2 to Layer 3 -->
|
|
<!-- R&D flows -->
|
|
<path d="M 720 193 C 900 193, 900 193, 1080 193" fill="none" stroke="url(#gRP)" stroke-width="126"/>
|
|
<path d="M 720 271.75 C 900 271.75, 900 500.75, 1080 500.75" fill="none" stroke="url(#gRI)" stroke-width="31.5"/>
|
|
<!-- Sales flows -->
|
|
<path d="M 720 330 C 900 330, 900 278.5, 1080 278.5" fill="none" stroke="url(#gSP)" stroke-width="45"/>
|
|
<path d="M 720 397.5 C 900 397.5, 900 420, 1080 420" fill="none" stroke="url(#gSM)" stroke-width="90"/>
|
|
<!-- Operations flows -->
|
|
<path d="M 720 485 C 900 485, 900 323.5, 1080 323.5" fill="none" stroke="url(#gOP)" stroke-width="45"/>
|
|
<path d="M 720 536.75 C 900 536.75, 900 545.75, 1080 545.75" fill="none" stroke="url(#gOI)" stroke-width="58.5"/>
|
|
<path d="M 720 570.5 C 900 570.5, 900 599.5, 1080 599.5" fill="none" stroke="url(#gOO)" stroke-width="9"/>
|
|
<!-- Admin flows -->
|
|
<path d="M 720 599.5 C 900 599.5, 900 350.5, 1080 350.5" fill="none" stroke="url(#gAP)" stroke-width="9"/>
|
|
<path d="M 720 622 C 900 622, 900 622, 1080 622" fill="none" stroke="url(#gAO)" stroke-width="36"/>
|
|
</g>
|
|
<!-- ==================== LAYER 1: Revenue Sources ==================== -->
|
|
<g filter="url(#nodeShadow)">
|
|
<rect x="40" y="130" width="160" height="270" rx="4" fill="#3B82F6"/>
|
|
<text x="120" y="255" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Product Sales</text>
|
|
<text x="120" y="280" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$60M</text>
|
|
<rect x="40" y="420" width="160" height="135" rx="4" fill="#10B981"/>
|
|
<text x="120" y="480" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Service Revenue</text>
|
|
<text x="120" y="505" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$30M</text>
|
|
<rect x="40" y="575" width="160" height="45" rx="4" fill="#6366F1"/>
|
|
<text x="120" y="603" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15" font-weight="800" fill="#FFFFFF" text-anchor="middle">Investment $10M</text>
|
|
</g>
|
|
<!-- ==================== LAYER 2: Departments ==================== -->
|
|
<g filter="url(#nodeShadow)">
|
|
<rect x="560" y="130" width="160" height="157.5" rx="4" fill="#8B5CF6"/>
|
|
<text x="640" y="202" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">R&D</text>
|
|
<text x="640" y="227" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$35M</text>
|
|
<rect x="560" y="307.5" width="160" height="135" rx="4" fill="#F43F5E"/>
|
|
<text x="640" y="368" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Sales & Marketing</text>
|
|
<text x="640" y="393" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$30M</text>
|
|
<rect x="560" y="462.5" width="160" height="112.5" rx="4" fill="#F59E0B"/>
|
|
<text x="640" y="512" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Operations</text>
|
|
<text x="640" y="537" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$25M</text>
|
|
<rect x="560" y="595" width="160" height="45" rx="4" fill="#64748B"/>
|
|
<text x="640" y="623" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15" font-weight="800" fill="#FFFFFF" text-anchor="middle">Admin $10M</text>
|
|
</g>
|
|
<!-- ==================== LAYER 3: Expense Types ==================== -->
|
|
<g filter="url(#nodeShadow)">
|
|
<rect x="1080" y="130" width="160" height="225" rx="4" fill="#0EA5E9"/>
|
|
<text x="1160" y="235" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Personnel</text>
|
|
<text x="1160" y="260" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$50M</text>
|
|
<rect x="1080" y="375" width="160" height="90" rx="4" fill="#EC4899"/>
|
|
<text x="1160" y="413" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Marketing</text>
|
|
<text x="1160" y="438" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="20" font-weight="800" fill="#FFFFFF" text-anchor="middle">$20M</text>
|
|
<rect x="1080" y="485" width="160" height="90" rx="4" fill="#14B8A6"/>
|
|
<text x="1160" y="523" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Infrastructure</text>
|
|
<text x="1160" y="548" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="20" font-weight="800" fill="#FFFFFF" text-anchor="middle">$20M</text>
|
|
<rect x="1080" y="595" width="160" height="45" rx="4" fill="#78716C"/>
|
|
<text x="1160" y="623" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15" font-weight="800" fill="#FFFFFF" text-anchor="middle">Other $10M</text>
|
|
</g>
|
|
<!-- ==================== Summary Stats ==================== -->
|
|
<g id="stats">
|
|
<rect x="40" y="655" width="1200" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" filter="url(#nodeShadow)"/>
|
|
<!-- Total Budget -->
|
|
<text x="160" y="685" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Total Budget</text>
|
|
<text x="260" y="686" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="18" font-weight="800" fill="#0F172A" text-anchor="middle">$100M</text>
|
|
<line x1="320" y1="665" x2="320" y2="695" stroke="#E2E8F0" stroke-width="1.5"/>
|
|
<!-- Largest Dept -->
|
|
<text x="440" y="685" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Largest Dept</text>
|
|
<text x="540" y="686" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="18" font-weight="800" fill="#8B5CF6" text-anchor="middle">R&D (35%)</text>
|
|
<line x1="620" y1="665" x2="620" y2="695" stroke="#E2E8F0" stroke-width="1.5"/>
|
|
<!-- Top Expense -->
|
|
<text x="740" y="685" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Top Expense</text>
|
|
<text x="860" y="686" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="18" font-weight="800" fill="#0EA5E9" text-anchor="middle">Personnel (50%)</text>
|
|
<line x1="940" y1="665" x2="940" y2="695" stroke="#E2E8F0" stroke-width="1.5"/>
|
|
<!-- Operational Ratio -->
|
|
<text x="1060" y="685" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Operational Ratio</text>
|
|
<text x="1170" y="686" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="18" font-weight="800" fill="#F59E0B" text-anchor="middle">25%</text>
|
|
</g>
|
|
</svg>
|