Skip to main content
SimilarExport ZIP
100%

Fork of course ep 1

✓ Published0🌍 Public
SShane Gibney
Last edited May 7, 2022
Created on May 7, 2022

This example shows a simple smiley-face avatar built with React and rendered as scalable vector graphics (SVG). It draws a yellow circle for the face and two smaller circles for the eyes, positioned relative to the center of a 960×500 viewport. The code uses React’s JSX syntax with inline curly-brace expressions to compute coordinates and dimensions from JavaScript constants. The SVG elements—`circle` and `stroke` properties—demonstrate basic geometric shape rendering without any external data or interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face 1

This example shows a simple smiley face built with React and SVG, rendered on a 960 by 500 pixel canvas. The face uses a yellow circle with a black stroke for the head, two white eyes with black outlines, and a curved mouth generated with the d3 `arc()` function. The code structures each element as a React component, applying constant offsets and radius values defined in variables. It uses ReactDOM to render the SVG into the page, with D3 v7 providing the arc path data for the mouth.

VVishnu Jayan
92% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple smiley face drawn with scalable vector graphics (SVG) circles in a React application. The code uses React’s declarative JSX syntax to define SVG elements, with D3 loaded but not actively used. It renders a yellow face with black outline, two eyes, and a smile on a fixed 960x500 canvas, demonstrating basic component structure and inline styling within a React component.

KKrzysiek1985
92% match
Loading thumbnail…

Fork of Smiling Face

This example shows a smiling face constructed from SVG primitives, centered within a 960 by 500 viewport. The face is built from a yellow circle for the head, two black circles for eyes, and a curved arc for the mouth. The code uses React to render the SVG elements and leverages the d3 `arc` function to generate the mouth path with specified inner and outer radii and angular extents. The drawing is positioned using SVG transformations, with the head’s stroke and radius explicitly defined.

BBensinga77
91% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG. The face is composed of SVG circles and a line element positioned within a 960x500 viewport. React code defined in `index.js` uses JSX with inline expressions in curly braces to set coordinates and radii, while plain SVG attributes handle stroke and fill styling. The visualization demonstrates fundamental React rendering with SVG primitives, including a yellow circle for the face, black eyes, and a white smile. The page loads React, ReactDOM, and D3 via CDN scripts, embedding the visualization in a `#root` div.

AAnjan Shrestha
91% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple smiley face drawn with SVG shapes: a yellow circle for the head and two smaller black circles for eyes. The code uses React to define the SVG elements declaratively, with D3 v7 loaded via CDN for potential data manipulation. The face is centered in a fixed 900 by 500 viewport, and the layout is computed using JavaScript constants for positions and radii, demonstrating how to compose SVG graphics within a React component.

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

Fork of smile face part 1

This example displays a simple smiley face drawn as a yellow circle with black stroke, two eyes, and an arc-shaped mouth, all centered in an SVG. It shows how reusable React components define each facial part, with the `BackgroundCircle` and `Eyes` components accepting props for sizing and positioning. The code uses D3’s `arc` generator to create the mouth path, while React 17 and D3 v7 render the static SVG output. The viewport is fixed at 960 by 500 pixels, with a hidden overflow style.

Hhung2606
90% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a static SVG smiley face: a yellow circle with a black outline, two solid black eyes, and a path for a mouth. The code uses React to manage the SVG elements inside an index.html file, with coordinates hard-coded for a 960×500 viewport. The rendering approach relies on standard SVG circle elements, positioned via cx and cy attributes, with the mouth path drawn using a bézier curve. The example demonstrates a simple, declarative visualization built with React’s JSX-style markup.

PPierre Tabet
90% match