CSS Art & Video Generator

Converts images and video frames to pure CSS + HTML files using Breadth-first Search and Canny Edge Detection with keyframe animations.

See It Live*

https://kevinjycui.github.io/css-video/

*Image examples only (see video examples by cloning the repository)

Tested on

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Brave

Tutorial

Install dependencies

$ apt update
$ apt install git python3-dev python3-pip ffmpeg

Clone repository

$ git clone https://github.com/kevinjycui/css-video.git
$ cd css-video

Install requirements

$ python -m venv env
$ . env/bin/activate
(env) $ pip install -r requirements.txt

Add an image file (PNG or JPG) or convert a video file into frames using FFmpeg (note frames should be named frame%d.png in which %d represents an index starting from 0)

Example: Converting a video named input.mp4 into frames into a directory named frames (with 20 FPS)

(env) $ mkdir frames
(env) $ ffmpeg -i input.mp4 -vf fps=20 frames/frame%d.png

Run the converter

Image

(env) $ python3 generator.py -i input.png

Video

(env) $ python3 generator.py -f frames/

References

• YouTube: The Art of Pure CSS
• YouTube: Bad Apple!! played with pure CSS in high quality
• Niconico: CSS だけで高画質の【Bad Apple!!】を再生してみた
• Bilibili: 使用纯CSS来播放【Bad Apple!!】