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
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
frame%d.png
in which %d
represents an index starting from 0)
Add an image file (PNG or JPG) or convert a video file into frames using FFmpeg (note frames should be named 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/