Skip to main content
SimilarExport ZIP
100%

Fork of Smiley face part1

✓ Published0🌍 Public
FFrictionlessman
Last edited Mar 14, 2022
Created on Mar 14, 2022

This example shows a simple smiley face composed of three circles: a large yellow circle for the head and two smaller red circles for eyes, all rendered on a light gray background. The static SVG diagram uses hardcoded coordinates and attributes such as width, height, and stroke properties to define the shapes. It demonstrates a basic React-starter workflow with CSS and JavaScript, relying on the SVG API for vector graphics without any interactivity or animation.

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 part1

This example shows a yellow smiley face drawn with SVG circles on a React-based canvas. The face consists of a large outer circle for the head and two smaller black circles for eyes, all positioned relative to the canvas center. The code uses React and ReactDOM to render the SVG elements, with hardcoded dimensions and offsets defining the face’s geometry. The rendering approach is purely declarative SVG, with no external data source.

FFrictionlessman
94% 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
94% match
Loading thumbnail…

Fork of Smiley Face Part II

This example shows a static smiley face composed of three SVG circles: a large yellow filled circle with a black outline, and two smaller black circles for eyes. The component is rendered using React and ReactDOM, though the active visualization is created directly in the HTML file with hard-coded SVG attributes rather than through the commented-out React code. The page imports React 16.9.0 from a CDN and renders into a div with the id "root", while a separate SVG element appears in the body.

Hhasti khajeh
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 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 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
93% match
Loading thumbnail…

Fork of Smiley Face Part2

This example shows a smiley face constructed entirely from SVG circles, with the face, two eyes, and a head all rendered as circular shapes. The code uses React to define the drawing as a component, with ReactDOM rendering it to the page. The SVG canvas is 960 by 500 pixels, and the face is centered with a thick black stroke and yellow fill, while the eyes are positioned using calculated offsets from the center. The drawing uses React 17 and React DOM, with all geometry defined through JavaScript variables and inline SVG attributes.

GGaeun Karen Lee
93% match
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a classic smiley face as a single static SVG graphic using React. The drawing consists of three circles: a large yellow face with a black stroke, and two smaller black circles for eyes. The code defines the SVG dimensions and circle attributes directly in the markup. It uses React 16.9.0 and ReactDOM to inject the SVG into the page, with the rendering based on fixed coordinates and styles.

KKeyvan Rezaei
93% match