Bunny/Mouse Face by Josvin

100%

Bunny/Mouse Face by Josvin

✓ Published0🌍 Public

Last edited Sep 2, 2020

Created on Sep 2, 2020

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.

AI-generated description

Bunny/Mouse Face implementation with React.

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

Follow mouse position

A smiling face is rendered as a static SVG graphic, centered within the browser window. The example demonstrates how to build a reusable React component using JSX to represent SVG elements like circles for the face, eyes, and mouth. It relies on React and ReactDOM to mount the component, with dimensions and positions derived from `window.innerWidth` and `window.innerHeight`. The visualization is purely presentational, with no interactive behavior or data binding.

MMateusz Urban

80% 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

80% match

Loading thumbnail…

Let's make a face!

A playful SVG face is constructed from a collection of circles for eyes and a mouth, with interactive positioning of facial features. The example uses React to render the SVG elements and demonstrates a simple component-based approach to data visualization, where user input can adjust the face's expression. The code relies on React's state management to update the visual elements dynamically. The rendering is done directly to the SVG canvas, with styling applied through an external CSS file.

PPhilippe Bonnet Doring

79% match

Loading thumbnail…

mouse events part 1

A smiling face is rendered as an SVG using React components for the background circle, eyes, and mouth. The face is composed of simple geometric shapes, with the mouth drawn using a D3 arc generator. The example demonstrates a static composition, with no interactive mouse events implemented despite the title. The code uses React to structure the SVG elements and D3's `arc()` function to define the mouth path, with a fixed viewport size of 960 by 500 pixels.

EEkuremaro

79% match

Loading thumbnail…

Mouse follower

A smiling cartoon face renders in SVG using React components for the background circle, eyes, and mouth, all positioned within a transformed group. As the mouse moves over the svg element, a separate filled circle follows the cursor’s client coordinates. The face itself integrates D3’s `arc()` generator for the mouth shape and static eye offsets, while React’s `useState` and `onMouseMove` handler update the follower circle’s position.

JJasmyne Okudo

78% match

Loading thumbnail…

Mouse Follower

A simple SVG face, rendered with React, tracks nothing; it is a static smiling face centered in a yellow circle. The code uses the `arc` helper from `d3-shape` to define the mouth’s path, and React components construct the SVG elements, including two eyes and a stroke-bordered head. The face is positioned using a group element with a `transform` translation, and ES6 template literals set the coordinate values. The example highlights how D3’s geometry utilities can be combined with React for declarative SVG drawing.

VVictor Abrokwah

78% match

Loading thumbnail…

Smiley face

This example shows a stylized portrait of a face rendered with SVG primitives, constructed from basic geometric shapes like circles, rectangles, and polygons to form features such as eyes, eyebrows, a nose, a mouth, and hair. The code uses React to compose the SVG elements and leverages the `arc` function from the d3 library to generate the curved path for the mouth. The layout is dynamically calculated based on the browser window's dimensions, positioning the face at the center of the viewport. All visual elements are defined with inline attributes for size, color, and position, creating a cohesive, cartoon-like illustration.

Hhappymail6

78% match