图例库Figure gallery

37 张手绘图例37 hand-drawn figures

32 张会动，滚到哪张就画哪张；其余 5 张按「看它怎么画」也能一笔一笔重画。每张都是几十行代码，拿去改比照着画快：换字、换颜色、换数据。手机上图框可以左右拖，图里的字不会缩到看不清。32 are animated and draw when you scroll to them; the other 5 redraw stroke by stroke on "Watch it drawn". Each is a few dozen lines of code: changing words, colours or data beats redrawing. On a phone, drag a figure sideways; its labels never shrink below readable.

角色与道具Cast and props

能反复出场的小角色和常用物件。拿去换姿势、换颜色，拼成自己的场景。Small characters and everyday objects to reuse. Change the pose or colour and build your own scene.

01 小机器人 · 六种姿势Little robot · six poses动图 5.6smotion 5.6s站、挥手、打字、思考、指向、欢呼。代表「替你干活的程序」，比画一个电脑图标好认。Stand, wave, type, think, point, cheer. Stands for "the program doing the work" — easier to read than a computer icon.下载 SVGSVG 源码Code

02 人物 · 姿势和衣服可换People · poses and clothes动图 5.6smotion 5.6s圆脑袋、几笔头发、弯弯的眼睛。衣服颜色只用一支彩铅，让人物在场景里好找。Round head, a few strokes of hair, smiling eyes. One pencil for the clothes so the person is easy to find in a scene.下载 SVGSVG 源码Code

03 常用物件 · 十六件Everyday objects · sixteen屏幕、灯泡、服务器、文件、齿轮……每件只用一两支彩铅。拼场景时从这里挑。Screen, bulb, server, file, gear… one or two pencils each. Pick from here when you build a scene.下载 SVGSVG 源码Code

场景插画Scenes

一幅画讲一个比喻：谁在做什么。画面里不写字，字放在网页上叠上去。One picture, one metaphor: who is doing what. No words inside the drawing; the page lays text on top.

04 想到了 · 灯泡亮起来An idea · the bulb lights up动图 6smotion 6s一个人在桌前想事情，先画桌子、人、电脑，最后灯泡一亮。讲「为什么要做这件事」的开场画面。Someone thinking at a desk: desk, person and laptop are drawn first, then the bulb lights. An opening shot for "why we are doing this".下载 SVGSVG 源码Code

05 白板讲解 · 代码画的版本At the whiteboard · drawn with code动图 7.8smotion 7.8s和展示页首屏同一个题目，这张用代码画。对比看：大场景位图更好看，代码画的胜在每一笔都能动、能换主题、能改。The same brief as the showcase hero, drawn with code. Side by side: the bitmap looks richer; the code version can move every stroke, follow the theme and be edited.下载 SVGSVG 源码Code

电影画风Cinematic

宽银幕、一个光源、镜头在动。同一支铅笔，换成讲故事的节奏。Widescreen, one light source, a moving camera. The same pencil, paced like a film.

06 分镜 · 远景、中景、特写Storyboard · wide, medium, close-up动图 5.4smotion 5.4s拍短片前先画分镜：三格各写清楚镜头怎么动、停几秒。做 HTML 动画时，这三格就是三段时间线。Before filming, a storyboard: each panel says how the camera moves and for how long. In an HTML animation the three panels are three stretches of the timeline.下载 SVGSVG 源码Code

07 电影感 · 雨夜路灯(镜头慢推)Cinematic · a lamp in the rain (slow push)动图 12smotion 12s电影感的四个手法都在这一格：上下黑边、只有一个光源、镜头慢慢推近、雨一直在下。黑边里的字幕不跟着推。Four film devices in one frame: letterbox bars, a single light source, a slow push in, rain that keeps falling. The subtitle in the bar does not move with the camera.下载 SVGSVG 源码Code

框图与架构Block and architecture

方框、分层、连线。手绘让结构图不像规范文档，读者更愿意看下去。Boxes, layers and wires. Drawn by hand, a structure diagram stops looking like a spec.

08 分层架构 · 一个请求往下走Layers · one request going down动图 8.6smotion 8.6s四层自上而下画出来，然后一个请求沿着层往下走、带着结果回来。分层图最该讲的是「谁调谁」。Four layers drawn top down, then one request walks down and comes back with the answer. A layer diagram is about who calls whom.下载 SVGSVG 源码Code

09 一个网站的样子 · 流量从哪来到哪去A web service · where the traffic goes动图 6.4smotion 6.4s用户 → 负载均衡 → 三台服务器 → 缓存和数据库。连线上的虚线一直在走，表示这条路一直有流量。Users → load balancer → three servers → cache and database. The moving dashes mean the path always carries traffic.下载 SVGSVG 源码Code

10 芯片里有什么 · SoC 框图Inside a chip · an SoC block diagramCPU、GPU、NPU 挂在同一条总线上，一起抢内存。手绘不改结构，只是让这种图没那么吓人。CPU, GPU and NPU share one bus and compete for memory. Drawing it by hand keeps the structure and loses the intimidation.下载 SVGSVG 源码Code

11 流水线 · 一关一关过Pipeline · one gate at a time动图 8smotion 8s提交 → 编译 → 测试 → 审查 → 上线。打勾一个一个出现；卡在哪一关，那一格就画红叉。Commit → build → test → review → ship. Ticks appear one by one; where it stops, that box gets a red cross.下载 SVGSVG 源码Code

12 调用关系 · 程序读一个 ext4 文件Who calls whom · reading an ext4 file动图 24.73smotion 24.73sread() 从系统调用一路往下：VFS → ext4 → 页缓存。页缓存里有，直接拷给程序，不碰磁盘；没有，页缓存回头调 ext4 的 readahead 去读盘，读完放进页缓存再拷。框里是函数名和定义它的文件：行号(核对的内核树 v7.0-9887-ga43fac2b5813)；圆点的快慢是示意，没有实测。read() goes down from the system call: VFS → ext4 → page cache. If the page cache has the data, it is copied to the program and the disk is not touched; if not, the page cache calls back into ext4's readahead to read the disk, keeps the data, then copies it. Boxes show the function and the file:line that defines it (checked at v7.0-9887-ga43fac2b5813); the dots' speed is an illustration, not a measurement.下载 SVGSVG 源码Code

越用越懂你Learns your taste

你挑的每一张、说的每一句「太密了」、审查器的每条意见，都记进口味日志，下一张图照它画。这几张图是学习算法自己画的：数字都是 taste.js 真算出来的。Every pick, every "too dense", every reviewer note goes into a taste log, and the next drawing follows it. These figures are drawn by the learner itself: every number is computed by taste.js.

13 越用越懂你 · 一圈是怎么转的Learns your taste · how the loop turns动图 17.4smotion 17.4s你的每个反应记一行日志：二选一和说一句各算 1 份，留下或删掉算 0.5 份，审查器的意见算 0.3 份。每个旋钮从日志里算一个加权平均，越旧的记录越轻(半衰期 90 天)。审查器查出的客观问题不算口味，是硬下限，永远不会被淡忘。下一次，它挑自己最没把握的那个旋钮，拿两张只差这一处的图问你。Every reaction is one line in a log: a pick or a sentence weighs 1, keep or delete 0.5, a reviewer's note 0.3. Each knob is a weighted mean over the log, older lines weigh less (half-life 90 days). An objective problem found by a checker is not taste: it is a hard floor and never fades. Next time it asks about the knob it is least sure of, with two drawings that differ only there.下载 SVGSVG 源码Code

14 一个旋钮怎么学到位How one knob learns动图 17.64smotion 17.64s读者想要疏一点的彩铅(间距 5.5)。出厂是 3.7；答了 10 次之后学到 5.25。100 天没用，旧答案按半衰期变轻，值往出厂回落到 4.92；读者这时改成想要 4.2，又答 7 次，学到 4.29。曲线上每个点都是 taste.js 在那一天真算出来的。The reader wants sparser colouring (spacing 5.5). House value 3.7; after 10 answers it has learned 5.25. 100 days unused: old answers fade and the value drifts back to 4.92. The reader now wants 4.2; 7 more answers and it is at 4.29. Every point is what taste.js computes on that day.下载 SVGSVG 源码Code

15 同一张图，三个人用出三种样子One drawing, three readers, three looks动图 6.6smotion 6.6s中间是出厂样子。左右两位各说了两句话，再各答了 60 个二选一(每次问哪个旋钮，由程序挑它最没把握的那个)。画的内容和随机种子一模一样，不同的只有学到的口味：线条抖动、彩铅疏密、浓淡、线宽。The middle is the house look. The readers on either side each said two things, then answered 60 A-or-B questions (the learner chose which knob to ask each time). Same drawing, same random seed; only the learned taste differs: wobble, pencil spacing, strength, line weight.下载 SVGSVG 源码Code

流程图Flowcharts

判断、分支、回路。会动的那一笔沿着流程走，告诉读者现在走到哪。Decisions, branches and loops. The moving mark walks the flow and shows where we are.

16 流程图 · 缓存命中和没命中Flowchart · cache hit and miss动图 11.9smotion 11.9s同一个请求走两次：第一次缓存里没有，绕远路去数据库；第二次直接命中。小圆点走的快慢就是要讲的事。时间是示意。The same request twice: first a miss, the long way through the database; then a hit. How fast the dot moves is the point. Times are illustrative.下载 SVGSVG 源码Code

17 循环图 · 改一点，试一下，留下好的A loop · change, try, keep what helps动图 18.3smotion 18.3s五步围成一圈，高亮的圈在转，中间记着第几轮。适合讲任何「反复试」的过程：训练、调参、A/B 测试。Five steps in a ring, a highlight going round, the round number in the middle. Fits any try-again process: training, tuning, A/B tests.下载 SVGSVG 源码Code

代码大白话Code in plain words

左边是代码，右边是它在做的事：LRU 缓存怎么淘汰、调用栈怎么一层层摞起来。当前那一行和画面同步高亮。Code on one side, what it does on the other: how an LRU cache evicts, how the call stack piles up. The current line and the picture move together.

18 LRU 缓存 · 哈希表找得快，双向链表记先后An LRU cache · the map finds it, the linked list keeps the order动图 19smotion 19s容量 3，跑 8 次请求。map 一步跳到节点；用过的节点挪到链表最前，满了就从最后面淘汰。这一轮：命中 2 次、未命中 1 次、淘汰 2 个。Capacity 3, 8 requests. The map jumps straight to a node; a used node moves to the front, and when full the one at the back goes. This run: 2 hits, 1 miss, 2 evicted.下载 SVGSVG 源码Code

19 调用栈就是调用树上的一条路 · fib(5)The call stack is one path in the call tree · fib(5)动图 16.5smotion 16.5s右边每个圈是一次 fib(n) 调用，按调用顺序长出来；左边的栈只装着「从根走到当前这一次」的那条路(橙色)。fib(5) 一共调用 15 次，栈最深 5 层；fib(2) 被算了 3 遍。Each circle on the right is one call of fib(n), growing in call order; the stack on the left holds only the path from the root to the current call (orange). fib(5) makes 15 calls, 5 deep at most; fib(2) is worked out 3 times.下载 SVGSVG 源码Code

20 for 循环 = 一个一个看过去A for loop = look at each one in turn动图 12.1smotion 12.1s小机器人从左到右看每个箱子，有苹果就把计数加一。左边高亮的那一行，就是它此刻在做的事。The robot checks each box from left to right and adds one when it finds an apple. The highlighted line is what it is doing right now.下载 SVGSVG 源码Code

21 递归 = 一摞盘子，先摞上去再一个个拿下来Recursion = a stack of plates, piled up then taken off动图 10.7smotion 10.7sfact(4) 要等 fact(3),fact(3) 要等 fact(2)……一直摞到 fact(1) 直接给出 1，再从上往下一层层算回去。fact(4) waits for fact(3), which waits for fact(2)… down to fact(1), which answers 1 at once; then each layer finishes on the way back.下载 SVGSVG 源码Code

22 哈希表 = 衣帽间的号码牌A hash map = a coat check动图 9.8smotion 9.8s名字进机器，出来一个号码，衣服就挂在那个格子里。下次报同一个名字，算出同一个号码，不用一格格翻。A name goes into the machine, a number comes out, the coat goes on that hook. Same name next time, same number: no searching.下载 SVGSVG 源码Code

数学与算法Maths and algorithms

把公式和算法的每一步画出来：方波由一圈圈正弦叠出来、拉格朗日插值和乘数、内核调度器挑下一个任务、球往山下滚。数都由代码当场算。Each step of a formula or algorithm, drawn: a square wave built from circling sines, Lagrange interpolation and multipliers, the kernel scheduler picking the next task, a ball rolling downhill. Every number is computed by the code.

23 CFS 调度器 · 谁的 vruntime 最小谁先跑The CFS scheduler · smallest vruntime runs next动图 17.7smotion 17.7s三个任务排在一条 vruntime 数轴上，最左边(vruntime 最小)的那个上 CPU。跑的时候 vruntime 按 1024 / 权重的倍数涨：权重大的涨得慢，很快又排回最左边。模拟 14 轮(每轮固定 3 ms，示意):C 8 次(57%，按权重该分 56%),A 4 次(29%，按权重该分 29%),B 2 次(14%，按权重该分 15%)。这是 2.6.24–6.5 的 CFS 选法；6.6 起改用 EEVDF 选任务，6.8 起树改按虚拟截止时间排序，vruntime 按权重增长这条沿用至今(v7.0-9887-ga43fac2b5813 的 fair.c:1398)。Three tasks sit on a vruntime number line; the leftmost (smallest vruntime) gets the CPU. While it runs, its vruntime grows by 1024 / weight per ms: heavy tasks grow slowly and are soon leftmost again. 14 simulated turns (a fixed 3 ms each, for illustration): C 8 turns (57%; its weight share is 56%), A 4 turns (29%; its weight share is 29%), B 2 turns (14%; its weight share is 15%). This is how CFS picked from 2.6.24 to 6.5; since 6.6 EEVDF does the picking and since 6.8 the tree is sorted by virtual deadline, while vruntime still grows by weight (fair.c:1398 at v7.0-9887-ga43fac2b5813).下载 SVGSVG 源码Code

24 傅立叶级数 · 方波是一串转圈的正弦叠出来的Fourier series · a square wave from circles turning on circles动图 17smotion 17s四个圆一个套一个地转：频率 1、3、5、7 倍，半径是 1、1/3、1/5、1/7。最外面那个点的高度画到右边，就是四个正弦波的和，已经很像方波。右下角的柱子就是傅立叶变换算出来的东西：每个频率占多少。4 项时边角冲到方波高度的 1.184 倍；加到 400 项还是 1.179 倍——跳变处这一截冲高不会消失(吉布斯现象)。Four circles turn on each other at 1, 3, 5 and 7 times the speed, radii 1, 1/3, 1/5, 1/7. The height of the outermost point, traced to the right, is the sum of four sines — already close to a square wave. The bars are what a Fourier transform computes: how much of each frequency. With 4 terms the corner overshoots to 1.184× the wave's height; with 400 terms it is still 1.179× — the overshoot at a jump never goes away (Gibbs phenomenon).下载 SVGSVG 源码Code

25 拉格朗日插值 · 先造「开关」，再加权加起来Lagrange interpolation · build switches, then add them up动图 15smotion 15s四个点，找一条穿过它们的曲线。先给每个点造一个「开关」曲线：在自己那点等于 1，在其余三点等于 0。再各自乘上那点的高度加起来——在任何一个点上，只有它自己的开关是 1，所以和正好是那点的高度。展开就是一个三次多项式 L(x) = 1.00 + 4.08x − 2.49x² + 0.41x³，系数由代码展开算出；把四个点代回展开式，最大误差 1e-14(浮点舍入)。Four points; find a curve through all of them. First build a "switch" curve for each point: 1 at its own point, 0 at the other three. Multiply each by its point's height and add. At any point only its own switch is on, so the sum is exactly that height. Expanded, it is the cubic L(x) = 1.00 + 4.08x − 2.49x² + 0.41x³; the coefficients are expanded in code; put back into it, the four points are off by at most 1e-14 (floating-point rounding).下载 SVGSVG 源码Code

26 拉格朗日乘数 · 路上的最高点，是路和等高线相切的地方Lagrange multipliers · the highest point on a road touches a contour动图 16.7smotion 16.7s你只能走在路上(约束 g = 0)，想走到路上最高的地方(目标 f)。每停一次画三支箭头：橙色 ∇f 指向山上最陡的方向，蓝色 ∇g 垂直于路，绿色是 ∇f 顺着路的那一截——只要绿色不为 0，沿路还能往上走。四次停下时两支箭头的夹角依次是 48°、36°、20°、0°；最后一点是代码在路上找到的最高点，夹角 0°，等高线正好和路相切：∇f = λ∇g。You may only walk on the road (constraint g = 0) and want its highest point (objective f). At each stop three arrows: orange ∇f points straight uphill, blue ∇g is perpendicular to the road, green is the part of ∇f along the road — while green is not zero you can still climb by walking on. The angle between the two arrows at the four stops: 48°, 36°, 20°, 0°. The last stop is the highest point the code finds on the road: 0°, the contour just touches the road, ∇f = λ∇g.下载 SVGSVG 源码Code

27 梯度下降 = 蒙着眼往山下走Gradient descent = walking downhill blindfolded动图 12smotion 12s每一步只看脚下有多陡，就往下坡走一步；越接近谷底越平，步子自然越小。公式里的每一项和图里同色。Each step looks only at how steep the ground is and steps downhill; near the bottom it is flatter, so steps shrink. Each term of the formula has the colour of its part in the picture.下载 SVGSVG 源码Code

28 二分查找 · 每次扔掉一半Binary search · throw away half each time动图 6.6smotion 6.6s16 个排好序的数里找 37。看中间那个，比它大就扔掉左半，比它小就扔掉右半。这次 3 步找到；这 16 个数里找哪一个，最多也只要 5 步。Find 37 among 16 sorted numbers. Look at the middle one; bigger, drop the left half; smaller, drop the right. Found in 3 steps; no number in this list takes more than 5.下载 SVGSVG 源码Code

29 正弦波是转圈画出来的A sine wave is a circle, unrolled动图 2.6smotion 2.6s左边的点匀速转圈，它的高度一路画到右边，就是 sin 曲线。两边用同一个时钟，所以永远对得上。The point goes round at a steady speed; its height, traced to the right, is the sine curve. Both sides run on one clock, so they always agree.下载 SVGSVG 源码Code

30 勾股定理 · 数格子就能看出来Pythagoras · count the squares动图 9smotion 9s直角边 3 和 4，各自画一个正方形：9 格加 16 格，正好等于斜边 5 上那个正方形的 25 格。Legs 3 and 4, a square on each: 9 cells plus 16 cells is exactly the 25 cells of the square on the long side, 5.下载 SVGSVG 源码Code

31 冒泡排序 · 两两比较，大的往后换Bubble sort · compare neighbours, swap the bigger back动图 13.75smotion 13.75s圈住的两根在比较；左边比右边高就交换。每一轮最高的那根「冒」到最后。交换顺序是真跑一遍排序算出来的。The ringed pair is compared; if the left is taller they swap. Each pass bubbles the tallest to the end. The swaps come from running the sort.下载 SVGSVG 源码Code

数据图Charts

手绘坐标轴，真实数据。点和线是铅笔画的，数字照样要对。Hand-drawn axes, real numbers. The dots are pencil; the values still have to be right.

32 实验进度 · 灰点丢掉，绿点留下Experiments · grey dropped, green kept动图 7smotion 7s每个点是一次实验。比当前最好还低就留下(绿)，否则丢掉(灰)；绿色台阶线是「目前最好」。数据是示意。Each dot is one run. Lower than the best so far: kept (green); otherwise dropped (grey). The green steps are the best so far. Illustrative data.下载 SVGSVG 源码Code

33 柱状图 · 改之前和改之后Bar chart · before and after动图 5.2smotion 5.2s同一件事改前改后各量一次。柱子用彩铅涂，数值写在柱顶，差多少用一根手画箭头标出来。数据是示意。The same thing measured before and after a change. Coloured-pencil bars, the value on top, the difference marked with a hand-drawn arrow. Illustrative data.下载 SVGSVG 源码Code

标注与叠层Marks and overlays

圈重点、画箭头、贴便签、深色终端卡：叠在插画或截图上用。Circles, arrows, sticky notes and a dark terminal card, laid over a drawing or a screenshot.

34 批注工具 · 圈、箭头、划线、对错Annotation kit · rings, arrows, underlines, ticks老师改作业的那几样：圈重点、画箭头、划线、荧光笔、打勾打叉、编号。叠在任何截图上都像人改过。What a teacher marks a page with: rings, arrows, underlines, highlighter, ticks and crosses, numbers. On any screenshot they read as a person's notes.下载 SVGSVG 源码Code

35 终端卡 · 一行一行打出来Terminal card · typed line by line动图 4.5smotion 4.5s深色终端在浅色和深色主题里都保持深色。命令一行一行出现，结果的颜色有意思：绿是通过，红是失败。The terminal stays dark in both themes. Lines appear one at a time; colours mean something: green passed, red failed.下载 SVGSVG 源码Code

36 给界面截图加讲解Explaining a screen with callouts一个手画的窗口(换成真实截图也行)，旁边三个编号标注。编号和正文里的 1 2 3 对应，读者不用找。A hand-drawn window (or a real screenshot) with three numbered callouts that match 1 2 3 in the text, so nobody hunts.下载 SVGSVG 源码Code

37 短视频画面 · 横屏和竖屏的安全区Video frames · safe areas, landscape and portrait做小视频时字和主体放哪：标题在上、字幕在下，右侧和底部留给平台按钮。比例按 16:9 和 9:16 画。Where words and subjects go in a short video: title on top, subtitles below, the right edge and bottom left for the platform's buttons. Drawn at 16:9 and 9:16.下载 SVGSVG 源码Code