Skip to main content
SimilarExport ZIP
100%

Making a Smiley Face with React

✓ Published2🌍 Public
Jjjacobatandover
Last edited Jul 4, 2021
Created on Jul 3, 2021

This example shows a smiley face rendered as a scalable vector graphic using React. The face consists of a yellow head and two black eyes, with geometric properties such as center coordinates, offsets, and radius defined as JavaScript constants in JSX. The code uses React 17 and ReactDOM to mount the component into the DOM, while SVG circles handle the drawing. The approach demonstrates how JSX enables dynamic math-based positioning instead of hardcoded attributes.

AI-generated description

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

See also React Starter.

Half way towards a smiley face -- we used CSS to make the margins and the colors. We used SVG to make the circles. Feeling frustrated that we couldn't use math to define the DOM structure and use JSX to write HTML in JS and math from JS

MIT Licensed

Similar vizzes

Loading thumbnail…

Creating a smiley face (with React)

This example renders a smiley face as a static SVG graphic using React and ReactDOM. The code defines constants for dimensions, eye offsets, and radius, then composes three `<circle>` elements—one large yellow face with a black stroke, and two smaller black circles for eyes—within an SVG canvas. It uses React's JSX syntax to declare the SVG markup and ReactDOM's `render` method to inject the component into the page's `root` element. The face is drawn from computed center coordinates, with no interactive or animated behavior.

NNarottam Medhora
93% match
Loading thumbnail…

Lets Make Smiley Face Part II

This example shows a smiley face drawn as a scalable SVG graphic using React. The face consists of a yellow circle for the head, two black circles for eyes, and a placeholder for a mouth, all positioned dynamically relative to the window size. The code uses React's `ReactDOM.render` to mount the component, and computes geometric values like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius` to place elements. Rendering relies on SVG primitives within a `<g>` transform, with the head radius set to `centerY - strokeWidth / 2` to fit the viewport.

CClemarjon Laguardia
92% match
Loading thumbnail…

Smilie Face with React

This example renders a yellow smiley face as an SVG graphic using React. It draws three circles—a large yellow face and two smaller black eyes—with explicit pixel dimensions for width, height, and stroke widths. The code creates a React component that returns JSX, using the `React` and `ReactDOM` libraries to mount the visualization into the DOM. All coordinates and radii are predefined constants, resulting in a static, purely declarative chart.

Vvishnubpg
91% match
Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable vector graphic, with two black eyes and a circular head, all drawn using React and ReactDOM to create SVG elements. The code calculates the head radius, eye positions, and offsets based on the current browser window dimensions, centering the face dynamically. It uses React’s declarative JSX syntax to instantiate the SVG circles, relying on the react and react-dom production libraries to mount the visualization into the page’s root div. The face is static, presenting a simple geometric composition without animation or interaction.

SSam
91% match
Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn as an SVG, centered on a 960 by 500 canvas. The example uses React to declaratively render three circles: a large yellow face with a black stroke for the outline, and two smaller black circles for the eyes. The React component defines the SVG elements with explicit coordinates and dimensions, including the face radius, eye offsets, and eye radius. This demonstrates a minimal, code-driven approach to creating a simple vector graphic with a functional React component and `ReactDOM.render`.

GGueen Li
91% match
Loading thumbnail…

Smiley Face

A React application renders a simplified smiley face as a static SVG graphic. The face consists of a yellow circle with a black border, positioned at the center of a 960×500 viewport, and two smaller black circles representing eyes. Coordinates for the face and eyes are computed from width, height, and offset constants rather than loaded data. React 17 uses `ReactDOM.render` to mount the SVG elements defined in JSX, with styling applied directly through SVG presentation attributes.

Hhappylilem
91% match
Loading thumbnail…

SmileyReact

A yellow smiley face rendered as scalable vector graphics appears centered in an SVG canvas, with two black circular eyes positioned symmetrically on either side. The example demonstrates React’s component-based rendering, using the React and ReactDOM production builds to mount an `App` component that declaratively defines three `<circle>` elements. The face’s dimensions, offsets, and stroke widths are set as JavaScript constants, and the SVG output is embedded directly in the DOM via `ReactDOM.render`. No interaction or animation is implemented.

Oo-n-e
91% match
Loading thumbnail…

Smiley Face

A yellow smiley face rendered as a React SVG component scales to fill the browser window. The code defines circle elements for the head, eyes, and mouth using fixed offsets and radii, with the face centered via a transform. ReactDOM renders the SVG tree to the page, using hard-coded numeric values instead of external data. The example demonstrates declarative SVG composition within React’s rendering pipeline.

OOleJRask
90% match