| 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 | Pyramid Isometric Chart Template (3D variant) |
| 6 | Purpose: Hierarchical capability/achievement model with strong visual drama |
| 7 | Use cases: Annual review reports, capability tier presentations, growth-stage decks |
| 8 | Design Principles: |
| 9 | - 4-tier 3D isometric pyramid: each tier = top diamond (shadow facet) + 2 side faces (lit gradients) |
| 10 | - Light source from upper-left → right faces slightly darker than left faces |
| 11 | - Tier numbers tilted along the left slope (CHART_STYLE_GUIDE §11 "semantic-polygon" pattern) |
| 12 | - Tier labels tilted along the right slope |
| 13 | - Twin ground rhombi as 3D shadow base (alternative to ellipse anchor §11.6 for 3D objects) |
| 14 | Versus pyramid_chart.svg: choose this for dramatic / presentation tone; choose pyramid_chart for |
| 15 | formal documentary / consulting tone (flat side view). |
| 16 | Layer count is FIXED at 4 (geometric parameterization for 3/5/6 layers requires recomputed vertices). |
| 17 | --> |
| 18 | <defs> |
| 19 | <!-- Pyramid side-face gradients (lit, brighter at the upper-left edge) --> |
| 20 | <!-- Tier 1 apex (lightest) --> |
| 21 | <linearGradient id="pyrFaceR1" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 22 | <stop offset="0" stop-color="#93C5FD" stop-opacity="0.85"/> |
| 23 | <stop offset="1" stop-color="#BFDBFE" stop-opacity="0.85"/> |
| 24 | </linearGradient> |
| 25 | <linearGradient id="pyrFaceL1" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 26 | <stop offset="0" stop-color="#BFDBFE" stop-opacity="0.85"/> |
| 27 | <stop offset="1" stop-color="#93C5FD" stop-opacity="0.85"/> |
| 28 | </linearGradient> |
| 29 | <!-- Tier 2 --> |
| 30 | <linearGradient id="pyrFaceR2" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 31 | <stop offset="0" stop-color="#60A5FA" stop-opacity="0.85"/> |
| 32 | <stop offset="1" stop-color="#93C5FD" stop-opacity="0.85"/> |
| 33 | </linearGradient> |
| 34 | <linearGradient id="pyrFaceL2" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 35 | <stop offset="0" stop-color="#93C5FD" stop-opacity="0.85"/> |
| 36 | <stop offset="1" stop-color="#60A5FA" stop-opacity="0.85"/> |
| 37 | </linearGradient> |
| 38 | <!-- Tier 3 --> |
| 39 | <linearGradient id="pyrFaceR3" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 40 | <stop offset="0" stop-color="#3B82F6" stop-opacity="0.9"/> |
| 41 | <stop offset="1" stop-color="#60A5FA" stop-opacity="0.9"/> |
| 42 | </linearGradient> |
| 43 | <linearGradient id="pyrFaceL3" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 44 | <stop offset="0" stop-color="#60A5FA" stop-opacity="0.9"/> |
| 45 | <stop offset="1" stop-color="#3B82F6" stop-opacity="0.9"/> |
| 46 | </linearGradient> |
| 47 | <!-- Tier 4 base (darkest) --> |
| 48 | <linearGradient id="pyrFaceR4" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 49 | <stop offset="0" stop-color="#1E40AF" stop-opacity="0.9"/> |
| 50 | <stop offset="1" stop-color="#2563EB" stop-opacity="0.9"/> |
| 51 | </linearGradient> |
| 52 | <linearGradient id="pyrFaceL4" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 53 | <stop offset="0" stop-color="#2563EB" stop-opacity="0.9"/> |
| 54 | <stop offset="1" stop-color="#1E40AF" stop-opacity="0.9"/> |
| 55 | </linearGradient> |
| 56 | <!-- Ground shadow rhombi: outer (wide) light and inner narrow darker --> |
| 57 | <linearGradient id="pyrBaseShadowOuter" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 58 | <stop offset="0" stop-color="#CBD5E1"/> |
| 59 | <stop offset="0.5" stop-color="#F1F5F9" stop-opacity="0"/> |
| 60 | <stop offset="1" stop-color="#CBD5E1"/> |
| 61 | </linearGradient> |
| 62 | <linearGradient id="pyrBaseShadowInner" x1="0" y1="0.5" x2="1" y2="0.5"> |
| 63 | <stop offset="0" stop-color="#94A3B8"/> |
| 64 | <stop offset="0.5" stop-color="#F1F5F9" stop-opacity="0"/> |
| 65 | <stop offset="1" stop-color="#94A3B8"/> |
| 66 | </linearGradient> |
| 67 | <!-- Tier-tag pill gradient (used by legend pills on the right) --> |
| 68 | <linearGradient id="pyrLegendPill" x1="0.5" y1="0" x2="0.5" y2="1"> |
| 69 | <stop offset="0" stop-color="#FFFFFF"/> |
| 70 | <stop offset="1" stop-color="#F1F5F9"/> |
| 71 | </linearGradient> |
| 72 | </defs> |
| 73 | |
| 74 | <!-- Background --> |
| 75 | <rect width="1280" height="720" fill="#F8FAFC"/> |
| 76 | |
| 77 | <!-- ==================== Header ==================== --> |
| 78 | <g id="header" data-pptx-bounds="40 15 1200 125"> |
| 79 | <text x="60" y="62" font-size="32" font-weight="800" fill="#0F172A"><tspan>Capability Maturity Pyramid</tspan></text> |
| 80 | <text x="60" y="92" font-size="14" font-weight="700" fill="#64748B" letter-spacing="1.5"><tspan>FOUR-TIER GROWTH MODEL · STAGE-BY-STAGE ACHIEVEMENT</tspan></text> |
| 81 | </g> |
| 82 | |
| 83 | <!-- ==================== Ground Shadow Base ==================== --> |
| 84 | <!-- Twin rhombi simulate the 3D ground-plane shadow on which the pyramid sits. --> |
| 85 | <g id="base-shadow" data-pptx-bounds="117 460 1046 223"> |
| 86 | <polygon points="640,474.4 1080.2,571.44 640,668.48 199.8,571.44" fill="url(#pyrBaseShadowOuter)" stroke="#CBD5E1" stroke-width="1"/> |
| 87 | <polygon points="641.36,482.28 1015.16,564.68 641.36,647.08 267.55,564.68" fill="url(#pyrBaseShadowInner)" stroke="#94A3B8" stroke-width="1" stroke-opacity="0.4"/> |
| 88 | </g> |
| 89 | |
| 90 | <!-- ==================== Pyramid Body ==================== --> |
| 91 | <!-- Diamond facets (top surfaces of each tier) — solid dark navy, simulating top-light shadow. |
| 92 | Drawn first so side faces overlap them at the silhouette edges. --> |
| 93 | <g id="pyramid" data-pptx-bounds="284 77 712 574"> |
| 94 | <!-- Tier 3 top diamond (largest visible flat) --> |
| 95 | <polygon points="640.16,395.12 865.26,453.36 640.16,511.59 415.06,453.36" fill="#172554" stroke="none"/> |
| 96 | <!-- Tier 2 top diamond --> |
| 97 | <polygon points="640,311.23 798.58,352.01 640,392.79 481.42,352.01" fill="#1E3A8A" stroke="none"/> |
| 98 | <!-- Tier 1 top diamond (smallest) --> |
| 99 | <polygon points="640.41,227.07 732.56,250.74 640.41,274.41 548.26,250.74" fill="#1E40AF" stroke="none"/> |
| 100 | |
| 101 | <!-- Apex face (right slope of pinnacle) --> |
| 102 | <path d="M 640.27 109.6 L 726.47 241.6 L 640.6 263.8 L 639.27 263.46 L 639.27 111.13 L 640.27 109.6 Z" fill="url(#pyrFaceR1)" stroke="none"/> |
| 103 | <!-- Apex face (left slope of pinnacle) --> |
| 104 | <path d="M 639.27 111.13 L 639.27 263.46 L 554.17 241.45 L 639.27 111.13 Z" fill="url(#pyrFaceL1)" stroke="none"/> |
| 105 | |
| 106 | <!-- Tier 2 right face --> |
| 107 | <path d="M 732.49 250.83 L 792.5 342.73 L 639.94 382.18 L 639.27 382 L 639.27 274.24 L 640.6 274.58 L 732.49 250.83 Z" fill="url(#pyrFaceR2)" stroke="none"/> |
| 108 | <!-- Tier 2 left face --> |
| 109 | <path d="M 548.14 250.68 L 639.27 274.24 L 639.27 382 L 487.94 342.88 L 548.14 250.68 Z" fill="url(#pyrFaceL2)" stroke="none"/> |
| 110 | |
| 111 | <!-- Tier 3 right face --> |
| 112 | <path d="M 798.53 351.96 L 858.54 443.86 L 639.27 500.55 L 639.27 392.79 L 639.94 392.96 L 798.53 351.96 Z" fill="url(#pyrFaceR3)" stroke="none"/> |
| 113 | <!-- Tier 3 left face --> |
| 114 | <path d="M 481.91 352.1 L 639.27 392.79 L 639.27 500.55 L 421.71 444.3 L 481.91 352.1 Z" fill="url(#pyrFaceL3)" stroke="none"/> |
| 115 | |
| 116 | <!-- Tier 4 right face (the wide bottom slab) --> |
| 117 | <path d="M 864.57 453.08 L 924.96 545.58 L 641.27 618.93 L 639.27 618.41 L 639.27 511.34 L 864.57 453.08 Z" fill="url(#pyrFaceR4)" stroke="none"/> |
| 118 | <!-- Tier 4 left face --> |
| 119 | <path d="M 415.68 453.53 L 639.27 511.34 L 639.27 618.41 L 355.86 545.13 L 415.68 453.53 Z" fill="url(#pyrFaceL4)" stroke="none"/> |
| 120 | </g> |
| 121 | |
| 122 | <!-- ==================== Tier Number Labels (left slope, tilted ~14.66°) ==================== --> |
| 123 | <!-- Numbers sit on the left side-face of each tier, tilted along the slope. --> |
| 124 | <g id="tier-numbers" data-pptx-bounds="470 145 178 446" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-weight="800" fill="#FFFFFF" fill-opacity="0.92"> |
| 125 | <text transform="rotate(14.66 607.51 210.91)" x="588" y="226" font-size="56"><tspan>1</tspan></text> |
| 126 | <text transform="rotate(14.66 577.71 316.99)" x="559" y="333" font-size="56"><tspan>2</tspan></text> |
| 127 | <text transform="rotate(14.66 547.9 423.07)" x="529" y="439" font-size="56"><tspan>3</tspan></text> |
| 128 | <text transform="rotate(14.66 516.23 534.2)" x="497" y="550" font-size="56"><tspan>4</tspan></text> |
| 129 | </g> |
| 130 | |
| 131 | <!-- ==================== Tier Names (right slope, tilted ~-15°) ==================== --> |
| 132 | <!-- Short tier labels engraved on the right side-face. --> |
| 133 | <g id="tier-names" data-pptx-bounds="584 150 256 434" font-weight="700" fill="#FFFFFF" fill-opacity="0.92"> |
| 134 | <text transform="rotate(-15.04 669.06 210.44)" x="669.06" y="208" font-size="20" text-anchor="middle"><tspan>Foundation</tspan></text> |
| 135 | <text transform="rotate(-15.04 700 320)" x="700" y="320" font-size="20" text-anchor="middle"><tspan>Practice</tspan></text> |
| 136 | <text transform="rotate(-15.04 730 425)" x="730" y="425" font-size="20" text-anchor="middle"><tspan>Mastery</tspan></text> |
| 137 | <text transform="rotate(-15.04 760 540)" x="760" y="540" font-size="20" text-anchor="middle"><tspan>Leadership</tspan></text> |
| 138 | </g> |
| 139 | |
| 140 | <!-- ==================== Legend Cards (right side) ==================== --> |
| 141 | <!-- Per-tier two-line description, color-coded swatch matches the pyramid tier face. --> |
| 142 | <g id="legend" data-pptx-bounds="900 118 380 361"> |
| 143 | <!-- Tier 1 --> |
| 144 | <g> |
| 145 | <rect x="940" y="140" width="280" height="62" rx="10" fill="url(#pyrLegendPill)"/> |
| 146 | </g> |
| 147 | <rect x="940" y="140" width="6" height="62" rx="3" fill="#60A5FA"/> |
| 148 | <text x="962" y="165" font-size="15" font-weight="800" fill="#0F172A"><tspan>① Foundation</tspan></text> |
| 149 | <text x="962" y="183" fill="#475569">Onboarding, environment fluency,<tspan x="962" dy="14">baseline skills</tspan></text> |
| 150 | |
| 151 | <!-- Tier 2 --> |
| 152 | <g> |
| 153 | <rect x="940" y="225" width="280" height="62" rx="10" fill="url(#pyrLegendPill)"/> |
| 154 | </g> |
| 155 | <rect x="940" y="225" width="6" height="62" rx="3" fill="#3B82F6"/> |
| 156 | <text x="962" y="250" font-size="15" font-weight="800" fill="#0F172A"><tspan>② Practice</tspan></text> |
| 157 | <text x="962" y="268" fill="#475569">Deepens execution, owns small<tspan x="962" dy="14">projects end-to-end</tspan></text> |
| 158 | |
| 159 | <!-- Tier 3 --> |
| 160 | <g> |
| 161 | <rect x="940" y="310" width="280" height="62" rx="10" fill="url(#pyrLegendPill)"/> |
| 162 | </g> |
| 163 | <rect x="940" y="310" width="6" height="62" rx="3" fill="#2563EB"/> |
| 164 | <text x="962" y="335" font-size="15" font-weight="800" fill="#0F172A"><tspan>③ Mastery</tspan></text> |
| 165 | <text x="962" y="353" fill="#475569">Optimizes processes, mentors<tspan x="962" dy="14">juniors, sets standards</tspan></text> |
| 166 | |
| 167 | <!-- Tier 4 --> |
| 168 | <g> |
| 169 | <rect x="940" y="395" width="280" height="62" rx="10" fill="url(#pyrLegendPill)"/> |
| 170 | </g> |
| 171 | <rect x="940" y="395" width="6" height="62" rx="3" fill="#1E40AF"/> |
| 172 | <text x="962" y="420" font-size="15" font-weight="800" fill="#0F172A"><tspan>④ Leadership</tspan></text> |
| 173 | <text x="962" y="438" fill="#475569">Drives strategy, accountable for<tspan x="962" dy="14">org-level outcomes</tspan></text> |
| 174 | </g> |
| 175 | |
| 176 | <!-- ==================== Footer ==================== --> |
| 177 | <g id="source" data-pptx-bounds="40 676 1200 39"> |
| 178 | <text x="640" y="700" text-anchor="middle" font-size="13" font-weight="500" fill="#94A3B8"><tspan>Source: Annual capability review · Tiers map to broad maturity bands, not job titles</tspan></text> |
| 179 | </g> |
| 180 | </svg> |
| 181 |