New Hanzi

An interactive web-poem told through newly invented Chinese characters and emotional internet states.

Tools: HTML, CSS, JavaScript, SVG, Make Me a Hanzi dataset

Link: https://newhanzi.netlify.app/

About the Work:

New Hanzi is a web-based interactive concrete poetry project exploring the rituals and emotional states of the modern online life. Using Chinese radical structure as a poetic system, the project creates new glyphs that represent internet behaviors like doomscrolling, ghosting, and AI entanglement.

Each scene acts as a visual-poetic chapter. Characters respond to scrolling, typing, clicking, and hovering. The user uncovers meaning by interacting with symbols like ⿰扌屏 (using a phone) or ⿱心灬 (emotional burnout).

I started this project because I was thinking about how new Chinese characters aren’t really being created anymore. The characters we use today mostly come from centuries ago—which isn’t necessarily a bad thing—but I thought it would be fun to generate new ones that more precisely reflect the way we live now, especially in the age of technology.

Chinese characters are a very precise and compact form of language—one character can hold so many meanings. When they were first invented, many of them were pictographs that visually represented the things they described. I wanted to return to that spirit and create characters that represent modern behaviors like scrolling, staring at a screen, or being ghosted—things that define our digital lives but aren’t written into the language yet.

The New Hanzi:

⿰扌屏 "Using a phone" — hand + screen
⿰目光 "Staring at screen" — eye + light
⿱知网 "AI / Internet mind" — knowledge over net
⿰扌言 "Typing/texting" — hand + speech
⿰亻网 "Internet Friends" — people + net
⻌亻网 "Being ghosted" — walk + people + net
⿱心灬 "Burnout" — heart over flame

The Interactive Web Poem:

The user begins with a single character. Clicking leads them deeper into a nonlinear poetic world:

index.html — ⿰扌屏(using a phone) the entry point


staring.html — grid of 目(eye) and 光(light) rotating and fading
ai-network.html — ⿱知网(AI or internet) networked to 人(human) via threads


typing.html — ⿰扌言(texting/typing) drops endlessly as user types
ghosting.html — internet friends to the internet ghosting friend

doomscrolling.html — spiraling character (doomscrolling)

burnout.html — crying glyphs wiped by user interaction

Technical Overview:

This project uses stroke-level SVG data from the open-source dataset Make Me a Hanzi to visually construct new Chinese characters. Each character (e.g. 目, 光, 扌) has a corresponding .json file containing its stroke paths.

These strokes are rendered in the browser using SVG. I load each character's data with JavaScript fetch(), loop through the stroke paths, and draw them using <path> elements. By appending "Z" to each path and applying fill="#111", I ensure the strokes are closed and visually solid.

To create new glyphs, such as ⿰扌屏, I position radicals manually using <g> tags and transform: translate(...). This allows fine control over spacing, scaling, and alignment. Combined glyphs are scaled to fit the layout and styled as visual poetry.