CSS Typeface—Neon
Interactive Code | 2017 | College Project


In this project, I designed an interactive typeface with only HTML and CSS. (There are no images.) I used HTML5 Canvas for the shapes. The Neon effects are created by jQuery and CSS.

I am using a keyboard as the input source. Pressing the keys on the keyboard is like turning on a light switch. On the first page of the website, there is a complete character set. Each letter is drawn with only one line to mimic the real neon signs. When you press “enter," it goes to the second page where there are neon signs made out of this typeface.

Here is the video demo.

Visit the website

Copyright © Yifeng Lou. All rights reserved.