PawCSS - Your Dog, Rebuilt with Real CSS Elements
Hackathon prompt: Build something for, about, or inspired by dogs. International Dog Day is August 26. I decided to answer the prompt with a question: What if your dog wasn't a photo — but a physical piece of CSS? 🐾 Meet PawCSS PawCSS turns any dog photo into a living CSS artwork. Upload a picture, and the app reads every pixel, quantizes the colors, then renders the image again as thousands of…
PawCSS transforms photographs of dogs into intricate CSS artworks. When users upload a dog photo, the app analyzes every pixel and converts it into individual HTML elements styled with CSS. There are no filters, canvas tricks, or hidden image tags; the final result is a grid of DOM nodes. The app offers six CSS reconstruction modes, each with a distinct visual style.
Users can adjust the resolution, switch between styles, and compare the original photo with the CSS reconstruction using a before/after slider. The project integrates with Google AI to generate a playful personality profile for the dog, including an invented name, likely breed, energy and cuddle levels, a one-line description, and a funny dog thought.
This integration is optional and can be swapped for an alternative voice service without altering the core functionality. PawCSS is built using TanStack Start, React, and Tailwind CSS, with image processing handled separately for easy testing and reuse. The project aims to celebrate dogs and demonstrate the creative potential of the open web.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
