Skip to main content
SimilarExport ZIP
100%

Smile Please

✓ Published0🌍 Public
AAmit Jena
Last edited Mar 23, 2022
Created on Mar 23, 2022
Forked from HTML Starter

This example draws a simple smiley face using SVG primitives in a static HTML page. A large yellow circle with a black stroke forms the head, while two smaller circles without fill represent the eyes; a missing mouth suggests an incomplete or minimal composition. The code includes React and ReactDOM from CDN, but the visible visualization relies solely on raw SVG elements, with an accompanying React app that renders a separate "Hello JSX" heading. The project demonstrates mixing vanilla SVG markup with a React starter template.

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 Part 1

This example draws a static smiley face using raw SVG shapes within a React application. The code renders three circles—a large yellow face with a black stroke, and two smaller black eyes—directly in the JSX markup of the HTML file. It uses React and ReactDOM from CDN links, with D3 loaded but not actively used for any data or simulation. The visualization follows a margin convention through a custom `VizContainer` component, which abstracts the SVG group structure and can display margins via a `showMargins` prop.

Ssamsangraula
92% match
Loading thumbnail…

Smile Please

A yellow circle with a black stroke serves as a smiling face, with two smaller black circles positioned as eyes inside it. The graphic is rendered as static SVG elements directly in the HTML, using React's `React` object imported from a CDN. The code sets the face's radius to 245 and the eyes to 50, centered on an 960x500 canvas. No interactivity or data binding occurs; it is a simple, declarative composition of three circle shapes.

AAmit Jena
92% match
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
92% match
Loading thumbnail…

Smiley Face

This example draws a static smiley face using SVG within a minimal React page. The page displays a yellow circle with a black outline, two black eye circles, and a placeholder for a mouth. Rendering relies on raw SVG markup in the HTML file, while React 16.7 and ReactDOM manage a separate "Hello JSX" heading inside the root div. The SVG elements use fixed coordinates and radius values, with no interactive behavior or data binding demonstrated.

Ssamawi.samadikun@gmail.com
92% match
Loading thumbnail…

smiley part 1

This example renders a static smiley face using inline SVG elements. It shows a large yellow circle for the head and two smaller black circles for the eyes, all with thick black strokes. The page uses React and ReactDOM to inject a simple JSX heading into an HTML root element, while the SVG markup is written directly in the index.html file. The visualization is minimal, focusing on basic shape drawing without interaction or data.

Ttdinh09
92% 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
91% 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
91% match
Loading thumbnail…

Hello HTML

This example shows a simple static SVG rendering of a smiley face, with a large yellow circle for the head and two smaller black circles for the eyes. The page loads React and ReactDOM from CDN links, but the visible visualization is hand-coded SVG in the HTML body. The code also defines a minimal React app component that renders a heading, though it is not displayed in the SVG output. The example demonstrates basic HTML structure, inline CSS to remove margins, and integration of the React library.

DDr.Capybara
91% match