Animated customizable 3D HTML & CSS face illustration using grid, variables, blur, border radius, nth child, box shadows. No SVG, PNG, JPG.
https://vuild.com/face Details
https://vuild.com/code-face Post
https://vuild.com/css-face/ Code
https://vuild.com/bloopers Bloopers
V1. Best viewed in Safari. Or IE (😭).
Top comments (7)
What can be accomplished with a language that is as misunderstood as CSS blows my mind. Amazing work.
I would love to know how long this took you.
I saw the iterations (bloopers) and each one, albeit funny, still conveys the amount of time you put into this.
Curious if you have taken a peak at this diana-adrianne.com/purecss-francine/ ? Sorry it's not in markdown, I'm on my phone and will edit later 😁
Thanks. It didn't take that long (low xx hrs maybe) because it is just an iteration of
vuild.com/july-4 (same egg shape even).
vuild.com/batman/
vuild.com/history-css-art more info
vuild.com/game-watch/ was the one that took me ages (resize).
Francine is very impressive. I think the current 'standard' is this:
twitter.com/ivorjetski/status/1139...
from @ivorjetski who spends months. Look at the detail.
I am not really making art, I am browser testing mostly so the techniques/outcomes are different. Diana & Ben are making art.
Oh & the bloopers? They're fake mostly. Based on people I know...of.
🤣
Haha! I especially ❤️ the bloopers.
Thank you. The misfits are the best part, you should see IE. 😃
Very cool! I was just thinking of animating mine! Looks like you beat me too it!
Thanks.
I had to. Once yours was done my faces are a waste of time. When I made the first one in 2012 I imagined someone else making a realistic one, not me. You fully pulled it off. I was laughing hard when I saw you tackling mouth-teeth-hair. 😭