mad face

Face

A smiling face rendered as a simple SVG graphic, built with React components. The visualization displays a yellow circle with a black outline for the head, and two smaller black circles positioned as eyes. The code uses React and ReactDOM from UMD bundles to manage the rendering, while the SVG elements (circle tags) are written directly in the index.html file. The face is centered on a 960x500 canvas with fixed pixel coordinates, and the page is styled with a hidden overflow to remove scrollbars.

JJohanna Magdalena

Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as an SVG, with a large circular head, two small eyes, and a black outline. The face is drawn using basic SVG circle elements positioned relative to the center of a 960 by 500 viewport. The code uses React and ReactDOM to render the SVG structure, with hardcoded values for the head radius, eye offset, and stroke width. The visualization demonstrates how React can generate declarative SVG markup for straightforward geometric shapes.

Ttjcocucci

make a face

This example shows a smiley face built from SVG circles and an arc-shaped mouth, centered in a 960-by-500 viewport. The face uses yellow fill with a black stroke for the head, fixed eye positions, and a mouth drawn with D3’s `arc()` function. React renders the SVG elements, with geometry parameters like `eyeOffsetX` and `mouthRadius` computed from the canvas dimensions. The code mixes inline SVG markup in `index.html` with a separate React component that uses D3’s arc API for the mouth path.

CCD020102

smile face

The smile face example displays a simple yellow circle with two smaller black circles for eyes, rendered as static SVG shapes on a 960x500 canvas. It uses React 18.2.0 through a UMD script tag, though no React components are actually defined. The visualization is built entirely with raw SVG elements—a `<circle>` for the face and two `<circle>` elements for the eyes—each with explicit coordinates for positioning. The code loads React and logs ReactDOM to the console, but relies on pure markup without any dynamic behavior or data binding.

Yyankesswang

Make a face with React

A grid of 18 randomly varied smiley faces demonstrates reusable SVG components built with React and D3. Each face is composed of a yellow background circle, two black eyes, and a mouth arc rendered using d3.arc, with positions and sizes derived from randomized props like eyeOffsetX, eyeRadius, and mouthWidth. The Face component composes smaller subcomponents—BackGroundCircle, Eyes, and Mouth—inside a FaceContainer that handles SVG width, height, and center translation. D3's range function generates the array of faces, and ReactDOM renders the entire set into a single SVG via index.js.

AAlark Joshi

Make a Face 1

A yellow smiley face rendered with SVG circles fills the browser window, with its size and position calculated from the viewport dimensions. The face includes two eyes and a mouth, all defined using React components and JSX. The code uses React and ReactDOM to mount the visualization, computing the face radius from the window height and positioning elements relative to the center. The rendering relies on SVG circle elements with stroke styling for the face outline.

Ssumeyyeozel

faceMaker

A yellow face with a black outline and two eyes is rendered in SVG using React. The face is a circle centered on a 960x500 canvas, with a thick stroke and two smaller circles positioned symmetrically for the eyes. The code uses React and ReactDOM to render the static SVG directly in the browser, with all coordinates and dimensions defined as constants. The application is the HTML page itself.

Bben

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