A small SVG cat that walks back and forth across any container. Click the cat and it meows. The simplest way to add a sign of life to a personal site, portfolio, or 404 page.
↑ click the cat as it walks past
Personal sites, portfolios, 404 pages, footer corners, "about me" sections — anywhere you'd otherwise leave dead space. The cat is ambient life: visitors notice but don't have to interact, which is what good easter eggs do.
The SVG cat lives in one element. Wrap it in a .cat-stage container that you can put anywhere.
<div class="cat-track"> <!-- positioned container --> <div class="cat-stage"> <div class="meow">meow ♡</div> <svg class="cat-svg" width="60" height="40" viewBox="0 0 60 40"> <ellipse cx="22" cy="25" rx="16" ry="9" fill="currentColor"/> <circle cx="40" cy="20" r="9" fill="currentColor"/> <!-- (ears, eye, whiskers, legs — see full demo) --> </svg> </div> </div>
One keyframe walks the cat across, then flips it (scaleX(-1)) and walks it back. Use color to set the fur color.
.cat-track { position: relative; height: 180px; overflow: hidden; } .cat-stage { position: absolute; bottom: 14px; left: 0; cursor: pointer; color: #52ffe0; /* fur color via currentColor */ animation: cat-walk 18s linear infinite; } .cat-svg { animation: cat-bob .35s steps(2) infinite; } @keyframes cat-walk { 0% { left: -80px; transform: scaleX(1); } 48% { left: 100%; transform: scaleX(1); } 49% { left: 100%; transform: scaleX(-1); } /* turn around */ 97% { left: -80px; transform: scaleX(-1); } 100%{ left: -80px; transform: scaleX(1); } } @keyframes cat-bob { 50% { transform: translateY(-2px); } } .meow { position: absolute; left: 50%; top: -32px; transform: translateX(-50%); background: #f3eedd; color: #081310; font-family: 'Caveat', cursive; font-size: 18px; padding: 4px 14px; border-radius: 14px; opacity: 0; transition: opacity .2s; } .cat-stage.meowing .meow { opacity: 1; }
Just one click handler to show the meow bubble. Cat walks via CSS — no JS needed for movement.
// Swamp UI — Cat Wanderer (click → meow) document.querySelectorAll('.cat-stage').forEach(cat => { cat.addEventListener('click', () => { cat.classList.add('meowing'); setTimeout(() => cat.classList.remove('meowing'), 900); }); });