Funnel Attempt 2

100%

Funnel Attempt 2

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

This example shows a simple smiley face rendered as an SVG, with the face elements positioned based on the browser window dimensions. The code uses React to define the SVG structure, calculating the center point and various facial feature offsets from `window.innerWidth` and `window.innerHeight`. A commented-out static SVG version with a yellow circle, eyes, and a mouth is also included for reference. The live implementation renders a single path element that forms a curved, funnel-like shape, while the full smiley face details remain incomplete in the active code.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's turn a face into a funnel

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.

Kkatebacon32

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

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

85% match

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example demonstrates a yellow smiley face rendered as a static SVG composition, using two filled circles for eyes within a larger yellow face outlined in black. Built with React 16.9 and ReactDOM, the application defines a constant width and height of 960 by 500 pixels and uses the `useState` hook to manage data, though the rendering logic is left incomplete in the provided source. The visualization relies on inline SVG elements rather than external data sources, with the face geometry hard-coded in commented-out markup.

KKate-2222004

84% match

Loading thumbnail…

Smiley Face Part 1

This example shows a static smiley face rendered as an SVG graphic, with a yellow circle for the face, black stroke for the outline, and two smaller black circles for eyes. The code is a minimal React setup, loading React 18 from a CDN and including commented-out SVG elements that define the face’s dimensions and positions. While the SVG markup is present in comments, the actual display relies on the uncommented structure, using basic circle elements without any interactive or animated behavior. The rendering approach is straightforward, with hardcoded coordinates for the face and eyes.

Nnoncomplex

84% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiling face rendered as a responsive SVG that fills the browser window. The face consists of a yellow circle with a black stroke for the head, two black eye circles, and a curved mouth drawn using React's JSX syntax. The code uses React and ReactDOM to render the SVG elements, with dimensions and positions calculated from the window's width and height. The static values for eye offset, eye radius, and mouth radius are defined as constants.

JJohn Keatley

84% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a React-rendered SVG smiley face, centered and sized to the browser window. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc. The mouth is generated using D3’s `arc` function to compute the path for an SVG `<path>`. The implementation separates components (`BackgroundCircle`, `Eyes`, and `Mouth`) in React, with fixed offsets and radii such as `eyeOffsetX`, `eyeRadius`, and `mouthRadius` to position features. The dimensions and center are derived from `window.innerWidth` and `window.innerHeight`, and the SVG scales to fill the viewport.

DdbarU

84% match

Loading thumbnail…

Fun with smiley face

This example shows a simple smiley face built from a yellow circle, two black eyes, and a curved mouth, rendered as vector graphics. The face is composed declaratively using React components, with layout controlled by SVG’s coordinate system. The mouth is drawn using the d3.arc API to generate a path between two angles, while the background circle and eyes are plain SVG circle elements. The entire face is translated to the center of a 960×500 SVG canvas via a group transform.

AAshwin

84% match