Skip to main content
SimilarExport ZIP
100%

index

✓ Published1🌍 Public
KKim-Mingyeong
Last edited May 16, 2021
Created on May 16, 2021
Forked from HTML Starter

This example renders a simple smiley face using SVG primitives in a React project. It shows three overlapping circles forming a face: two black eyes, a yellow head with a thick black outline, and a smaller yellow mouth. The code uses raw SVG elements—`<circle>` with attributes like `cx`, `cy`, `r`, `fill`, and `stroke`—directly inside an index.html file. No external data or libraries are involved; the visualization is static and hand-coded, demonstrating basic SVG composition without JavaScript interaction or dynamic data binding.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

smile

This example shows a static smiley face built from three SVG circles: a large yellow face and two smaller black-outlined eyes. The React-based page renders the SVG directly in the HTML body, with the circles positioned using explicit `cx`, `cy`, and `r` coordinates. Despite including React and ReactDOM scripts, the rendered visualization does not use React components or props; the SVG markup is hardcoded in `index.html`. The `index.js` file only mounts a separate "Hello, world" heading, which is not visible in the final output.

XXiangdong (Derek) Chen
89% match
Loading thumbnail…

Making a smiley face

This example shows a simple smiley face drawn with basic SVG shapes. The face consists of a large yellow circle for the head and two smaller black circles for the eyes, all defined directly in an `index.html` file. The rendering relies on raw SVG elements, with no additional JavaScript logic beyond loading the React libraries. The React framework is included, but the visualization itself is static, created purely through SVG markup, and provides a minimal demonstration of combining React with SVG output.

Aandresitopoloski
87% match
Loading thumbnail…

Smiley face

This example draws a simple smiley face using only SVG primitives in a React-free HTML page, though the listing notes React as a possible framework for the v3 source. The face consists of three circles: a large yellow head with a black outline and two smaller black circles for eyes, all positioned within an SVG canvas. The code relies on standard SVG elements like `<circle>` and CSS styles for the page layout, with no data binding or interactivity. It demonstrates basic declarative vector graphics rendering in the browser.

Jjamlicker
87% match
Loading thumbnail…

Smiley face

This example displays a classic yellow smiley face rendered as SVG shapes: a large circle for the face and two smaller circles for the eyes, all with black strokes. The page combines static SVG markup in `index.html` with a React app initialized in `index.js` using React 18 and ReactDOM, though the React component currently only renders a placeholder heading. The face itself is drawn directly in the HTML without JavaScript-driven data or interactivity, showcasing a simple hybrid of vanilla SVG and React setup.

AABI DAVID LIVING-STONE
87% match
Loading thumbnail…

Hello HTML

This example renders a simple smiley face using React and SVG. It draws three circles directly in the JSX markup: a large yellow face with a black stroke and two smaller circles for eyes. The SVG viewport is 960 by 500 pixels, with the face centered. The code uses raw SVG elements within an HTML file that includes React from a CDN, though it does not apply any React-specific rendering logic or state.

JJJohnson1991
87% match
Loading thumbnail…

01-make a face

A smiling face is drawn using three SVG circles: a large yellow head with a black outline and two smaller black eyes. The example demonstrates static SVG rendering in React, with the face composed directly in the JSX of the `index.html` file. It uses no external libraries beyond the basic HTML and CSS setup, relying on SVG's built-in shape elements and attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The code shows a simple, declarative approach to creating vector graphics without any interaction or data binding.

Mmygynt679
87% match
Loading thumbnail…

smiley face part 1

This example displays a simple smiley face drawn with three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The SVG element is defined directly in the HTML with fixed coordinates and stroke styling, rendered at 960 by 500 pixels. The React framework is loaded via JavaScript libraries for a minimal "Hello JSX" app, but the face itself does not rely on React or dynamic data, using static SVG markup instead.

JJason Barnes
87% match
Loading thumbnail…

Smiley Face 1

This example shows a yellow smiley face rendered as three circles: a large head and two smaller eyes. Purely static and hand-coded, it uses raw SVG elements placed inside an `index.html` file. The React code in `index.js` imports React and ReactDOM but renders only an empty JSX heading, leaving the face untouched. The head circle is filled yellow with a black stroke, while the eye circles use the default black fill, creating a minimal, unfinished appearance.

OOmar Farooq Malik
87% match