Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
JJon Brundage Jr.
Last edited Oct 3, 2021
Created on Sep 30, 2021

This example shows a static smiley face rendered as a yellow circle with a black outline. It demonstrates fundamental DOM manipulation by using React to create an SVG element. The code defines a simple React component that returns an SVG circle, specifying its center coordinates, radius, fill color, and stroke properties. It uses React 16.9 and ReactDOM to render the component into the HTML document, while the SVG viewport is set to 960 by 500 pixels. No interactive behavior is present in this version.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as a yellow circle with two black eyes, created using React and SVG elements. The code defines circle components with explicit attributes for positioning, radius, fill, and stroke, a minimal approach before adding the mouth in later parts. It uses React’s `ReactDOM.render` to mount the SVG into the page, with the face centered on a fixed 960×500 canvas. The visualization demonstrates basic SVG composition within a React component structure.

CCryton Sibanda
91% match
Loading thumbnail…

Smiley Face Part I

This example displays a single yellow circle with a black outline centered in an SVG canvas, forming the base for a smiley face. The React component renders the circle using SVG primitives, with hardcoded attributes for position, radius, and stroke. ReactDOM mounts the component to the root div, while the page loads React and ReactDOM from CDN links. The visualization demonstrates fundamental SVG shape rendering within a React framework, with the circle dimensions computed relative to the image height and stroke width as noted in the HTML comments.

Rrayking99
90% match
Loading thumbnail…

Smiley Face Part I

A static yellow circle with a black outline renders as a smiley face on an SVG canvas. The example demonstrates embedding React components within an SVG element, using React 16.13.1 and ReactDOM to mount a simple application. The circle is hardcoded with fixed coordinates and dimensions, while the React component renders only a "Hello React!" message, showing the separation between the SVG drawing and the React-managed DOM. The page includes minimal styling to remove margins and hide overflow.

SShiya
90% match
Loading thumbnail…

Smiley face

A simple SVG smiley face rendered with React and ReactDOM renders a yellow circle with a black stroke and two smaller black circles for eyes in a 960 by 500 viewport. The static composition is defined directly in the HTML markup, while React’s JavaScript library is loaded but unused for drawing the shapes. The example demonstrates basic SVG circle elements with explicit x, y, and radius attributes to construct a minimal, non-interactive illustration.

Bbrendakoo
90% match
Loading thumbnail…

Untitled

This example renders a smiley face using React and SVG, with a yellow circular background, two eyes, and a mouth drawn as an arc. The visualization uses static, hardcoded dimensions for the face components, including eye offsets, eye radius, and mouth radius, rather than data-driven values. It employs the `arc` function from d3 to generate the mouth path, while React components structure the SVG elements. The `BackgroundCircle` component accepts radius and stroke width props, demonstrating a modular approach to building the graphic within a fixed 960×500 viewport.

33jay1
90% match
Loading thumbnail…

smileyface part1

A static yellow smiley face rendered as SVG elements in React, showing a circular head with two empty eye circles. The example demonstrates basic React component structure and SVG coordinate positioning, with hardcoded values for center, radius, and stroke properties. It uses ReactDOM to render a functional component into the DOM, building the face from primitives like the `circle` element without any interactive or animated behavior. The code includes commented-out alternative markup in the HTML file, while the active React version renders the same three circles at fixed positions.

HHansengineer
90% match
Loading thumbnail…

Untitled

This example shows a simple smiley face constructed from basic geometric shapes, including two circles for eyes, a larger circle for the face, and a line for the mouth, all rendered as static SVG elements. The code uses plain HTML and CSS within an inline SVG, with JavaScript not actually utilized despite the page’s setup, and the React framework is not applied in the visible markup. The SVG is drawn directly in the `index.html` file with hardcoded coordinates and styling.

Aazeemkh
90% match
Loading thumbnail…

Smily face

A single yellow circle with a black outline renders as a simplified smiley face on a blank canvas. The example demonstrates how to draw basic SVG shapes using React, creating a static vector graphic with a fixed 960x500 viewport. The code imports React and ReactDOM from the React 17 UMD build and uses JSX to declare a circle element with specified radius, center coordinates, fill color, and stroke properties. No interactive behavior or animation is present, as the component returns only one static SVG element.

GGunjan Paul
90% match