Fork of Fork of Fork of Smiley Gone Mad

100%

Fork of Fork of Fork of Smiley Gone Mad

✓ Published0🌍 Public

Last edited Nov 4, 2021

Created on Nov 4, 2021

Forked from Fork of Fork of Smiley Gone Mad

A comic face rendered with SVG arcs, featuring a wide grin, layered lips, and a grid of individual teeth built from ten arc segments on both the upper and lower jaws. The components are constructed using React components and D3’s `arc` generator, with coordinates and proportions defined as named constants for modularity. The static visualization uses a white background and black strokes, displaying the face centered in a 1000×800 viewport.

AI-generated description

Wanted to capture this state of the amazing original work by Steve.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Smiley Gone Mad

This example renders a stylized, grinning face composed of SVG primitives. The face is constructed from separate React components for the head, ears, eyes, hair, nose, and a mouth with distinct teeth. The code leverages D3's `arc` function to generate precise annular sectors for the mouth and teeth paths, while SVG filters like `feOffset` and `feGaussianBlur` create drop shadows. All elements are drawn with ReactJS and assembled within an SVG container using a central `FaceContainer` wrapper.

SSteve

91% match

Loading thumbnail…

Fork of Smiley Face Part II

A grid of eighteen small smiley faces, rendered side-by-side, displays subtle variations in mouth curvature. Each face is constructed with React components and SVG primitives, including a yellow circle, two eye circles, and a mouth path. The mouth shape is generated using D3’s `arc` function, with a random radius value determining the arc’s thickness. The layout is created by mapping over a D3 `range` array, and the entire composition is rendered to an SVG container with a translated coordinate system.

Ggragors123@gmail.com

88% match

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part V

A stylized smiley face built with React and rendered as SVG, composed of a pink background circle, two eyes with asymmetric radii and a brow line, two rectangular teeth, and an arc-based mouth. The mouth is generated using the d3.arc() API from d3.v6, while positioning is handled via a central group transform. Custom React components export each facial feature, taking size and offset props to control layout.

MMONNNA-ARCH

88% match

Loading thumbnail…

Fork of Fork of Fork of Smiley face part V

A smiling face is rendered as a composite of basic SVG shapes within a React application. The visualization constructs the face from three distinct components: a yellow circular background, two black eyes, and an arc-based mouth. The scene is assembled using React components with D3.js, where the D3 arc generator creates the mouth path. Color, stroke, and dimensions are defined through React props, and the entire face is centered within an SVG canvas using SVG transform attributes.

NNordes Ménard-Lamarre

88% match

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part 4

A smiley face built with SVG shapes, rendered entirely through React components and D3’s arc generator. The code defines a yellow background circle, two fixed-position eyes, and a mouth created using the `d3.arc()` API with specified inner and outer radii plus angular extents. The React app imports `arc` from D3 v7, mounts to a root div, and centers elements via a `translate` transform on a group. No external data is loaded; the visualization is purely geometric and static.

Oosaidhashmi31

88% match

Loading thumbnail…

Fork of Fork of Smiley Face Part V

A smiling face rendered in SVG combines React components with D3's arc generator. The `BackgroundCircle`, `Eyes`, and `Mouth` components define circles and a path, while D3's `arc()` creates the mouth with controlled inner radius, width, and start/end angles. React handles component composition and state, passing numeric props for positioning and dimensions. The final SVG is mounted via ReactDOM, using fixed coordinates centered on a 960×500 canvas.

RRyanJHorwitz

88% match

Loading thumbnail…

Fork of Fork of Smiley Face PT 2

This visualization displays a grid of randomly generated smiley faces rendered as SVG elements in React. Each face uses D3’s `arc` API to draw a mouth, with variations in stroke width, eye position, eye radius, and mouth dimensions produced by successive calls to `Math.random`. The `FaceContainer` component sets the SVG coordinate system, while the `BackgroundCircle`, `Eyes`, and `Mouth` components are composed per instance. React renders each face independently, creating a mosaic of slightly different expressions.

Ccajunatr

88% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Smiley face part VI

A grid of 18 randomized smiley faces renders with React components, each face varying in stroke width, eye offset, eye radius, mouth width, and mouth radius. The faces are drawn as SVG circles and arcs, using D3’s `arc()` generator for the mouth paths and `range()` from D3 to create the array of faces. Each face is composed of separate React components like `BackgroundCircle`, `Eyes`, and `Mouth`, assembled within an SVG container that centers coordinates. The visualization demonstrates how parametric variations of simple geometric shapes produce diverse facial expressions.

NNordes Ménard-Lamarre

88% match