# pattle/simpsons-in-css

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/pattle-simpsons-in-css).**

4,591 stars · 626 forks · CSS

## Links

- GitHub: https://github.com/pattle/simpsons-in-css
- awesome-repositories: https://awesome-repositories.com/repository/pattle-simpsons-in-css.md

## Description

This project is a CSS art gallery and front end design experiment consisting of character portraits rendered entirely with HTML and CSS. It functions as a collection of pure CSS illustrations and vector art, creating detailed digital drawings without the use of external image files, SVG, or Canvas.

The project employs a variety of technical methods to achieve these visuals, including box-shadow pixel art to simulate individual pixels and layered HTML elements with absolute positioning to construct vector-style graphics. It utilizes a nested component hierarchy and a relative coordinate system to maintain proportions across different scales.

The implementation covers a range of CSS capabilities such as shape composition through border-radius and clipping, as well as a theming system using CSS variables to centralize color palettes for consistent rendering.

## Tags

### Graphics & Multimedia

- [Pure CSS Illustrations](https://awesome-repositories.com/f/graphics-multimedia/pure-css-illustrations.md) — Creates detailed character portraits rendered entirely with HTML and CSS without using any external image files.
- [CSS-Only Artworks](https://awesome-repositories.com/f/graphics-multimedia/css-only-artworks.md) — Presents a collection of digital artworks rendered entirely through HTML and CSS.
- [CSS Vector Art](https://awesome-repositories.com/f/graphics-multimedia/generative-art-toolkits/css-based-generative-art/css-vector-art.md) — Constructs detailed visual graphics using layered HTML elements and CSS shapes with absolute positioning.
- [CSS Vector Graphics](https://awesome-repositories.com/f/graphics-multimedia/vector-shape-construction/css-vector-graphics.md) — Constructs detailed vector-style art using layered HTML elements and absolute positioning to maintain proportions.
- [Stylesheet-Based Graphics](https://awesome-repositories.com/f/graphics-multimedia/stylesheet-based-graphics.md) — Designs visual assets with stylesheets to reduce external asset loading and improve page performance.

### User Interface & Experience

- [CSS Art Collections](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/css-art-collections.md) — Provides a curated gallery of character portraits rendered entirely with HTML and CSS.
- [CSS Portraiture](https://awesome-repositories.com/f/user-interface-experience/character-encoding-support/chinese-character-support/customizable-character-models/generative-character-consistency/stylized-portrait-generation/css-portraiture.md) — Draws detailed fictional character portraits using only HTML and CSS to avoid external image dependencies. ([source](https://github.com/pattle/simpsons-in-css/blob/master/krusty.html))
- [Portraiture](https://awesome-repositories.com/f/user-interface-experience/html-and-css-rendering-engines/portraiture.md) — Implements detailed character portraits constructed entirely from nested HTML elements and CSS styling.
- [Box-Shadow Renderers](https://awesome-repositories.com/f/user-interface-experience/pixel-art-css-toolkits/box-shadow-renderers.md) — Uses the box-shadow property to render detailed pixel art by mapping individual pixels to shadow offsets.
- [Absolute Positioned Layering](https://awesome-repositories.com/f/user-interface-experience/absolute-positioned-layering.md) — Implements a layering strategy using absolute positioning to stack HTML elements for detailed character construction.
- [CSS Design Experiments](https://awesome-repositories.com/f/user-interface-experience/css-design-experiments.md) — Explores the technical limits of CSS positioning and shapes to render complex graphics without SVG or Canvas.
- [CSS Property Experiments](https://awesome-repositories.com/f/user-interface-experience/css-property-experiments.md) — Serves as a technical exploration of the limits of CSS positioning and properties for rendering complex imagery.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Employs a theming system based on CSS variables to manage colors across different character elements.
- [Percentage-Based Positioning](https://awesome-repositories.com/f/user-interface-experience/element-positioning/absolute-positioning/percentage-based-positioning.md) — Uses percentage-based offsets to place visual elements, ensuring proportions are maintained across different viewing scales.
- [Nested Component Hierarchies](https://awesome-repositories.com/f/user-interface-experience/nested-component-hierarchies.md) — Organizes character anatomy into a nested hierarchy of div elements to manage relative positioning and layering.
- [Color Palettes](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palettes.md) — Utilizes CSS custom properties to establish a centralized color palette for consistent skin tones and clothing.