Skip to main content
SimilarExport ZIP
100%

pacman

✓ Published0🌍 Public
Aadonisacruz0@gmail.com
Last edited Apr 17, 2024
Created on Apr 17, 2024
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG

This example showcases fundamental SVG shapes in a minimal React and CSS context. The visualization presents a green circle scaled up, a yellow rectangle with a black stroke translated downward on the canvas, and a set of black lines and a path with a rounded blue stroke. The code uses SVG elements like `circle`, `rect`, `line`, and `path` within an `svg` container, applying CSS classes and inline transformations for positioning and styling.

Eeman1718
75% 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
75% match
Loading thumbnail…

PRT6_Face_Part 4

A smiling face is drawn using SVG circles and an arc path, with a yellow head, black outline, two eyes, and a partial mouth. The visualization is built with React components and ES6, using D3's `arc` generator to create the mouth shape. The code positions elements around a center point and uses a `BackgroundCircle` component for the head. The rendered output is displayed via ReactDOM, with the SVG dimensions set to 960 by 500 pixels.

Ggujjapooja7@gmail.com
74% match
Loading thumbnail…

SVG DRAWING

This example shows a simple yellow circle with a black outline and a curved mouth shape, rendered as a static SVG drawing of a smiley face. The visualization is built with React 17 and D3 v6, using the `arc` generator from D3 to create the mouth path with specified inner and outer radii and angular ranges. The circle and mouth are positioned within an SVG element using a centered `<g>` transform, with the circle defined via JSX and the mouth path constructed through D3’s `arc()` API. The rendering is entirely SVG-based, with no interactive behavior or data input.

PPetr1618
74% match
Loading thumbnail…

helllo

This example displays a simple cartoon face made of three circles: a yellow head and two black eyes. Rendered as Scalable Vector Graphics (SVG) inside a React application, the face is centered on a 960 by 500 canvas. The code uses React 18 and ReactDOM to mount the component, with each circle positioned using fixed coordinates and stroke width. The head is filled with yellow and outlined in black, while the eyes use no fill.

PPaiMax
74% match
Loading thumbnail…

ppal copy

A smiling face composed of geometric SVG shapes is rendered using React and D3, with a yellow circular background, eyes, and a curved mouth drawn via D3's `arc` function. The face includes decorative orange polygons and a gradient-filled ellipse, all assembled within an SVG container using React components. Data is hardcoded; rendering uses SVG with D3 v7 and React 18.

Ssahildesignzz@gmail.com
73% match
Loading thumbnail…

SVG Fundamentals

This example shows a stylized cartoon face built entirely from SVG primitives, including a yellow circle for the head, two black eye circles, and a curved mouth generated with d3’s arc generator. The face is composed through reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which accept numeric props for positioning and sizing. The FaceContainer wraps all elements inside an SVG group that translates to the canvas center, while the mouth’s path is computed using d3.arc with specified inner and outer radii and angular ranges. The final rendering relies on React 18 and d3.v7, producing a static visualization without interaction or data binding.

SSerind Joshua McCue
73% match
Loading thumbnail…

React circle

This example visualizes a smiling face built from SVG primitives using React, with D3.js v7 providing the path generator for the mouth. The face consists of a large yellow circle with a black stroke, two black eyes positioned by computed offsets, and a curved mouth created through D3's `arc()` generator with specified inner and outer radii and start/end angles. All SVG elements are rendered declaratively through React's component model, with absolute coordinates calculated for centering and eye placement. The code demonstrates how D3's geometry utilities can be integrated into a React rendering pipeline without external data sources.

ZZaksen
73% match