Skip to main content
SimilarExport ZIP
100%

ミッキーマウス

✓ Published0🌍 Public
KKamen Yin
Last edited Nov 26, 2023
Created on Nov 11, 2023
Forked from HTML Starter

This visualization draws a stylized Mickey Mouse face using raw SVG elements within a React application. The code defines the character through circles for the ears and face, rectangles with rounded corners for the eyes, pupils, and nose, and a path to create the smile and tongue. The scene is rendered on a 1000x600 SVG canvas with fixed coordinates, and includes branded text elements like “仮面” and “ミッキーマウス” styled with white strokes and black fills. No external libraries are used; all shapes are specified directly via SVG markup in the JSX.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Micky

This visualization displays a stylized Mickey Mouse face constructed as a scalable SVG graphic. The face is built using React components that render geometric shapes, including circles, ellipses, and arcs, on a 900x500 canvas. The code relies on D3’s `arc` function to generate the mouth, nose, eyes, and ears, while React manages the SVG element tree. The design uses a warm peach face, black facial features, and red accents for the nose and cheeks, with all shapes positioned around the center of the viewport.

SSaiSree0122
83% match
Loading thumbnail…

Micky

This example renders a static SVG smiley face named Micky using React and D3.js. The face includes a head, eyes, nose, mouth, and ears, constructed with SVG primitives like circles, ellipses, and D3 arc generators. The code demonstrates DOM manipulation through React components while leveraging D3’s `arc()` API to define the mouth, nose, and ear shapes, with transformations applied to position them. The image is drawn at a fixed 900×500 canvas size, using a simple color palette and stroke widths, with no interactive or animated behavior.

HHARSHA BUDDANA
76% match
Loading thumbnail…

Mouse mors

A smiling face rendered as a responsive SVG fills the browser window, with a yellow circle for the head, black stroke outline, two black eyes, and a mouth implied by the circle’s boundary. The React component uses `window.innerWidth` and `window.innerHeight` to size the viewport, centering the face via a `<g>` transform. It relies on React 16.9 and ReactDOM to render SVG elements, with all geometry defined through JSX attributes like `cx`, `cy`, and `r`. The code contains no interactive or animated behavior.

Aaleoncavallo
74% match
Loading thumbnail…

Mouse face

A stylized mouse face is drawn as a simple SVG composition: a large yellow circle forms the head, two black circles serve as eyes, and a thick black stroke defines the outline. The example demonstrates drawing primitive shapes with React and D3.js v7, explicitly setting coordinates and radii as constants. It uses React’s `ReactDOM.render` to mount the SVG element and employs basic SVG `<circle>` elements without any data binding or dynamic behavior.

114Hazel
74% match
Loading thumbnail…

Bunny/Mouse Face by Josvin

This example shows a stylized bunny or mouse face built from basic SVG shapes, including circles for the head, eyes, and nose, lines for whiskers, a polygon for the mouth, and rotated ellipses for ears. Rendered dynamically with React, the visualization uses JSX elements within an `<svg>` container, with hard-coded coordinates and dimensions for each part. The appearance and layout are defined directly in the React component, which calculates positions based on the window size, and the code imports React and ReactDOM to mount the graphic to the DOM.

JJosvin John
73% match
Loading thumbnail…

Mouse Follower

A smiling face is rendered as an SVG in a React component, with eyes and a mouth positioned relative to the center of a 960 by 500 viewport. The code computes circle positions for the eyes and a path for the mouth arc, while a background circle provides the face’s outline. It uses React’s `ReactDOM.render` to mount the component and inline SVG elements, with no D3-specific APIs beyond the imported library. The example demonstrates a static, declarative visualization built entirely with React and SVG.

Pputhalalitha
72% match
Loading thumbnail…

mouse move

This example displays a smiley face with eyes and a mouth that react to mouse movement. The visualization uses React components to render SVG elements, with the face’s features positioned relative to the center. The code leverages D3’s `arc` API to draw the mouth shape, while the eyes and background circle are simple SVG circles. The face’s dimensions and offsets are passed as props, allowing the visual to respond dynamically to user interaction.

Ww.fukuyama@gmail.com
72% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization displays a colorful Mickey Mouse face constructed entirely with D3.js v5, using basic SVG shapes to form the character’s features. It shows the face, ears, eyes, nose, and hat as distinct geometric elements, with no underlying dataset—pure vector drawing. The code appends circles, ellipses, paths, and a rect to an SVG canvas, setting attributes like `cx`, `cy`, `r`, and `fill` directly. It uses D3’s selection and attribute methods to build the composition programmatically, relying on hardcoded coordinates for each shape to create the final playful portrait.

Ttrivikramcheluri@gmail.com
72% match