caraSonriente

100%

✓ Published0🌍 Public

Last edited Mar 6, 2021

Created on Mar 6, 2021

A smiling face rendered as a responsive SVG that fills the browser window, with a yellow circular head, black stroke outline, and two dark eyes positioned symmetrically around the center. The face is built using React components, with each shape defined as a JSX `<circle>` element. The dimensions and positions are calculated dynamically from `window.innerWidth` and `window.innerHeight`, while the mouth is implied but not drawn, leaving the face incomplete. React 16.9.0 and ReactDOM render the SVG to the page.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of cara sonriente parte 1

This example displays a simple smiley face composed of three SVG circles on a yellow background with a black outline. The HTML file directly embeds the circle elements, positioning them with explicit `cx` and `cy` attributes and setting the radius and stroke properties. Although the page includes React and ReactDOM libraries, the actual rendering relies on static SVG markup rather than dynamic React components. The JavaScript file defines a trivial "Hello JSX" heading but does not interact with the face graphic.

Jjuanmosovich

86% match

Loading thumbnail…

cara sonriente parte 1

A yellow smiley face with black outlined eyes and a wide circular outline is rendered on a 960 by 500 SVG canvas. The concentric face shape uses a large yellow circle centered at 480, 250 with a black stroke, while two smaller blank circles serve as eyes at fixed coordinates. The composition is built directly with SVG circle elements, using inline styling for fill, stroke, and stroke width, with no external JavaScript libraries or data sources involved. The drawing is static, showing only the basic geometric construction of a simplified face.

Jjuanmosovich

86% match

Loading thumbnail…

Parte 1 Carita Feliz

This example shows a smiling face constructed from simple geometric shapes, centered within a 960 by 500 pixel SVG canvas. The face is drawn using D3's `arc` generator to create a semi-circular mouth, while React handles the declarative rendering of the elements. A yellow circle forms the head, with black stroke outlines, and two smaller black circles serve as eyes. All shapes are positioned relative to the canvas center using SVG transforms.

DDaniel Unapanta

84% match

Loading thumbnail…

Smiling Face

A smiling face rendered as a static SVG graphic fills the viewport, using three circles to depict the head, eyes, and a curved mouth. The page loads React and ReactDOM libraries, though the visual itself is defined directly in the SVG markup within the HTML, not generated through React code. The face is centered on a yellow 960 by 500 canvas with a black outline.

KKaiyangYao

83% match

Loading thumbnail…

FACE SMILE

This example shows a simple static face rendered as a smiling yellow circle with two black eyes and a curved mouth, drawn using basic SVG shapes. The visualization uses React 18.2.0 for component structure and JavaScript to load the library, while the rendering is achieved through inline SVG elements like `<circle>` and a path for the smile. The code explicitly sets the viewport dimensions to 960 by 500 pixels and positions the face elements at fixed coordinates, with a yellow fill, black stroke, and thick outline. No interactive or data-driven behavior is present; it is a purely decorative demonstration of SVG within a React setup.

Ppriyanshu

82% match

Loading thumbnail…

Smiling face PartI

This example renders a static smiling face using React and SVG. It shows a yellow circle with black stroke as the head, and two smaller black circles for eyes, positioned symmetrically on the face. The rendering approach uses plain SVG elements—`<circle>` tags—directly embedded in the HTML, with styling applied via standard SVG attributes like `fill`, `stroke`, and `stroke-width`. The code includes both a React component (`ReactDOM.render`) and minimal CSS, though the visible visualization relies entirely on the static SVG markup rather than dynamic data or interactions.

00128momo

82% match

Loading thumbnail…

Smiley Face

A smiling face rendered as a static SVG graphic uses React 17 and ReactDOM to mount an app, though the visible face is drawn directly in the index.html file with hardcoded circle elements. The yellow outer circle, two black eye circles, and implied curved mouth are laid out with explicit pixel coordinates on a 960×500 canvas. The code does not implement any interaction or data-driven logic; it simply outputs a fixed, pre-defined facial composition.

JJasprado23

82% match

Loading thumbnail…

smiley face I

A yellow smiley face rendered as an SVG, with a black circular outline, a pair of eyes, and a mouth. The face is centered within a 960 by 500 pixel viewport, with the head diameter determined by the height. Built with React, the component uses JSX to define three circle elements for the face outline and eyes, while the mouth remains as a commented-out placeholder. The code relies on React 18 and ReactDOM to mount the component into the page's root element.

Kkcai93

82% match