| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Snake Flow Diagram Template |
| 6 | Purpose: Long sequential journey winding across multiple rows |
| 7 | Use cases: Multi-year roadmap, lifecycle, multi-stage workflow, 6-10 milestone timeline |
| 8 | Structure: Three-row serpentine with a 4-2-4 node distribution |
| 9 | Encoding: Ordered node colors, dual-ring milestones, and matching card bands |
| 10 | --> |
| 11 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 12 | |
| 13 | <!-- ==================== Header ==================== --> |
| 14 | <g id="header" data-pptx-bounds="260 28 760 68"> |
| 15 | <text x="640" y="58" text-anchor="middle" font-size="32" font-weight="800" fill="#0F172A"><tspan>Ten-Year Strategic Roadmap</tspan></text> |
| 16 | <text x="640" y="86" text-anchor="middle" font-size="14" font-weight="600" fill="#64748B" letter-spacing="1.5"><tspan>DECADE JOURNEY · TEN MILESTONES · THREE-ROW SERPENTINE</tspan></text> |
| 17 | </g> |
| 18 | |
| 19 | <!-- ==================== Continuous Ribbon Path (3-row S, 4-2-4 layout) ==================== --> |
| 20 | <!-- Top row y=200 (x=200..1020), right U-turn r=100, mid row y=400 (R->L), left U-turn r=90, bottom row y=580 --> |
| 21 | <g id="ribbon-track" data-pptx-bounds="95 187 1040 406"> |
| 22 | <!-- Heavy ribbon base + thin inner rail preserve the winding reading path. --> |
| 23 | <path d="M 200 200 H 1020 A 100 100 0 0 1 1020 400 H 200 A 90 90 0 0 0 200 580 H 1020" |
| 24 | fill="none" stroke="#E0E7FF" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"/> |
| 25 | <path d="M 200 200 H 1020 A 100 100 0 0 1 1020 400 H 200 A 90 90 0 0 0 200 580 H 1020" |
| 26 | fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.35"/> |
| 27 | </g> |
| 28 | |
| 29 | <!-- ==================== Milestone Cards ==================== --> |
| 30 | <g id="milestone-cards" data-pptx-bounds="80 110 1060 570"> |
| 31 | <!-- Top row cards: ABOVE the row (between title and nodes) --> |
| 32 | <g id="card-01"> |
| 33 | <rect x="80" y="110" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 34 | <rect x="80" y="110" width="240" height="5" fill="#6366F1"/> |
| 35 | <text x="200" y="138" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 36 | <text x="200" y="160" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 37 | </g> |
| 38 | <g id="card-02"> |
| 39 | <rect x="353" y="110" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 40 | <rect x="353" y="110" width="240" height="5" fill="#8B5CF6"/> |
| 41 | <text x="473" y="138" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 42 | <text x="473" y="160" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 43 | </g> |
| 44 | <g id="card-03"> |
| 45 | <rect x="627" y="110" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 46 | <rect x="627" y="110" width="240" height="5" fill="#3B82F6"/> |
| 47 | <text x="747" y="138" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 48 | <text x="747" y="160" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 49 | </g> |
| 50 | <g id="card-04"> |
| 51 | <rect x="900" y="110" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 52 | <rect x="900" y="110" width="240" height="5" fill="#0EA5E9"/> |
| 53 | <text x="1020" y="138" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 54 | <text x="1020" y="160" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 55 | </g> |
| 56 | |
| 57 | <!-- Mid row cards: BELOW the nodes --> |
| 58 | <g id="card-05"> |
| 59 | <rect x="627" y="438" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 60 | <rect x="627" y="438" width="240" height="5" fill="#06B6D4"/> |
| 61 | <text x="747" y="466" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 62 | <text x="747" y="488" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 63 | </g> |
| 64 | <g id="card-06"> |
| 65 | <rect x="353" y="438" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 66 | <rect x="353" y="438" width="240" height="5" fill="#10B981"/> |
| 67 | <text x="473" y="466" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 68 | <text x="473" y="488" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 69 | </g> |
| 70 | |
| 71 | <!-- Bottom row cards: BELOW the nodes --> |
| 72 | <g id="card-07"> |
| 73 | <rect x="80" y="618" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 74 | <rect x="80" y="618" width="240" height="5" fill="#F59E0B"/> |
| 75 | <text x="200" y="646" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 76 | <text x="200" y="668" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 77 | </g> |
| 78 | <g id="card-08"> |
| 79 | <rect x="353" y="618" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 80 | <rect x="353" y="618" width="240" height="5" fill="#F97316"/> |
| 81 | <text x="473" y="646" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 82 | <text x="473" y="668" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 83 | </g> |
| 84 | <g id="card-09"> |
| 85 | <rect x="627" y="618" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 86 | <rect x="627" y="618" width="240" height="5" fill="#F43F5E"/> |
| 87 | <text x="747" y="646" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 88 | <text x="747" y="668" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 89 | </g> |
| 90 | <g id="card-10"> |
| 91 | <rect x="900" y="618" width="240" height="62" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 92 | <rect x="900" y="618" width="240" height="5" fill="#EC4899"/> |
| 93 | <text x="1020" y="646" text-anchor="middle" font-size="14" font-weight="700" fill="#0F172A"><tspan>Milestone Title</tspan></text> |
| 94 | <text x="1020" y="668" text-anchor="middle" fill="#475569"><tspan>Concise description of scope.</tspan></text> |
| 95 | </g> |
| 96 | </g> |
| 97 | |
| 98 | <!-- ==================== Nodes (heavy dual-ring: halo r=46 + white separator r=38 + solid disc r=32) ==================== --> |
| 99 | <g id="milestone-nodes" data-pptx-bounds="154 154 912 472"> |
| 100 | <g id="node-01"> |
| 101 | <circle cx="200" cy="200" r="46" fill="#6366F1" fill-opacity="0.15"/> |
| 102 | <circle cx="200" cy="200" r="38" fill="#FFFFFF"/> |
| 103 | <circle cx="200" cy="200" r="32" fill="#6366F1"/> |
| 104 | <text x="200" y="208" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>01</tspan></text> |
| 105 | </g> |
| 106 | <g id="node-02"> |
| 107 | <circle cx="473" cy="200" r="46" fill="#8B5CF6" fill-opacity="0.15"/> |
| 108 | <circle cx="473" cy="200" r="38" fill="#FFFFFF"/> |
| 109 | <circle cx="473" cy="200" r="32" fill="#8B5CF6"/> |
| 110 | <text x="473" y="208" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>02</tspan></text> |
| 111 | </g> |
| 112 | <g id="node-03"> |
| 113 | <circle cx="747" cy="200" r="46" fill="#3B82F6" fill-opacity="0.15"/> |
| 114 | <circle cx="747" cy="200" r="38" fill="#FFFFFF"/> |
| 115 | <circle cx="747" cy="200" r="32" fill="#3B82F6"/> |
| 116 | <text x="747" y="208" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>03</tspan></text> |
| 117 | </g> |
| 118 | <g id="node-04"> |
| 119 | <circle cx="1020" cy="200" r="46" fill="#0EA5E9" fill-opacity="0.15"/> |
| 120 | <circle cx="1020" cy="200" r="38" fill="#FFFFFF"/> |
| 121 | <circle cx="1020" cy="200" r="32" fill="#0EA5E9"/> |
| 122 | <text x="1020" y="208" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>04</tspan></text> |
| 123 | </g> |
| 124 | <g id="node-05"> |
| 125 | <circle cx="747" cy="400" r="46" fill="#06B6D4" fill-opacity="0.15"/> |
| 126 | <circle cx="747" cy="400" r="38" fill="#FFFFFF"/> |
| 127 | <circle cx="747" cy="400" r="32" fill="#06B6D4"/> |
| 128 | <text x="747" y="408" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>05</tspan></text> |
| 129 | </g> |
| 130 | <g id="node-06"> |
| 131 | <circle cx="473" cy="400" r="46" fill="#10B981" fill-opacity="0.15"/> |
| 132 | <circle cx="473" cy="400" r="38" fill="#FFFFFF"/> |
| 133 | <circle cx="473" cy="400" r="32" fill="#10B981"/> |
| 134 | <text x="473" y="408" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>06</tspan></text> |
| 135 | </g> |
| 136 | <g id="node-07"> |
| 137 | <circle cx="200" cy="580" r="46" fill="#F59E0B" fill-opacity="0.15"/> |
| 138 | <circle cx="200" cy="580" r="38" fill="#FFFFFF"/> |
| 139 | <circle cx="200" cy="580" r="32" fill="#F59E0B"/> |
| 140 | <text x="200" y="588" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>07</tspan></text> |
| 141 | </g> |
| 142 | <g id="node-08"> |
| 143 | <circle cx="473" cy="580" r="46" fill="#F97316" fill-opacity="0.15"/> |
| 144 | <circle cx="473" cy="580" r="38" fill="#FFFFFF"/> |
| 145 | <circle cx="473" cy="580" r="32" fill="#F97316"/> |
| 146 | <text x="473" y="588" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>08</tspan></text> |
| 147 | </g> |
| 148 | <g id="node-09"> |
| 149 | <circle cx="747" cy="580" r="46" fill="#F43F5E" fill-opacity="0.15"/> |
| 150 | <circle cx="747" cy="580" r="38" fill="#FFFFFF"/> |
| 151 | <circle cx="747" cy="580" r="32" fill="#F43F5E"/> |
| 152 | <text x="747" y="588" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>09</tspan></text> |
| 153 | </g> |
| 154 | <g id="node-10"> |
| 155 | <circle cx="1020" cy="580" r="46" fill="#EC4899" fill-opacity="0.15"/> |
| 156 | <circle cx="1020" cy="580" r="38" fill="#FFFFFF"/> |
| 157 | <circle cx="1020" cy="580" r="32" fill="#EC4899"/> |
| 158 | <text x="1020" y="588" text-anchor="middle" font-size="20" font-weight="800" fill="#FFFFFF"><tspan>10</tspan></text> |
| 159 | </g> |
| 160 | </g> |
| 161 | </svg> |
| 162 |