detail
fenx

Designer

Blog
Design ScenesDesign Scenes
Work
Design FragmentsDesign Fragments Web
YumlogYumlog iOS
Pokémon SVG BenchPokémon SVG Bench Web
Twigs
TrinketsTrinkets
Token UsageToken Usage --
MoreMore
Resume
npx skills add fenxer/fenx-resume
Social
XX RednoteRednote FigmaFigma

© 2026 fenx

辽ICP备2026005036号-1 辽公网安备21020202000870号

Pokémon SVG Bench

SVG Generation LLM Benchmark

Visit Website
English

Driven by pure curiosity about LLMs' ability to generate SVGs, I built this benchmark project. I picked Pokémon across different dimensions, had the LLMs output pure SVG data directly via APIs, and finally ranked them through manual evaluation.

I designed both the frontend and backend completely from scratch, which also taught me a ton about how test suites and evaluation workflows actually work. Honestly, a lot of the tiny details were way trickier than I expected.

The generated data itself turned out to be super interesting, so I went ahead and made a "Who's that Pokémon?" mini-game. All the SVGs are displayed as black silhouettes for users to guess who's who. But since the generated SVG structures can be a bit chaotic, massive solid backgrounds would often pop up and block the Pokémon's outline. To fix this, I added a quick review page in the admin panel where I can just input the number of layers to hide, stripping away those bottom color blocks. I'm honestly pretty proud of myself for using this little trick instead of overengineering some complex recognition algorithm.

Built with Svelte + Cloudflare.

出于对 LLM 生成 SVG 能力的好奇,我制作了这个 benchmark 项目。选用不同维度的宝可梦,让 LLM 通过 API 直接生成 SVG 数据,最后通过人工评估来排行。

前台和后台都是从零设计的,藉此也了解了测试集和评估的流程。很多细节上没想象的那么简单。

生成的数据本身也很有意思,所以我又做了个「Who's that Pokemon?」的小游戏。所有 SVG 显示为黑色剪影,让用户来猜本体是谁。由于生成的 SVG 结构不稳定,很容易出现大块实色背景从而遮住宝可梦轮廓。我在后台专门有个审查页面,负责输入隐藏的图层数,从而达到隐藏底部色块的目的。我很高兴我想到了这个小技巧而不是复杂的识别算法。

背后使用了 Svelte + Cloudflare.

loudspeaker