| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <pattern id="dotP04" x="0" y="0" width="7" height="7" patternUnits="userSpaceOnUse"> |
| 4 | <circle cx="3.5" cy="3.5" r="0.7" fill="#1A1A1A" fill-opacity="0.1"/> |
| 5 | </pattern> |
| 6 | </defs> |
| 7 | |
| 8 | <rect id="bg" width="1280" height="720" fill="#F5EFE0"/> |
| 9 | <rect id="bg-grain" width="1280" height="720" fill="url(#dotP04)"/> |
| 10 | |
| 11 | <g id="header"> |
| 12 | <rect x="60" y="56" width="14" height="68" fill="#1E4DBC"/> |
| 13 | <rect x="63" y="59" width="14" height="68" fill="#FF5C8A" opacity="0.7"/> |
| 14 | <rect x="60" y="56" width="14" height="68" fill="#1E4DBC"/> |
| 15 | <text x="92" y="98" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="48" fill="#1A1A1A" letter-spacing="-1">一百年里 ZINE 的四次浪潮</text> |
| 16 | <text x="92" y="128" font-family="Consolas, 'Courier New', monospace" font-size="13" fill="#5A5A5A" letter-spacing="3">FOUR WAVES OF SELF-PUBLISHING · 1920s — 2026</text> |
| 17 | </g> |
| 18 | |
| 19 | <line x1="60" y1="152" x2="1220" y2="152" stroke="#1A1A1A" stroke-width="3"/> |
| 20 | |
| 21 | <!-- Timeline horizontal track --> |
| 22 | <g id="timeline-track"> |
| 23 | <!-- main blue track --> |
| 24 | <rect x="100" y="404" width="1080" height="14" fill="#1E4DBC"/> |
| 25 | <!-- pink misregistration offset --> |
| 26 | <rect x="103" y="407" width="1080" height="14" fill="#FF5C8A" opacity="0.7"/> |
| 27 | <rect x="100" y="404" width="1080" height="14" fill="#1E4DBC"/> |
| 28 | <!-- end caps --> |
| 29 | <polygon points="1180,396 1210,411 1180,426" fill="#1E4DBC"/> |
| 30 | </g> |
| 31 | |
| 32 | <!-- Year tick markers on track --> |
| 33 | <g id="year-ticks"> |
| 34 | <line x1="156" y1="384" x2="156" y2="438" stroke="#1A1A1A" stroke-width="3"/> |
| 35 | <line x1="384" y1="384" x2="384" y2="438" stroke="#1A1A1A" stroke-width="3"/> |
| 36 | <line x1="612" y1="384" x2="612" y2="438" stroke="#1A1A1A" stroke-width="3"/> |
| 37 | <line x1="840" y1="384" x2="840" y2="438" stroke="#1A1A1A" stroke-width="3"/> |
| 38 | <line x1="1068" y1="384" x2="1068" y2="438" stroke="#1A1A1A" stroke-width="3"/> |
| 39 | </g> |
| 40 | |
| 41 | <!-- Wave 01: 1920s 业余出版 (above) --> |
| 42 | <g id="wave-01"> |
| 43 | <text x="156" y="200" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#FF5C8A" text-anchor="middle">1920s</text> |
| 44 | <text x="154" y="198" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#1A1A1A" text-anchor="middle">1920s</text> |
| 45 | <rect x="68" y="220" width="180" height="156" fill="#1A1A1A"/> |
| 46 | <rect x="71" y="223" width="180" height="156" fill="#1E4DBC" opacity="0.5"/> |
| 47 | <rect x="68" y="220" width="180" height="156" fill="#1A1A1A"/> |
| 48 | <rect x="68" y="220" width="180" height="34" fill="#FF5C8A"/> |
| 49 | <text x="158" y="244" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="14" font-weight="900" fill="#F5EFE0" text-anchor="middle">业余出版火种</text> |
| 50 | <text x="158" y="282" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">哈莱姆文艺复兴</text> |
| 51 | <text x="158" y="302" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">黑人创作 *FIRE!!*</text> |
| 52 | <text x="158" y="324" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="11" fill="#F5EFE0" text-anchor="middle" opacity="0.85">自由独立地表达</text> |
| 53 | <text x="158" y="358" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#FF5C8A" text-anchor="middle" letter-spacing="2">EMBER</text> |
| 54 | <line x1="156" y1="378" x2="156" y2="404" stroke="#FF5C8A" stroke-width="3" stroke-dasharray="3,3"/> |
| 55 | </g> |
| 56 | |
| 57 | <!-- Wave 02: 1930s 科幻同人志 (below) --> |
| 58 | <g id="wave-02"> |
| 59 | <line x1="384" y1="418" x2="384" y2="446" stroke="#FF5C8A" stroke-width="3" stroke-dasharray="3,3"/> |
| 60 | <text x="384" y="476" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#FF5C8A" text-anchor="middle">1930s</text> |
| 61 | <text x="382" y="474" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#1A1A1A" text-anchor="middle">1930s</text> |
| 62 | <rect x="296" y="494" width="180" height="156" fill="#1A1A1A"/> |
| 63 | <rect x="299" y="497" width="180" height="156" fill="#FF5C8A" opacity="0.5"/> |
| 64 | <rect x="296" y="494" width="180" height="156" fill="#1A1A1A"/> |
| 65 | <rect x="296" y="494" width="180" height="34" fill="#1E4DBC"/> |
| 66 | <text x="386" y="518" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="14" font-weight="900" fill="#F5EFE0" text-anchor="middle">科幻同人志</text> |
| 67 | <text x="386" y="556" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">*THE COMET*（1930）</text> |
| 68 | <text x="386" y="576" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">第一本科幻同人志</text> |
| 69 | <text x="386" y="598" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="11" fill="#F5EFE0" text-anchor="middle" opacity="0.85">1940 RUSS CHAUVENET</text> |
| 70 | <text x="386" y="616" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="11" fill="#F5EFE0" text-anchor="middle" opacity="0.85">创造"FANZINE"一词</text> |
| 71 | <text x="386" y="640" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#1E4DBC" text-anchor="middle" letter-spacing="2">CRYSTALLIZE</text> |
| 72 | </g> |
| 73 | |
| 74 | <!-- Wave 03: 1976 朋克 (above) --> |
| 75 | <g id="wave-03"> |
| 76 | <text x="612" y="200" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#FF5C8A" text-anchor="middle">1976</text> |
| 77 | <text x="610" y="198" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#1A1A1A" text-anchor="middle">1976</text> |
| 78 | <rect x="524" y="220" width="180" height="156" fill="#1A1A1A"/> |
| 79 | <rect x="527" y="223" width="180" height="156" fill="#1E4DBC" opacity="0.5"/> |
| 80 | <rect x="524" y="220" width="180" height="156" fill="#1A1A1A"/> |
| 81 | <rect x="524" y="220" width="180" height="34" fill="#E8A02E"/> |
| 82 | <text x="614" y="244" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">朋克 ZINE 浪潮</text> |
| 83 | <text x="614" y="282" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">*SNIFFIN' GLUE*</text> |
| 84 | <text x="614" y="302" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">MARK PERRY 创办</text> |
| 85 | <text x="614" y="324" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="11" fill="#F5EFE0" text-anchor="middle" opacity="0.85">复印机普及 + 工薪阶层</text> |
| 86 | <text x="614" y="358" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#E8A02E" text-anchor="middle" letter-spacing="2">DIY EXPLOSION</text> |
| 87 | <line x1="612" y1="378" x2="612" y2="404" stroke="#E8A02E" stroke-width="3" stroke-dasharray="3,3"/> |
| 88 | </g> |
| 89 | |
| 90 | <!-- Wave 04: 1991 Riot Grrrl (below) --> |
| 91 | <g id="wave-04"> |
| 92 | <line x1="840" y1="418" x2="840" y2="446" stroke="#FF5C8A" stroke-width="3" stroke-dasharray="3,3"/> |
| 93 | <text x="840" y="476" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#FF5C8A" text-anchor="middle">1991</text> |
| 94 | <text x="838" y="474" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="42" fill="#1A1A1A" text-anchor="middle">1991</text> |
| 95 | <rect x="752" y="494" width="180" height="156" fill="#FF5C8A"/> |
| 96 | <rect x="755" y="497" width="180" height="156" fill="#1E4DBC" opacity="0.5"/> |
| 97 | <rect x="752" y="494" width="180" height="156" fill="#FF5C8A"/> |
| 98 | <rect x="752" y="494" width="180" height="34" fill="#1A1A1A"/> |
| 99 | <text x="842" y="518" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="14" font-weight="900" fill="#F5EFE0" text-anchor="middle">RIOT GRRRL</text> |
| 100 | <text x="842" y="556" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#1A1A1A" text-anchor="middle">*BIKINI KILL* 同名 zine</text> |
| 101 | <text x="842" y="576" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#1A1A1A" text-anchor="middle">KATHLEEN HANNA 主编</text> |
| 102 | <text x="842" y="598" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="11" fill="#1A1A1A" text-anchor="middle" opacity="0.85">第三波女性主义 + DIY 朋克</text> |
| 103 | <text x="842" y="616" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="11" fill="#1A1A1A" text-anchor="middle" opacity="0.85">RIOT GRRRL PRESS 分发网络</text> |
| 104 | <text x="842" y="640" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#1A1A1A" text-anchor="middle" letter-spacing="2">FEMINIST WAVE</text> |
| 105 | </g> |
| 106 | |
| 107 | <!-- Wave 05: 2010s 当代复兴 (above) --> |
| 108 | <g id="wave-05"> |
| 109 | <text x="1068" y="200" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="38" fill="#FF5C8A" text-anchor="middle">2010s+</text> |
| 110 | <text x="1066" y="198" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="38" fill="#1A1A1A" text-anchor="middle">2010s+</text> |
| 111 | <rect x="980" y="220" width="180" height="156" fill="#1E4DBC"/> |
| 112 | <rect x="983" y="223" width="180" height="156" fill="#FF5C8A" opacity="0.5"/> |
| 113 | <rect x="980" y="220" width="180" height="156" fill="#1E4DBC"/> |
| 114 | <rect x="980" y="220" width="180" height="34" fill="#F5EFE0"/> |
| 115 | <text x="1070" y="244" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="14" font-weight="900" fill="#1A1A1A" text-anchor="middle">当代复兴 + 书展爆发</text> |
| 116 | <text x="1070" y="282" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">SF Zine Fest (2001)</text> |
| 117 | <text x="1070" y="302" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="13" fill="#F5EFE0" text-anchor="middle">LA Zine Fest (2012)</text> |
| 118 | <text x="1070" y="324" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="11" fill="#F5EFE0" text-anchor="middle" opacity="0.85">大英图书馆 / TATE 收藏</text> |
| 119 | <text x="1070" y="358" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#F5EFE0" text-anchor="middle" letter-spacing="2">RENAISSANCE</text> |
| 120 | <line x1="1068" y1="378" x2="1068" y2="404" stroke="#F5EFE0" stroke-width="3" stroke-dasharray="3,3"/> |
| 121 | </g> |
| 122 | |
| 123 | <g id="footer"> |
| 124 | <line x1="60" y1="690" x2="1220" y2="690" stroke="#1A1A1A" stroke-width="1"/> |
| 125 | <text x="60" y="708" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#5A5A5A" letter-spacing="2">P04 · FOUR WAVES OF ZINE</text> |
| 126 | <text x="1220" y="708" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#5A5A5A" text-anchor="end" letter-spacing="2">EMBER → CRYSTALLIZE → EXPLOSION → FEMINIST → RENAISSANCE</text> |
| 127 | </g> |
| 128 | </svg> |
| 129 |