Skip to main content
SimilarExport ZIP
100%

Fork of Smiley face

✓ Published0🌍 Public
Jjamlicker
Last edited Apr 13, 2021
Created on Apr 13, 2021
Forked from Smiley face

This example shows a simple smiley face rendered as a fixed SVG graphic. It uses plain HTML and CSS to set up a full-viewport page with no margins, while the face itself is drawn with three `<circle>` elements inside an inline `<svg>`. The main face is a yellow circle with a black stroke, and two smaller black circles form the eyes. No JavaScript or external libraries are used; the entire visualization is static markup.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley face

This example shows a yellow smiley face rendered as a static SVG graphic. The face consists of three circles: a large yellow circle for the head and two smaller black circles for eyes, all positioned with explicit `cx`, `cy`, and `r` attributes. The rendering is pure SVG, embedded directly in the HTML page, and does not use the React framework for drawing. The page loads React and ReactDOM libraries via CDN, and `index.js` defines a simple React app that renders a heading, but the SVG markup is separate and static.

AABI DAVID LIVING-STONE
94% match
Loading thumbnail…

Fork of Fork of Smiley Face

The example shows a simple yellow smiley face drawn as an SVG graphic using React components. It defines circles for the face, eyes, and mouth, with fixed positions and radius values. The code uses React 18 and ReactDOM to render the SVG elements onto a web page, with the face centered in a 960-by-500 pixel viewport. The rendering is fully static, with no animation or interaction. The visualization demonstrates basic SVG circle composition within a React framework.

AAndres Perdomo
93% match
Loading thumbnail…

Fork of Smily Face

This example uses React and ReactDOM to render a smiley face as a static SVG graphic. It displays a yellow circle with a black stroke, two black eyes, and no mouth, all positioned using computed dimensions based on the viewport’s width and height. The SVG circles are defined with JSX inside a React component, with hardcoded numeric values for radius and offsets. The page loads React from a CDN and mounts the component into a root div, while CSS hides any page overflow.

PPipo
93% match
Loading thumbnail…

Fork of Smiley Face Part 1

This example shows a simple yellow smiley face drawn as a static SVG graphic, with two black eye circles positioned on a larger yellow circle. The code uses plain SVG elements in React, including a main circle with a yellow fill and black stroke, plus two smaller unfilled circles for eyes. The rendering approach relies on hardcoded SVG coordinates and properties in index.html, with React loaded from a CDN and logged to the console. The visualization demonstrates basic geometric composition without interactive behavior or data binding.

DDaljeetSingh1320
93% match
Loading thumbnail…

Fork of Smiley face part I

This example renders a static smiley face using React and SVG. The face consists of a yellow circle with a black stroke, and two smaller black circles for eyes, positioned within an 960×500 SVG canvas. The code imports React from the UMD build and logs it to the console, while the HTML file loads the React library from unpkg and includes the SVG markup directly. The visualization demonstrates basic SVG shape composition without any interactivity or dynamic behavior.

HHarsh Vijay
93% match
Loading thumbnail…

Fork of Smiley Face Part II

This example demonstrates a simple yellow smiley face rendered as a static SVG graphic, comprising a large circular head with two smaller eye circles. The visualization is built using React, with the `React` and `ReactDOM` libraries from the UMD builds, and renders directly to SVG within an HTML page. The code defines fixed dimensions, a center point, and offsets to position the circles, using a `strokeWidth` of 20 pixels for the head's outline. The rendering approach is purely declarative, with all circle coordinates hard-coded rather than derived from data.

Ssd2beatles
92% match
Loading thumbnail…

Fork of Smile

This example shows a simple smiley face built from three SVG circles on a yellow background. It renders a large yellow circle for the face, with two smaller black circles positioned symmetrically for eyes, all using a black stroke. The visualization is created with React and ReactDOM, using JSX to define the SVG elements and their attributes like center coordinates, radii, and stroke properties. The code sets explicit numeric values for width, height, and offsets, and mounts the component to a root div in the HTML page.

CChristianGerten
92% match
Loading thumbnail…

Fork of Fork of Smiley Face

This example renders a simple smiley face as an SVG graphic using React and ReactDOM. It draws a yellow circle for the face, with black circles for eyes positioned relative to the center; the mouth is absent. The rendering relies on React’s JSX syntax to create SVG elements, with the width and height set to 960 and 500 pixels. The code uses ReactDOM’s render method to mount the SVG into the HTML page’s root element.

AAndres Perdomo
92% match