Fork of smiley face part I

100%

Fork of smiley face part I

✓ Published0🌍 Public

Last edited Mar 9, 2021

Created on Mar 1, 2021

This example shows a simple smiley face drawn with two eyes and a yellow circular head on a blank SVG canvas, with no interactive or animated behavior. The page combines React and D3 v6 by loading both libraries via CDN in the HTML, while the SVG shapes are defined directly in the markup using circle elements with fixed coordinates and stroke styling. A separate React component renders a static "Hello JSX" heading into a root div, demonstrating a minimal integration of React’s component syntax alongside raw SVG rendering.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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 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 Smiley Face Part III

This example shows a simple smiley face rendered as an SVG using React components for the background circle, eyes, and mouth. The face is centered on a 960x500 canvas, with a yellow circle outlined in black, two offset black eyes, and a mouth drawn as an arc. The code uses React for component structure and D3’s `arc` function to generate the mouth path, with all positioning defined by fixed constants. The visualization demonstrates a declarative mix of React and D3 for static SVG drawing.

YYohsuke Murase

92% 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

92% match

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a static smiley face using SVG shapes defined directly in the HTML, with a yellow circle for the head and two smaller circles for the eyes. The page loads React 16.9.0 and ReactDOM from a CDN, and the accompanying `index.js` uses the `ReactDOM.render` method to display a simple "Hello JSX" heading in the root element, though the SVG markup is placed outside that React component. The visualization demonstrates basic SVG drawing within a React-based page structure, with no dynamic data or interaction.

Wwakenhole

92% match

Loading thumbnail…

Fork of Smiley face part 1

This example shows a smiley face constructed with SVG shapes in a React application, rendered through D3’s `arc` generator for the mouth and basic circle elements for the face, eyes, and highlights. The face is centered using a group transform, with yellow fill and black stroke for the head, while the eyes include small white pupils for detail. The code relies on React for component rendering, D3 v6’s `arc` API to compute the mouth path, and SVG elements for all visual output. The composition uses fixed dimensions and offsets to position features symmetrically.

SSilvaYH

92% match

Loading thumbnail…

Fork of Smiley face part 12

This example shows a yellow smiley face drawn with SVG shapes, featuring two black eyes and a curved mouth. The face is centered on a 960x500 canvas, with the head as a yellow circle outlined in black, offset eye circles, and a mouth created using the d3 `arc` function. React renders the SVG elements, while D3 v6 computes the mouth’s path geometry. The code uses fixed pixel values for positioning and sizing, and the smiley is drawn entirely from code with no external data.

550f1AG

92% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a simple smiley face composed of a yellow circle, two eyes, and a smiling mouth, all centered in an SVG canvas. It demonstrates how to integrate React with D3 by using D3’s `arc()` generator to create the mouth path and rendering it as a React `<path>` element. The code relies on React 16.9 and D3 v5, using JSX to define SVG shapes with numeric constants for positioning and sizing. The face is drawn declaratively, with all geometry derived from fixed values like `eyeOffsetX`, `mouthRadius`, and `strokeWidth`.

SShreyak Chakraborty

92% match