198 lines
13 KiB
XML
198 lines
13 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||
<!--
|
||
Gantt Chart Template
|
||
Usage: Project timeline and milestone tracking
|
||
Scenarios: Project management, scheduling, roadmaps
|
||
Supports: 8 tasks × 12 weeks/months (adjustable)
|
||
-->
|
||
<defs>
|
||
<!-- Task Gradients -->
|
||
<linearGradient id="taskGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#2563EB;stop-opacity:1" />
|
||
</linearGradient>
|
||
<linearGradient id="taskGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
|
||
</linearGradient>
|
||
<linearGradient id="taskGrad3" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#D97706;stop-opacity:1" />
|
||
</linearGradient>
|
||
<linearGradient id="taskGrad4" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
|
||
</linearGradient>
|
||
<!-- Standard Shadow -->
|
||
<filter id="taskShadow" x="-10%" y="-20%" width="120%" height="140%">
|
||
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
|
||
<feOffset dx="0" dy="1"/>
|
||
<feFlood flood-color="#0F172A" flood-opacity="0.15"/>
|
||
<feComposite operator="in" in2="SourceAlpha"/>
|
||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
<!-- Today Pattern -->
|
||
<pattern id="todayPattern" patternUnits="userSpaceOnUse" width="4" height="4">
|
||
<line x1="0" y1="0" x2="4" y2="4" stroke="#EF4444" stroke-width="1"/>
|
||
</pattern>
|
||
</defs>
|
||
<!-- Background -->
|
||
<rect width="1280" height="720" fill="#F8FAFC"/>
|
||
<!-- Title -->
|
||
<text x="60" y="55" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="28" font-weight="700" fill="#0F172A">Project Timeline & Milestone Tracking</text>
|
||
<text x="60" y="85" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="16" fill="#64748B">Strategic Initiative · H1 Roadmap</text>
|
||
<!-- Time Header -->
|
||
<g id="timeHeader">
|
||
<!-- Month Background -->
|
||
<rect x="280" y="105" width="960" height="30" fill="#F1F5F9"/>
|
||
<!-- Month Dividers and Labels -->
|
||
<line x1="280" y1="105" x2="280" y2="640" stroke="#E2E8F0" stroke-width="1"/>
|
||
<text x="360" y="125" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#475569" text-anchor="middle">Month 01</text>
|
||
<line x1="440" y1="105" x2="440" y2="640" stroke="#E2E8F0" stroke-width="1"/>
|
||
<text x="520" y="125" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#475569" text-anchor="middle">Month 02</text>
|
||
<line x1="600" y1="105" x2="600" y2="640" stroke="#E2E8F0" stroke-width="1"/>
|
||
<text x="680" y="125" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#475569" text-anchor="middle">Month 03</text>
|
||
<line x1="760" y1="105" x2="760" y2="640" stroke="#E2E8F0" stroke-width="1"/>
|
||
<text x="840" y="125" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#475569" text-anchor="middle">Month 04</text>
|
||
<line x1="920" y1="105" x2="920" y2="640" stroke="#E2E8F0" stroke-width="1"/>
|
||
<text x="1000" y="125" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#475569" text-anchor="middle">Month 05</text>
|
||
<line x1="1080" y1="105" x2="1080" y2="640" stroke="#E2E8F0" stroke-width="1"/>
|
||
<text x="1160" y="125" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#475569" text-anchor="middle">Month 06</text>
|
||
<line x1="1240" y1="105" x2="1240" y2="640" stroke="#E2E8F0" stroke-width="1"/>
|
||
</g>
|
||
<!-- Week Dividers (Dashed) -->
|
||
<g stroke="#E2E8F0" stroke-width="1" stroke-dasharray="2,2">
|
||
<line x1="320" y1="135" x2="320" y2="640"/>
|
||
<line x1="360" y1="135" x2="360" y2="640"/>
|
||
<line x1="400" y1="135" x2="400" y2="640"/>
|
||
<line x1="480" y1="135" x2="480" y2="640"/>
|
||
<line x1="520" y1="135" x2="520" y2="640"/>
|
||
<line x1="560" y1="135" x2="560" y2="640"/>
|
||
<line x1="640" y1="135" x2="640" y2="640"/>
|
||
<line x1="680" y1="135" x2="680" y2="640"/>
|
||
<line x1="720" y1="135" x2="720" y2="640"/>
|
||
<line x1="800" y1="135" x2="800" y2="640"/>
|
||
<line x1="840" y1="135" x2="840" y2="640"/>
|
||
<line x1="880" y1="135" x2="880" y2="640"/>
|
||
<line x1="960" y1="135" x2="960" y2="640"/>
|
||
<line x1="1000" y1="135" x2="1000" y2="640"/>
|
||
<line x1="1040" y1="135" x2="1040" y2="640"/>
|
||
<line x1="1120" y1="135" x2="1120" y2="640"/>
|
||
<line x1="1160" y1="135" x2="1160" y2="640"/>
|
||
<line x1="1200" y1="135" x2="1200" y2="640"/>
|
||
</g>
|
||
<!-- Task List Area -->
|
||
<g id="taskList">
|
||
<!-- Alternating Row Backgrounds -->
|
||
<rect x="40" y="135" width="240" height="60" fill="#F8FAFC"/>
|
||
<rect x="40" y="195" width="240" height="60" fill="#F1F5F9"/>
|
||
<rect x="40" y="255" width="240" height="60" fill="#F8FAFC"/>
|
||
<rect x="40" y="315" width="240" height="60" fill="#F1F5F9"/>
|
||
<rect x="40" y="375" width="240" height="60" fill="#F8FAFC"/>
|
||
<rect x="40" y="435" width="240" height="60" fill="#F1F5F9"/>
|
||
<rect x="40" y="495" width="240" height="60" fill="#F8FAFC"/>
|
||
<rect x="40" y="555" width="240" height="60" fill="#F1F5F9"/>
|
||
<!-- Task Names -->
|
||
<text x="55" y="172" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">1. Requirements Analysis</text>
|
||
<text x="55" y="232" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">2. Architecture Design</text>
|
||
<text x="55" y="292" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">3. UI/UX Implementation</text>
|
||
<text x="55" y="352" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">4. Frontend Development</text>
|
||
<text x="55" y="412" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">5. Backend Integration</text>
|
||
<text x="55" y="472" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">6. QA & User Testing</text>
|
||
<text x="55" y="532" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">7. Deployment</text>
|
||
<text x="55" y="592" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" font-weight="600" fill="#0F172A">8. Go-to-Market</text>
|
||
</g>
|
||
<!-- Gantt Bars -->
|
||
<g id="ganttBars">
|
||
<!-- Task 1 -->
|
||
<rect x="280" y="155" width="120" height="24" rx="4" fill="url(#taskGrad1)" filter="url(#taskShadow)"/>
|
||
<text x="340" y="172" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">3W</text>
|
||
<!-- Task 2 -->
|
||
<rect x="320" y="215" width="200" height="24" rx="4" fill="url(#taskGrad1)" filter="url(#taskShadow)"/>
|
||
<text x="420" y="232" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">5W</text>
|
||
<!-- Task 3 -->
|
||
<rect x="440" y="275" width="200" height="24" rx="4" fill="url(#taskGrad2)" filter="url(#taskShadow)"/>
|
||
<text x="540" y="292" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">5W</text>
|
||
<!-- Task 4 -->
|
||
<rect x="520" y="335" width="320" height="24" rx="4" fill="url(#taskGrad3)" filter="url(#taskShadow)"/>
|
||
<text x="680" y="352" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">8W</text>
|
||
<!-- Task 5 -->
|
||
<rect x="480" y="395" width="400" height="24" rx="4" fill="url(#taskGrad3)" filter="url(#taskShadow)"/>
|
||
<text x="680" y="412" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">10W</text>
|
||
<!-- Task 6 -->
|
||
<rect x="760" y="455" width="240" height="24" rx="4" fill="url(#taskGrad4)" filter="url(#taskShadow)"/>
|
||
<text x="880" y="472" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">6W</text>
|
||
<!-- Task 7 -->
|
||
<rect x="1000" y="515" width="80" height="24" rx="4" fill="url(#taskGrad4)" filter="url(#taskShadow)"/>
|
||
<text x="1040" y="532" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">2W</text>
|
||
<!-- Task 8 -->
|
||
<rect x="1040" y="575" width="200" height="24" rx="4" fill="url(#taskGrad2)" filter="url(#taskShadow)"/>
|
||
<text x="1140" y="592" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" font-weight="600" fill="#FFFFFF" text-anchor="middle">5W</text>
|
||
</g>
|
||
<!-- Milestones -->
|
||
<g id="milestones">
|
||
<!-- Milestone 1 -->
|
||
<polygon points="400,165 410,155 420,165 410,175" fill="#EF4444"/>
|
||
<text x="410" y="145" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="11" font-weight="600" fill="#EF4444" text-anchor="middle">PRD Sign-off</text>
|
||
<!-- Milestone 2 -->
|
||
<polygon points="640,285 650,275 660,285 650,295" fill="#EF4444"/>
|
||
<text x="650" y="265" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="11" font-weight="600" fill="#EF4444" text-anchor="middle">Design Review</text>
|
||
<!-- Milestone 3 -->
|
||
<polygon points="1070,525 1080,515 1090,525 1080,535" fill="#EF4444"/>
|
||
<text x="1080" y="550" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="11" font-weight="600" fill="#EF4444" text-anchor="middle">Launch</text>
|
||
</g>
|
||
<!-- Today Line -->
|
||
<line x1="680" y1="105" x2="680" y2="640" stroke="#EF4444" stroke-width="2" stroke-dasharray="6,3"/>
|
||
<rect x="656" y="85" width="48" height="20" rx="3" fill="#EF4444"/>
|
||
<text x="680" y="99" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="11" font-weight="600" fill="#FFFFFF" text-anchor="middle">TODAY</text>
|
||
<!-- Legend -->
|
||
<g id="legend" transform="translate(60, 650)">
|
||
<rect x="0" y="0" width="16" height="16" rx="2" fill="url(#taskGrad1)"/>
|
||
<text x="25" y="13" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" fill="#475569">Phase 1: Planning</text>
|
||
<rect x="140" y="0" width="16" height="16" rx="2" fill="url(#taskGrad2)"/>
|
||
<text x="165" y="13" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" fill="#475569">Phase 2: Design</text>
|
||
<rect x="280" y="0" width="16" height="16" rx="2" fill="url(#taskGrad3)"/>
|
||
<text x="305" y="13" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" fill="#475569">Phase 3: Execution</text>
|
||
<rect x="430" y="0" width="16" height="16" rx="2" fill="url(#taskGrad4)"/>
|
||
<text x="455" y="13" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" fill="#475569">Phase 4: Launch</text>
|
||
<polygon points="570,8 580,-2 590,8 580,18" fill="#EF4444"/>
|
||
<text x="605" y="13" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="12" fill="#475569">Milestone</text>
|
||
</g>
|
||
<!-- Footer -->
|
||
<text x="1220" y="695" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||
font-size="14" fill="#94A3B8" text-anchor="end">Owner: PMO | Last Updated: YYYY-MM-DD</text>
|
||
</svg>
|