Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published1🌍 Public

Last edited Jan 5, 2022

Created on Jan 3, 2022

This example shows a plain yellow SVG face composed of a single circle, rendered at the center of a 960-by-500 canvas. It does not animate or display facial features; instead, it responds to mouse movement by logging the pointer’s client coordinates to the console. The visualization uses React 17 for component structure and the `onMouseMove` event handler, while D3 v7 is loaded but not used for rendering. The SVG circle is drawn with fixed `cx`, `cy`, and `r` attributes, and the page is set up with an HTML template and bundled JavaScript.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example uses React and d3.v7 to render a single yellow circle with a black stroke, positioned at the center of an SVG canvas. The circle’s radius is calculated from the canvas height minus half the stroke width, using hardcoded width and height constants. The code imports `arc` from d3 but does not use it, and the visualization is static—showing only the initial step toward a smiley face, with no eyes or mouth rendered.

VVishnu Sharma

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows an interactive SVG face that follows the mouse horizontally across a 960×500 canvas. A single circle, positioned at the center vertically, reacts to mouse movement by updating its x-coordinate in real time. Built with React’s `useState` hook and the D3 `arc` library, the app renders a minimal smiley-face precursor. The SVG’s `onMouseMove` handler triggers state updates, demonstrating a simple pattern for combining React’s declarative rendering with D3’s geometry utilities.

JJulia Hack

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple cartoon face using Scalable Vector Graphics (SVG) markup. It shows a large yellow circle for the head with a thick black stroke, and two smaller unfilled circles positioned as eyes on a 960 by 500 viewport. The visualization is built with plain HTML and CSS, using absolute pixel coordinates for each circle’s center and radius. JavaScript and React are not actively used in the rendering logic; the face is static and defined entirely within the `index.html` file.

Aavohland16

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a stylized cartoon face composed of a yellow circular background, two black eyes, and a curved mouth, rendered as SVG elements. The face is centered within a fixed 960 by 500 pixel viewport. The visualization demonstrates a modular React component structure, with separate components for the background circle, eyes, mouth, and a container that handles the SVG coordinate translation. The mouth is generated programmatically using a D3 arc generator, which calculates the path for a smile based on specified inner and outer radii.

Ggoduser1978

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle fills the center of an SVG canvas, rendered with React and ReactDOM, with a black outline created by the `stroke` and `stroke-width` attributes. The circle’s radius is set relative to the canvas height, and its position is fixed at the center. The `index.html` file loads the React libraries from unpkg and renders the component into a root div, with commented-out placeholder circles for additional facial features.

Vvikithareddy

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A face rendered as a yellow SVG circle on a black outline, with two fixed black eyes and a mouth drawn as a thick arc, is centered on a 960 by 500 canvas. The example demonstrates basic D3 shape construction in a React component, using the D3 `arc` function to create the smile and manual SVG `<circle>` elements for the face and eyes. The drawing is produced with declarative SVG attributes and D3’s arc path generator, showing how geometry can be composed in a browser-based visualization.

EElena Ionescu

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow SVG circle forms the face, with two smaller black circles as eyes positioned below the center line. The visualization demonstrates basic React usage by loading the React UMD production build via a script tag, then rendering static SVG elements directly in the HTML body. The code comments show the manual coordinate calculations for centering features relative to the face radius and stroke width, with dimensions fixed at 960 by 500 pixels. No interactive behavior or data binding is present, only the pure geometric layout of three circles.

Ttrashmail

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized face composed of geometric shapes is rendered in SVG. A yellow circle forms the head, with two black circles as eyes and a D3 arc function (`d3.arc`) generating a smile-shaped mouth path. The example is a React application using D3 v6 for the arc path generation, with SVG elements composed through reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`. The face’s features—eye offset, radius, mouth width, and stroke—are parameterized, and the final layout is centered at a calculated midpoint within a 960×500 viewport.

Uumgi

89% match