Techniques
Horror Vacui Background Fill
A repeating pattern of crude, hand-drawn marks (eyes, spirals, short parallel lines) tiled as a background texture, evoking the all-over patterning of Wölfli's manuscripts. Implemented as a subtle SVG pattern on the page body.
.element {
background-color: #5C4033;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='6' fill='none' stroke='%23722F37' stroke-width='1.5' opacity='0.25'/%3E%3Cline x1='8' y1='8' x2='14' y2='8' stroke='%23722F37' stroke-width='1' opacity='0.2'/%3E%3Cline x1='28' y1='32' x2='34' y2='32' stroke='%23722F37' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
background-size: 40px 40px;
}
Hand-Drawn Border Frame
A thick, slightly uneven border that mimics the crude framing Dubuffet and Wölfli drew around their compositions. Uses box-shadow stacking to create an imperfect double-rule effect.
.element {
border: 3px solid #EFE7D2;
box-shadow:
2px 2px 0 #1C1C1C,
inset 0 0 0 4px #5C4033,
inset 0 0 0 6px #EFE7D2;
background: #1C1C1C;
}
Crude Stamp Hover
A hover interaction that shifts the element like a woodcut stamp being pressed — hard offset shadow grows, element translates slightly, simulating physical pressure. No blur, no smooth spring.
.element {
box-shadow: 2px 2px 0 rgba(28,28,28,0.6);
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.element:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 rgba(28,28,28,0.7);
}