Skip to main content
100%

CSS Pac-Man

✓ Published0🌍 Public
Aackuser
Last edited Feb 28, 2012
Created on Dec 14, 2021

A CSS-only Pac-Man character is rendered as a circular red disc with a triangular bite removed, created by a single `div` element styled with a 60-pixel red border, a transparent right border, and a `border-radius` of 50%. The example relies entirely on CSS borders and the `border-right-color` property to simulate the open mouth, with no JavaScript or external libraries involved. The HTML consists of one element with the ID `pacman`, and the styling is defined in a separate CSS file using the universal box model. The result is a static, two-dimensional shape that evokes the classic arcade sprite.

AI-generated description

Similar vizzes

Loading thumbnail…

pacman css3pattern

A CSS-only pattern generates a tiled Pac-Man maze background using stacked linear and radial gradients. The code defines repeating horizontal blue stripes, a white dot grid, and black geometric shapes that form the maze walls, with a yellow radial gradient creating Pac-Man’s body. Each element is positioned via pixel-based offsets and scaled using the background-size property, producing a seamless repeating tile. The effect relies entirely on gradient functions like `-webkit-linear-gradient` and `-webkit-radial-gradient`, with no images or external assets.

Aabernier
77% match
Loading thumbnail…

pacman

This example visualizes the classic Pac-Man character and dots using SVG shapes. It shows a yellow circle with a wedge-shaped mouth, created with a path, and a small black eye. Three yellow dots trail the character to the right. The code uses hand-coded SVG elements, including `circle` and `path`, combined with CSS for styling and a `transform` to flip the mouth shape. The static vector graphics are drawn directly in HTML.

Aadonisacruz0@gmail.com
77% match
Loading thumbnail…

INSTALL

PAC0SS is a playful demonstration of creating pie charts entirely with CSS, animated via JavaScript. It uses a Pac-Man-themed design to illustrate how a simple `<span>` element can be transformed into a dynamic pie chart by rotating two half-circle pseudo-elements. The example includes an interactive slider that lets users adjust the chart’s value from 0 to 360 degrees, with the pie updating live. Rendering is handled with SVG-based CSS transforms, and the code is structured for both client-side use with jQuery and server-side use via npm. The visualization showcases the versatility of CSS for data representation in a retro, game-inspired aesthetic.

Aabernier
72% match
Loading thumbnail…

Pacman Simulation

This interactive Pacman simulation presents a maze with blue walls, a yellow player circle, and collectible red and green fruit. The player controls Pacman by moving the mouse cursor within the maze’s boundaries. The simulation uses React to manage state and D3.js functions like `scaleOrdinal` for color mapping and `range` to generate game points. SVG elements render the maze, Pacman, and fruits, with mouse events triggering point collection and hiding consumed items.

FFelipe Mejías
70% match
Loading thumbnail…

Polka dot

A single web page uses only CSS to create a repeating polka-dot pattern across a maroon background. The page defines a radial-gradient with two layered positions, setting tan circular dots at 20% size with transparent surroundings, tiled at a 30-pixel grid and offset by 15 pixels to form the staggered dot matrix. No JavaScript runs beyond a commented-out alert, and no external data is loaded, so the visualization is purely a static CSS background experiment from a Gist. The split view shows the CSS source alongside a live preview, with the HTML body left empty.

335degrees
64% match
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a simple SVG fruit bowl: a purple translucent circle containing an orange circle labeled “Orange,” plus yellow and green circles. The visualization uses inline SVG elements—`<circle>` and `<text>`—positioned and styled directly in the markup, with CSS controlling global text alignment and font size. It demonstrates a bare-bones setup without any JavaScript libraries, relying solely on static SVG rendering for its geometric composition.

Ddanielstaal
61% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling through a simple circular element. The visualization shows a single red circle positioned within a 960x500 pixel SVG canvas, with the page configured to remove default margins and hide overflow. The code uses the standard SVG `<circle>` element with explicit `cx`, `cy` (represented as `r` in the code), and `r` attributes, while linking an external stylesheet to control the body presentation. The rendering approach is purely static SVG with no JavaScript or data source, serving as a minimal demonstration of vector graphics primitives and stylesheet integration.

Mmusevvid
61% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling through a simple circular element. The visualization shows a single red circle positioned within a 960x500 pixel SVG canvas, with the page configured to remove default margins and hide overflow. The code uses the standard SVG `<circle>` element with explicit `cx`, `cy` (represented as `r` in the code), and `r` attributes, while linking an external stylesheet to control the body presentation. The rendering approach is purely static SVG with no JavaScript or data source, serving as a minimal demonstration of vector graphics primitives and stylesheet integration.

Mmusevvid
61% match