Smiley Face Part I

100%

Smiley Face Part I

✓ Published1🌍 Public

Last edited May 16, 2021

Created on May 16, 2021

A static SVG smiley face rendered without React, despite the gallery’s framework metadata. The code uses raw SVG `<circle>` elements inside an inline `<svg>` tag, with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes to draw a yellow head and two black eyes on a 960×500 canvas. No interactive behavior or data binding is present; the visualization is purely declarative markup, as shown in the included `index.html` file.

AI-generated description

Half-way towards the smiley face w/o React

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

A static smiley face rendered as SVG shows a large yellow circle with two smaller black eyes inside. The circles are positioned using absolute `cx` and `cy` coordinates within a 960×500 viewport, with the face centered at (480, 250). The code uses plain SVG elements (`circle`) rather than a data-binding library, though the HTML includes a React script reference that is not utilized. Stroke thickness and fill colors define the visual style directly in the markup.

DDiego Rubio

94% match

Loading thumbnail…

Smiley Face Part I

A static smiley face rendered with SVG, composed of a yellow circle for the head and two black circles for the eyes. The code uses plain JavaScript embedded in an HTML page, making no use of React despite importing it in the separate `index.js` file, which only logs the React object. The SVG elements are positioned with explicit pixel coordinates (e.g., `cx="480"`, `cy="250"`) and styled via attributes like `fill` and `stroke-width`. The rendering relies directly on SVG’s native circle elements rather than a charting library.

MManfredChen

94% match

Loading thumbnail…

Smiley Face Part 1

A static smiley face rendered as a yellow circle with two smaller black eyes sits centered within an SVG canvas. The graphic uses three raw SVG `circle` elements with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes to draw the face and eyes, while the page also imports React and ReactDOM, though the React code only renders a separate "Hello JSX" heading. The example demonstrates a minimal, framework-agnostic SVG drawing alongside a basic React setup in the same HTML file.

Zzepedrobessa

93% match

Loading thumbnail…

Smiley Face Part I

A static yellow smiley face rendered as three SVG circles—a large head and two smaller eyes—appears on a 960-by-500 canvas. The page loads React and ReactDOM from a CDN, though the visible drawing is plain SVG markup in the HTML, not React-generated. The code includes a minimal `index.js` that imports React but does not render any component, so the smiley face is purely declarative SVG without interactive behavior.

XXinhuiyu Liu

93% match

Loading thumbnail…

Smiley Face Part I

A minimalist smiley face rendered as a static SVG graphic. The visualization uses two black circles for eyes and a large yellow circle with a black outline for the head, all centered within a 960 by 500 pixel canvas. The drawing is constructed declaratively with SVG elements inside an HTML document, positioned using percentage-based coordinates for the `cx` and `cy` attributes. The design relies solely on basic vector shapes and CSS styling, with no interactive or animated features.

RRafal Krohne

93% match

Loading thumbnail…

Smiley Face Part I

A static smiley face rendered as SVG elements: a yellow circle with a black outline, two smaller black circles for eyes, and no mouth. The example uses React 18 and ReactDOM to manage the SVG markup, though the page loads a compiled bundle with a typo in the script tag. The SVG has a fixed 960 by 500 viewport, with circles positioned using explicit `cx` and `cy` coordinates.

CCynthia Mengyuan Li

93% match

Loading thumbnail…

Smiley Face part 1

A static yellow smiley face rendered with three SVG circles appears on a blank white canvas. The largest circle forms the head with a yellow fill and black stroke, while two smaller black unfilled circles serve as eyes. The visualization uses raw SVG elements defined directly in the HTML, with React included as a script dependency but not actively driving the rendering. The code displays a simple, fixed geometric composition without any interactive or animated features.

AAngus Clark

93% match

Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face drawn as a yellow circle with two black eyes and an empty space where a mouth will be added later. The code renders the SVG elements directly in the HTML file, setting the circle center, radius, and stroke properties. It uses React 17 with `react-dom` to mount the app, though the actual drawing lives outside the React component. The SVG viewport is 960 by 500 units, and the face uses basic geometric shapes without any data-driven visualization or interactive features.

BBobby Bowes

93% match