Skip to main content
SimilarExport ZIP
100%

Fork of second phase: Making face part II

✓ Published1🌍 Public
Aadewole-top
Last edited Jun 25, 2021
Created on Jun 22, 2021

This example visualizes a stylized face using React and SVG, displaying a yellow circular head with two symmetrical eyes positioned relative to the center. The code defines constants for dimensions, offsets, and radii, then renders the shapes using SVG `<circle>` elements. It relies on React and ReactDOM to mount the component into the DOM, with the SVG output styled by minimal CSS that removes margins and hides overflow. The drawing is entirely procedural, with no external data source.

AI-generated description

A bare minimum html, css, svg with react HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of second phase: Making face part IV with D3

This example shows a stylized face built from SVG primitives, rendered through React's declarative component model. A yellow background circle with a black stroke holds two eye circles and a mouth arc, all positioned relative to a central transform. The code uses d3.arc to compute the mouth path, while React handles the component structure and D3 v7 provides the arc generator. The face is centered using D3’s coordinate translation, with dimensions and offsets defined as constants.

Aadewole-top
91% match
Loading thumbnail…

Fork of Part 1 making Face

A yellow face rendered as SVG circles uses React 17 to compose static shape elements. Two smaller black circles form eyes, while a larger yellow circle defines the head outline. The code displays a simple geometric portrait without animation or interaction. React is loaded via UMD production build, and all drawing occurs declaratively through JSX-like syntax inside the HTML document. The rendering approach uses plain SVG markup within the React root, demonstrating basic circular primitives for facial features.

PPedram
89% match
Loading thumbnail…

Fork of Fork of second phase: Making face part V with D3

This example shows a yellow smiley face built entirely from reusable React components: a circular background, two eyes positioned symmetrically, and an arc-shaped mouth. The visualization is rendered as SVG with D3’s `arc` generator handling the mouth’s curved path. React’s component structure and props (like `eyeOffsetX` and `mouthRadius`) make the face adjustable, while the D3 v7 library provides the arc geometry. The code runs in a plain HTML page using React 17 and D3, with all elements centered via an SVG transform.

Aadewole-top
88% match
Loading thumbnail…

second phase: Making face part I

This example displays a simple cartoon face made of three SVG circles: a large yellow circle for the head and two smaller circles for the eyes, all rendered directly within the page’s markup. The work demonstrates hand-coded SVG primitives styled with presentation attributes like `cx`, `cy`, `r`, `stroke`, and `fill`. The entire visualization is static, relying on inline SVG in the HTML body without any JavaScript or external libraries, making it a pure structural illustration of the SVG coordinate system and shape styling.

Aadewole-top
88% match
Loading thumbnail…

Fork of Let's Make a Face Part II (React)

This example shows a simple cartoon face composed of a yellow circle head with two eyes, rendered to fill the browser window. The face is drawn as SVG elements created through React components, with positions calculated from the window dimensions. The code uses React and ReactDOM to render the SVG, with circle elements for the head, eyes, and a mouth that is commented out in the HTML. The face is centered using a translation transform, and sizes adjust based on window height.

DDeaxNG
87% match
Loading thumbnail…

Fork of Let's Make a Face Part II

A fork of the "Let's Make a Face Part II" example renders a simple smiley face using React and SVG. The visualization displays a yellow circle with black stroke for the head, plus two black circles as eyes, positioned symmetrically around the center via computed offsets. Built with React 18 and ReactDOM, it uses JSX to declaratively define SVG circle elements, with all dimensions and positions derived from constant variables for width, height, and eye placement.

PPakapone Supavarn
87% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a single yellow circle with a black outline, positioned in the center of the browser window, with two smaller black circles for eyes. The face is incomplete, showing only the head and eyes, with no mouth or other features rendered. The visualization is built using React and ReactDOM, rendering SVG elements directly to the page, with dimensions derived from the window’s inner width and height. The code defines constants for eye offset, radius, and stroke width to position the shapes.

JJsimluken
87% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline forms the face, centered within an SVG canvas. Two smaller, unfilled circles represent the eyes, positioned symmetrically to the left and right of the face's center and above its vertical midpoint. The code uses React and ReactDOM to render the SVG elements, with dimensions and positions defined by JavaScript variables for width, height, center coordinates, stroke width, eye offset, and eye radius. The rendering approach is purely SVG, with no external data source.

BBhabesh
87% match