Skip to main content
SimilarExport ZIP
100%

Circle With Background Image

✓ Published0🌍 Public
RRichikata
Last edited Jul 2, 2021
Created on Jul 2, 2021

A yellow circle with a facial expression rendered as a smiley face sits atop a full-screen background image, which is tiled into the SVG via a `<pattern>` and `<image>` element. The React component uses `window.innerWidth` and `window.innerHeight` to size the viewport, and positions the face at the center. SVG circle elements create the head, eyes, and mouth, with stroke and fill attributes defining the visual style. The implementation relies on React's `ReactDOM.render` to mount the SVG tree, using only native SVG and React APIs without external charting libraries.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

smile face I

A yellow smiley face rendered as SVG in a React component. The face consists of a large yellow circle with a black stroke, created by the `BackgroundCircle` component, and two small black circles for eyes. A mouth is drawn as a full circular arc using the D3 `arc()` API with an inner radius, resulting in a ring shape. The visualization positions all elements relative to the center of the SVG canvas using translation, with dimensions fixed at 960 by 500 pixels.

Yynwc2006
85% match
Loading thumbnail…

Smily face part1

A yellow circle with a black stroke forms the head of a smiley face, while two smaller black circles serve as eyes. The example demonstrates basic SVG circle elements rendered inside a React application, using hardcoded coordinates rather than data-driven values. The code imports React and ReactDOM but does not yet attach the component to the DOM, leaving the visualization static. The rendering approach relies on plain SVG markup directly in the HTML, with no interactive behavior or animation present.

Ttssytrack
84% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline and two black inner circles forms a simple smiley face. The face is drawn entirely with SVG circle elements, centered within a 960 by 500 viewport, using React's JSX syntax to render the markup. The code sets explicit pixel values for the face radius, eye offset, and eye radius, and relies on ReactDOM to mount the SVG into the page.

MMaulana Adam Sahid
84% 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
84% match
Loading thumbnail…

Smily circle

This example renders a smiling face as a static SVG graphic using React. A large yellow circle with a black stroke forms the head, while two smaller black circles serve as eyes. The code uses React’s production build and direct SVG elements (`circle`), with coordinates hardcoded in the JSX. The title references a “smily circle,” and the markup is embedded directly in an HTML page with minimal styling.

Rravender26
83% match
Loading thumbnail…

Smile 1

A yellow circle with a thick black outline is centered in an SVG canvas, drawn with React elements. The visualization uses React and ReactDOM to render a single `<circle>` element, with its radius calculated from the viewport height and stroke width. The code explicitly sets the fill color, stroke color, and stroke width to create the smiley face’s base, though no facial features are drawn in the active script. The rendering relies on SVG within a React component, with dimensions fixed at 960 by 500 pixels.

WWinnie Yoe
83% match
Loading thumbnail…

Smiley Circle Part I

This example displays a simple smiley face drawn with three SVG circles on a yellow background. The main circle forms the face, while two smaller circles serve as eyes. The visualization uses React 17, loaded via UMD, and renders entirely through declarative SVG elements within an HTML page. The face is centered in a 960 by 500 viewport, with the body styled for large text display. No interactive behavior or data binding is implemented; the graphic is static, defined directly in the markup.

CConrad F D'Cruz
83% match
Loading thumbnail…

Smiley face part 1.

A yellow circle with a black outline rendered as an SVG sits on a white canvas, representing a face before the eyes are added. Built with React 17 and ReactDOM, the example uses hardcoded constants for width, height, and stroke width to position the circle at the canvas center. The circle’s radius is calculated from half the height minus half the stroke width, and the SVG is generated directly through React’s rendering API.

JJairo Hernandez
83% match