CSS Art & Video Generator

July 9, 2021 · View on GitHub

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

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