Cloudflare 官网这排 Logo,一张图片都没用
每张卡上的品牌 Logo 都是一根根竖线拼出来的。鼠标移上去,线会散开再拼回来,旁边还会冒出几个检测框。看了下,页面里一张 Logo 图片都没有,是用 canvas 实时画出来的
做法其实不复杂。
程序先在一块看不见的画布上把 Logo 画一遍,切成很多小格子,记下每一格有多亮,存成一张亮度表。记完之后 Logo 就用不上了。屏幕上的竖线每一帧都去查这张表,亮的地方线画粗一点,暗的地方画细一点。几十根线排在一起,粗细一变,Logo 的形状就出来了,有点像用梳子在沙子上梳出图案。
Logo 本身就是线画出来的,所以线怎么动,Logo 就跟着怎么动。往下流、散开、再拼回来,都不会错位。要是在线底下垫一张图,线一动就对不上了。
先把图片转成亮度表,再让别的东西照着表来画,这个思路挺常见的,字符画和报纸上的网点印刷都是这么做的。我自己复刻的时候换成了 Apple、Google、Tesla 三个牌子,换了 Logo 的 SVG 路径。
交给 AI 做:
把下面这段复制给 Claude 或 ChatGPT,就能做出差不多的效果 👇
THE ANATOMY OF A SECOND BRAIN THAT WRITES ITSELF
one Obsidian vault, five folders, and a loop that files every good answer back into a wiki you never touch
how it's laid out:
> CLAUDE. md + AGENTS. md - the house rules, the same whether Claude or Codex runs the loop
> raw/ - inbox, articles, assets. read-only once they land, you feed it and walk away
> wiki/ - index. md, entities/, concepts/, synthesis. md. the agent grows this part
> log. md - append-only, a timestamp on every move
47 sources in, 210 pages out. 96% of it typed by the agent
only synthesis. md gets Opus 5.5. it's the one file that needs frontier reasoning, the rest runs on cheaper models
under the hood it's Karpathy's llm-wiki plus loop engineering: you ask, a good answer gets filed back, the wiki grows. link the entities to each other and you're one step from a graph
the full setup, Hermes and Obsidian included, is below:
Introducing the ASCII Library by ASCII Magic ✨
The biggest collection of animated ASCII/Halftone/Dither art: 634 pieces, 24 categories, all in one place.
Scenes, cities, UI screens, charts, diagrams, 3D shapes, mascots, loaders, games, retro computers, science, explainers, music and more.
What you can do with it:
→ Add one to your project in one prompt: run npx ascii-magic-art, browse every piece live in your terminal, press enter, paste into your coding agent
→ Restyle anything: halftone dots, real dither, ASCII, binary, letters, blocks, or your own characters
→ Embed it in 2 lines: one script tag + <ascii-art piece="matrix-rain">
→ Works with React, Next.js, Vue, Svelte and Astro, or host it yourself
→ Use it as a wallpaper: 4K desktop, phone, YouTube, X header and LinkedIn banner sizes
→ Export GIF or video, ready for posts, emails and slides
→ Level up your GitHub README with GIFs and an animated banner maker
→ Build it into your interfaces: spinners, loaders, progress bars, empty states, 404 pages, dashboards
Open source and MIT licensed. Use it anywhere, even in commercial work.
🔗 https://t.co/U5n7ZbGlzE