Let's turn a face into a funnel

100%

Let's turn a face into a funnel

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

A smiling face composed of yellow and black circles is drawn inside a full-screen SVG using React components. The face includes two eyes and a head, with dimensions calculated from the window size. The code uses React and ReactDOM to render SVG elements, with circle positions and radii defined as constants for eyes, mouth, and stroke width. The rendering adapts to the viewport, centering the face dynamically based on the current window dimensions.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as an SVG, with a large circular head, two small eyes, and a black outline. The face is drawn using basic SVG circle elements positioned relative to the center of a 960 by 500 viewport. The code uses React and ReactDOM to render the SVG structure, with hardcoded values for the head radius, eye offset, and stroke width. The visualization demonstrates how React can generate declarative SVG markup for straightforward geometric shapes.

Ttjcocucci

90% match

Loading thumbnail…

Let's Make a Face

A smiling face is drawn with yellow circular head, black outline, two black eyes, and a curved mouth, rendered as an SVG in a React application. The face is centered within a 960×500 viewport, with the head radius calculated from the window height minus stroke width. The mouth uses D3's `arc` generator with specified inner and outer radii and angles, while circles are drawn as React SVG elements. D3 v6 provides the arc function within a React functional component, with all geometry defined using fixed JavaScript constants.

Aazharahmad0

89% match

Loading thumbnail…

Let's Make a Face Part I

A yellow face with black outlined eyes is drawn as a simple SVG composition using React. The code renders circles for the face and eyes, with fixed positions calculated from the viewport dimensions. It uses ReactDOM to mount the component, and the SVG elements are defined directly in JSX with explicit attributes for radius, stroke, and fill.

DdRAPGb

89% match

Loading thumbnail…

Let's Make a Face Part I

A yellow smiley face rendered with three SVG circles appears against a blank background. React 18 manages the component tree, while SVG attributes define the face’s geometry: a large yellow circle for the head with a black stroke, and two smaller black circles positioned symmetrically for eyes. The code computes coordinates from fixed width, height, and offset constants, using React's `createElement` through JSX to render the SVG elements directly in the browser.

MMorgan Worrell

88% match

Loading thumbnail…

Let's Make a Face Part I

A static yellow smiley face rendered as SVG, with a black outlined circle for the head and two smaller unfilled circles for the eyes, appears against a blank viewport. The example uses React to structure the SVG elements directly in JSX, with hard-coded coordinates and dimensions for a 960×500 canvas. The code includes a separate React app that logs the React object and renders a simple heading, while the face is drawn in the HTML file using inline SVG tags. The rendering approach relies on basic SVG primitives without dynamic data or interaction.

Iillus0r

88% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face on a black-outlined circle, rendered as an SVG, is shown at the center of a 960 by 500 pixel viewport. Two empty eye circles are positioned symmetrically on either side of the face’s vertical axis. The visualization uses React to render the SVG elements, with dimensions and offsets defined as constants in JavaScript. The code demonstrates basic component-based SVG drawing with static, hard-coded coordinates and styling.

KKate-2222004

88% match

Loading thumbnail…

Let's make face-I

A yellow face with two black eyes is drawn as a circle with a thick black outline, centered in an SVG canvas. The face uses React components to render the SVG elements, with fixed numeric constants for the canvas dimensions, eye offset, and stroke width. The example demonstrates how React’s declarative JSX syntax generates SVG markup, calculating positions from center coordinates to keep the face symmetrical.

Ccanarary

88% match

Loading thumbnail…

Let's Make a Face

This example draws a yellow smiley face centered on a full-screen SVG. The face uses a circle for the head, two offset circles for the eyes, and a mouth path generated with a d3.arc that creates an open smile. React renders the SVG elements, while D3 v5 provides the arc geometry, with the viewport dimensions determined by window.innerWidth and window.innerHeight. The face is positioned using a translate transformation, and stroke widths and radii are defined as constants.

SShawty199

88% match