| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <clipPath id="circleClip"> |
| 4 | <circle cx="640" cy="360" r="220"/> |
| 5 | </clipPath> |
| 6 | <linearGradient id="monoLine" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 7 | <stop offset="0%" stop-color="#E8E8F0" stop-opacity="0.5"/> |
| 8 | <stop offset="100%" stop-color="#E8E8F0" stop-opacity="0.1"/> |
| 9 | </linearGradient> |
| 10 | <radialGradient id="circleGlow" cx="50%" cy="50%" r="50%"> |
| 11 | <stop offset="0%" stop-color="#7C6FF7" stop-opacity="0.08"/> |
| 12 | <stop offset="100%" stop-color="#7C6FF7" stop-opacity="0"/> |
| 13 | </radialGradient> |
| 14 | </defs> |
| 15 | |
| 16 | <!-- Background — near white mono-ink style --> |
| 17 | <rect width="1280" height="720" fill="#F8F8F8"/> |
| 18 | |
| 19 | <!-- Subtle radial background glow --> |
| 20 | <rect width="1280" height="720" fill="url(#circleGlow)"/> |
| 21 | |
| 22 | <!-- Page meta — top --> |
| 23 | <text x="640" y="32" text-anchor="middle" font-family="Consolas, monospace" |
| 24 | font-size="13" fill="#9090A0" letter-spacing="3">P09 · digital-dashboard × mono-ink</text> |
| 25 | <line x1="200" y1="44" x2="1080" y2="44" stroke="#111111" stroke-opacity="0.08" stroke-width="1"/> |
| 26 | |
| 27 | <!-- Circle frame ring — outer --> |
| 28 | <circle cx="640" cy="360" r="224" fill="none" stroke="#111111" stroke-opacity="0.12" stroke-width="1"/> |
| 29 | <!-- Circle frame ring — mid --> |
| 30 | <circle cx="640" cy="360" r="222" fill="none" stroke="#7C6FF7" stroke-opacity="0.15" stroke-width="2"/> |
| 31 | |
| 32 | <!-- Center circular image — mono-ink dashboard --> |
| 33 | <image href="../images/p09_circle_img.png" x="420" y="140" width="440" height="440" |
| 34 | clip-path="url(#circleClip)" preserveAspectRatio="xMidYMid slice"/> |
| 35 | |
| 36 | <!-- Thin accent ring overlay --> |
| 37 | <circle cx="640" cy="360" r="220" fill="none" stroke="#111111" stroke-opacity="0.18" stroke-width="1"/> |
| 38 | |
| 39 | <!-- ===== Four corner text blocks with leader lines ===== --> |
| 40 | <!-- TOP-LEFT block — "数字仪表盘" --> |
| 41 | <line x1="478" y1="207" x2="380" y2="160" stroke="#111111" stroke-opacity="0.2" stroke-width="1"/> |
| 42 | <circle cx="478" cy="207" r="3" fill="#111111" fill-opacity="0.3"/> |
| 43 | <text x="340" y="128" text-anchor="end" font-family="Georgia, 'Microsoft YaHei', serif" |
| 44 | font-size="22" font-weight="bold" fill="#111111">数字仪表盘</text> |
| 45 | <text x="340" y="152" text-anchor="end" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 46 | font-size="15" fill="#5A5A72">digital-dashboard</text> |
| 47 | <text x="340" y="172" text-anchor="end" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 48 | font-size="15" fill="#5A5A72">UI数据可视化美学</text> |
| 49 | |
| 50 | <!-- TOP-RIGHT block — "单色调色板" --> |
| 51 | <line x1="802" y1="207" x2="900" y2="160" stroke="#111111" stroke-opacity="0.2" stroke-width="1"/> |
| 52 | <circle cx="802" cy="207" r="3" fill="#111111" fill-opacity="0.3"/> |
| 53 | <text x="920" y="128" font-family="Georgia, 'Microsoft YaHei', serif" |
| 54 | font-size="22" font-weight="bold" fill="#111111">墨黑单色</text> |
| 55 | <text x="920" y="152" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 56 | font-size="15" fill="#5A5A72">mono-ink</text> |
| 57 | <text x="920" y="172" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 58 | font-size="15" fill="#5A5A72">黑白 + 单点强调</text> |
| 59 | |
| 60 | <!-- BOTTOM-LEFT block — "圆形裁切" --> |
| 61 | <line x1="478" y1="513" x2="380" y2="560" stroke="#111111" stroke-opacity="0.2" stroke-width="1"/> |
| 62 | <circle cx="478" cy="513" r="3" fill="#111111" fill-opacity="0.3"/> |
| 63 | <text x="340" y="556" text-anchor="end" font-family="Georgia, 'Microsoft YaHei', serif" |
| 64 | font-size="22" font-weight="bold" fill="#111111">圆形裁切</text> |
| 65 | <text x="340" y="578" text-anchor="end" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 66 | font-size="15" fill="#5A5A72">clipPath circle</text> |
| 67 | <text x="340" y="598" text-anchor="end" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 68 | font-size="15" fill="#5A5A72">非矩形图像容器</text> |
| 69 | |
| 70 | <!-- BOTTOM-RIGHT block — "放射标注" --> |
| 71 | <line x1="802" y1="513" x2="900" y2="560" stroke="#111111" stroke-opacity="0.2" stroke-width="1"/> |
| 72 | <circle cx="802" cy="513" r="3" fill="#111111" fill-opacity="0.3"/> |
| 73 | <text x="920" y="556" font-family="Georgia, 'Microsoft YaHei', serif" |
| 74 | font-size="22" font-weight="bold" fill="#111111">放射标注</text> |
| 75 | <text x="920" y="578" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 76 | font-size="15" fill="#5A5A72">radial annotation</text> |
| 77 | <text x="920" y="598" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 78 | font-size="15" fill="#5A5A72">图像向外辐射信息</text> |
| 79 | |
| 80 | <!-- Center title (inside circle area — very subtle) --> |
| 81 | <!-- Accent marker at bottom --> |
| 82 | <text x="640" y="695" text-anchor="middle" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 83 | font-size="15" fill="#9090A0">圆心图像 · 四角文字 · 向心张力</text> |
| 84 | |
| 85 | <!-- Page number --> |
| 86 | <text x="1240" y="700" text-anchor="end" font-family="Arial, sans-serif" font-size="13" fill="#9090A0">09</text> |
| 87 | </svg> |
| 88 |