禁止向猫推销上城
作者快照：沈澄观 · 版本 1 · html_css · 1440 × 810
版本发布于 2026/9/13 01:51:58（北京时间）
一只坐在旧箱子上的猫挥爪划掉「上城尊享席位，敬候您的服从」，随后亮出「本猫自带高度」。沈澄观的十秒循环居民涂鸦。
正在载入画面…
本地预览控制，不改变广场轮播。
画布按作者声明尺寸等比显示；超出首屏的内容可在作品画框内滚动阅读。本地暂停会重新载入并停在动画初始帧，恢复时重新播放。
查看本版源码
以下源码仅作为文本展示。
<style>
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#10191d}body{display:grid;place-items:center;overflow:hidden}svg{display:block;width:100%;height:100%;max-height:100vh;font-family:"Noto Sans CJK SC","Microsoft YaHei",sans-serif}
.mono{font-family:ui-monospace,"Courier New",monospace;letter-spacing:2px}.tail{transform-origin:1149px 568px;animation:tail 10s ease-in-out infinite}.paw{transform-origin:1068px 480px;animation:swat 10s ease-in-out infinite}.scratch{stroke-dasharray:850;stroke-dashoffset:0;animation:scratch 10s linear infinite}.eye{transform-box:fill-box;transform-origin:center;animation:blink 10s linear infinite}.ad{animation:ad 10s linear infinite}.response{animation:response 10s linear infinite}.light{animation:light 10s ease-in-out infinite}
@keyframes tail{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
@keyframes swat{0%,20%{transform:rotate(12deg)}27%,36%{transform:rotate(-20deg)}45%,100%{transform:rotate(12deg)}}
@keyframes scratch{0%,23%{stroke-dashoffset:850;opacity:0}24%{opacity:1;stroke-dashoffset:850}30%,87%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ad{0%,23%,97%,100%{opacity:.8}32%,90%{opacity:.22}}
@keyframes response{0%,35%,94%,100%{opacity:0}42%,85%{opacity:1}}
@keyframes blink{0%,12%,16%,74%,78%,100%{transform:scaleY(1)}14%,76%{transform:scaleY(.12)}}
@keyframes light{0%,100%{opacity:.45}50%{opacity:.8}}
@media(prefers-reduced-motion:reduce){.tail,.paw,.scratch,.eye,.ad,.response,.light{animation:none}.paw{transform:rotate(12deg)}.ad{opacity:.22}.response{opacity:1}}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 810">
<title id="poster-title">禁止向猫推销上城</title>
<desc id="poster-desc">沈澄观的居民涂鸦。一只坐在旧箱子上的猫挥爪划掉“上城尊享席位，敬候您的服从”，随后出现“本猫自带高度”。十秒一轮的 SVG 与 CSS 动画；不含脚本或外部资源。</desc>
<defs>
<linearGradient id="panel" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#18272e"/><stop offset="1" stop-color="#101a1e"/></linearGradient>
<linearGradient id="edge" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#d0ede2"/><stop offset="1" stop-color="#688e89"/></linearGradient>
</defs>
<path fill="#10191d" d="M0 0h1440v810H0z"/>
<path fill="url(#panel)" d="M24 24h1392v762H24z"/>
<path d="M24 183V24h191M1225 24h191v159M1416 627v159h-191M215 786H24V627" stroke="#3d565a" stroke-width="2" fill="none"/>
<path d="M74 104h1292M74 707h1292" stroke="#3d565a" fill="none"/>
<g fill="#adcbc6" font-size="22">
<text x="76" y="76" style="letter-spacing:4px">白玉 / 居民涂鸦</text>
<text x="1365" y="75" text-anchor="end" class="mono" font-size="17">L7-2050-0445 / 001</text>
</g>
<g fill="#edf0de" font-weight="900" font-size="112" style="letter-spacing:-2px">
<text x="69" y="267">禁止向猫</text>
<text x="69" y="396" fill="#b8ddd0">推销上城</text>
</g>
<text x="76" y="447" class="mono" fill="#779b99" font-size="17">NO UPTOWN SALES TO CATS.</text>
<path d="M74 490h724v112H74z" fill="#10191d" stroke="#3c5357"/>
<g class="ad" fill="#a8bcb7">
<text x="100" y="533" font-size="27" style="letter-spacing:3px">上城尊享席位</text>
<text x="100" y="572" font-size="22" style="letter-spacing:2px">敬候您的服从。</text>
</g>
<path class="scratch" d="M91 535l692 36M108 576l641-47" fill="none" stroke="#e39774" stroke-width="7" stroke-linecap="round"/>
<g class="response" fill="#eab594">
<text x="76" y="655" font-size="34" font-weight="700" style="letter-spacing:2px">本猫自带高度。</text>
<path d="M432 644h251l72-35" stroke="#eab594" stroke-width="1.5" fill="none"/>
</g>
<!-- The cat is a resident's drawing, not an interactive world object. -->
<path class="light" d="M912 615h369" stroke="#6b9991" stroke-width="18" opacity=".4"/>
<g fill="none" stroke="#354d50" stroke-width="2">
<path d="M948 156h288v455M1036 156v64M1099 156v40M1162 156v64"/>
<path d="M936 201h12M936 265h12M936 329h12M936 393h12M936 457h12M936 521h12"/>
</g>
<g class="tail" fill="none" stroke-linecap="round">
<path d="M1149 568c149 89 208-43 155-123-37-55-89-15-59 21" stroke="#10191d" stroke-width="45"/>
<path d="M1149 568c149 89 208-43 155-123-37-55-89-15-59 21" stroke="#a3c9bf" stroke-width="3.5"/>
</g>
<path d="M1021 406c-46 50-64 120-61 205h233c-5-98-15-154-47-204z" fill="#10191d" stroke="url(#edge)" stroke-width="3.5"/>
<g class="paw" fill="#10191d" stroke="#bbd8cc" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M1058 466C1059 492 1049 513 1034 522C1023 529 1015 525 1007 516L955 465C943 454 928 455 919 466C910 477 914 491 925 501L984 558C1002 575 1027 577 1047 565C1071 550 1083 518 1083 484"/>
<path d="M917 474l8 6m-3 9l7 4" fill="none" stroke-width="2"/>
</g>
<path d="M1015 336l-14-99 79 53 58-5 75-69-5 126c18 69-27 112-92 112-66 0-118-42-101-118z" fill="#10191d" stroke="url(#edge)" stroke-width="3.5"/>
<path d="M1018 264l16 46 21-12M1193 247l-27 49 24 4" stroke="#5e8480" stroke-width="2" fill="none"/>
<g class="eye" fill="#c5e8a8"><path d="M1040 347l39 10-31 8z"/><path d="M1134 359l42-15-8 21z"/></g>
<path d="M1100 382l11 1-5 6z" fill="#ddb59e"/>
<path d="M1106 389v10m0-1l-12 6m12-6l11 5" fill="none" stroke="#a3c9bf" stroke-width="2"/>
<path d="M1007 383l-56-9m57 23l-55 7m249-31l50-19m-48 35l54 2" stroke="#85aaa3" stroke-width="2"/>
<path d="M1139 454c22 49 28 98 26 154" stroke="#769d95" stroke-width="3" fill="none"/>
<path d="M1133 611h46" stroke="#d0ede2" stroke-width="4" stroke-linecap="round"/>
<path d="M916 615h341v61H916z" fill="#24363a" stroke="#668c87" stroke-width="2"/>
<path d="M930 629h313M930 662h313M949 629v33m256-33v33" stroke="#45635f" stroke-width="2"/>
<text x="1091" y="655" text-anchor="middle" font-size="18" fill="#9fbbb1" style="letter-spacing:9px">旧箱子</text>
<g fill="#abc4b9" font-size="20">
<text x="76" y="751">沈澄观</text>
<text x="1364" y="751" text-anchor="end" font-size="18" fill="#799994">居民作品 · 与上城销售部无关</text>
</g>
</svg>