HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS.

  • By Diana Smith
  • Last update: Dec 28, 2022
  • Comments: 5

Pure CSS Francine

An ongoing series in which I create art using only CSS and HTML.

Rules I have for myself:

  1. All elements must be typed out by hand
  2. Only Atom text editor and Chrome Developer Tools allowed.
  3. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor. (Note: at one point I was using one or two SVG elements but I eventually grew tired of them and they've since been deleted, so this rule no longer applies. No offense to SVG.)

Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

alt text



  • 1


    I'm curious what the story is behind the tree which exists in HTML, but not in CSS. Looks like it was added in this commit:

  • 2

    Please add 5 more lines to index.html

    This would bring the total lines form 1,332 up to 1337 which would add a nice Easter egg showing how 'leet this project is! Congratulations on an accomplished work of art!

  • 3

    Script to take historic png screenshots of Francine

    👋 @cyanharlow

    I was curious to see the evolution of Francine over time. For that reason, I hacked (in the strict sense) a ruby script that walks the git history and takes a screenshot of Francine at that point in time. Each screenshot is saved to screenshots/$INDEX_$SHA.png file, where $INDEX is the position of the change in the history in chronological order.


    Provided that you are running on a Mac with homebrew installed, brew bundle && ./generate_screenshots should be all you need to do. Note the first time the script runs, it will take a bit longer if you don't have the required dependencies installed.

    These PR might or might not make sense to be merged into master, but in case you want to take a look at the script, here it is.

    I ❤️your work! Thank you!

  • 4

    Works fine in Firefox and Safari

    In your README you say it only works in Chrome. Well, it works identically in Firefox, Safari, and even MS Edge. Since you're mostly using CSS transforms, border radius and gradients, all modern browsers handle these identically. IE on the other hand is a different story. But it is a discontinued browser. Edge is evergreen like other modern browsers. Please update your README to reflex that other modern browsers can indeed render your work as expected.

  • 5

    [ImgBot] Optimize images

    *Total -- 696.93kb -> 638.03kb (8.45%)

    /preview.jpg -- 434.10kb -> 386.91kb (10.87%) /francine-prev-thumb.jpg -- 200.01kb -> 190.08kb (4.96%) /thumb.jpg -- 62.83kb -> 61.03kb (2.85%)

    Signed-off-by: ImgBotApp [email protected]