Fork of Smiley Face Part 2

100%

Fork of Smiley Face Part 2

✓ Published0🌍 Public

Last edited Mar 2, 2021

Created on Mar 2, 2021

This example shows a responsive smiley face rendered as an SVG, with a yellow circular head, two black eyes, and a curved mouth. The visualization adapts to the browser window size by computing its dimensions from `window.innerWidth` and `window.innerHeight`. The code uses React to create the SVG elements and calls `d3.arc()` from D3 v6 to generate the mouth path. The face is centered using an SVG `<g>` transform, and all shapes are positioned relative to that center point.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face rendered as a responsive SVG, centered on the screen with yellow circular head, black outline, two eyes, and a mouth arc. The face is built using React components, with D3’s `arc()` generator creating the mouth path. D3 v7 supplies the arc shape, while React 16.9 handles the DOM updates and JSX structure. Window dimensions set the canvas size, and all positions are calculated relative to the center.

SSyed Mohsin Raza Naqvi

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face rendered as a responsive SVG, with the entire graphic scaling to fit the browser window and centered dynamically. It uses React components to structure the drawing, computing coordinates from `window.innerWidth` and `window.innerHeight`. The face is built with basic SVG shapes, including a yellow circle with a thick black stroke for the head and simple black circles for the eyes. A mouth is drawn using the D3 `arc` function with inner and outer radii and specific start and end angles, while a second path is generated from D3’s `line`, demonstrating how D3 geometry can create the facial features within a React-based SVG.

FFelix Renken

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered as an SVG using React components for scalable vector graphics. The face consists of a yellow circle with a black stroke, two eye circles, and a mouth arc, all positioned relative to the window dimensions. The code uses React’s `createElement` API via JSX, `ReactDOM.render` to mount the app, and D3 v7’s `arc` function (imported but not used in the visible code) to define the mouth shape. Rendering adapts to the browser viewport through `window.innerWidth` and `window.innerHeight`.

SSadaf Siddiqui

95% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a large yellow smiley face rendered in SVG, with two black eyes and a curved mouth, sized to fill the browser window. The face is built using React components, with the mouth path generated by the d3 `arc` function to create the curve. Circles for the head and eyes are drawn using SVG elements, and the entire face is centered using a translation transform. The visualization uses React 16.9, D3 v7, and is fully responsive to the viewport dimensions.

Wweisbroda@rfa.org

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a classic smiley face rendered as an SVG graphic, with a yellow circular head, two black eyes, and a curved mouth drawn using an arc path. The visualization is built with React and D3 v7, using the `arc` function to generate the mouth shape from specified inner and outer radii. The face is centered on the screen and dynamically sized based on the browser window dimensions, with all elements positioned relative to the center point. The code defines constants for eye offset, radius, and stroke width to control the facial features.

JJasmine Ye Han

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a simple smiley face rendered as an SVG graphic, with its position and size dynamically scaled to fill the browser window. The face is composed of basic shapes—a yellow circle for the head, two black circles for the eyes, and a mouth created using the `d3.arc` generator with specified inner and outer radii. The layout uses React components to structure the SVG elements, while `window.innerWidth` and `window.innerHeight` determine the canvas dimensions. The code relies on React 16.9 and d3 v7, with the mouth path generated by `arc().innerRadius().outerRadius().startAngle().endAngle()`.

FFangfei Zhang

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG using React and D3. The face is centered on the screen and resizes to fit the browser window, with two black eyes and a curved mouth drawn using the D3 `arc()` generator. The code uses React functional components and ReactDOM to render the SVG, while D3 v5 provides the arc path generation. Static values define the eye offset, eye radius, mouth radius, and stroke width, making the face fixed in proportion rather than interactive.

HHowardHan99

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a responsive SVG that fills the entire browser window. React manages the component structure, while D3’s `arc` generator creates the mouth path. The face uses circles for the head and eyes, with fixed offsets and radii, and is centered using a translate transform based on the window dimensions.

Mmohamedabbessi

95% match