Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Don't give a shit face

✓ Published0🌍 Public
FFrictionlessman
Last edited Mar 15, 2022
Created on Mar 15, 2022

This visualization renders a stylized, abstract face using React and D3.js. It draws a large circular head with gradients, two distinct eyes, an elliptical mouth, and a rectangular nose atop a polygon background. The code constructs the left eye arc with `d3.arc()`, while React elements handle SVG shapes for the face and features. Radial and linear gradients are defined via SVG `defs`, with colors applied through SVG fill and stroke attributes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Don't give a shit face

This example renders an abstract, cartoonish face using React and D3’s `arc` generator alongside SVG shapes like circles, polygons, ellipses, and rectangles. The face features a radial and linear gradient background, a large circle with a thick orange stroke, offset eyes built from arcs and circles, and a mouth represented by an ellipse and a rounded rectangle. The code uses ReactDOM to mount the SVG, with D3 v7 providing the arc path for the left eye.

FFrictionlessman
95% match
Loading thumbnail…

Fork of Don't give a shit face

This fork of "Don't give a shit face" uses React and D3 v7 to render an SVG face composed of a radial-gradient circle, two distinct eyes, an orange ellipse mouth, and a red tongue. The left eye uses `d3.arc()` to draw a half-ring, while the right eye combines concentric circles with stroke widths. Static geometric primitives define the composition.

FFrictionlessman
94% match
Loading thumbnail…

Don't give a shit face

This example renders a stylized, cartoon-like face using React and D3.js. The visualization combines SVG shapes—a radial gradient circle for the face, arcs for eyes, and rectangles for a nose and mouth—to create a deliberately indifferent expression. The left eye is drawn with a D3 arc generator (`d3.arc`), while other elements use direct SVG primitives. The code constructs the scene declaratively inside a React component, positioning all parts relative to the center of a fixed 950×500 viewport.

FFrictionlessman
88% match
Loading thumbnail…

Fork of Fork of Let's make a face: part 3 tweaks

This visualization shows a stylized smiley face composed of SVG shapes, including a circular head, two eyes, and a mouth. The face is centered within the viewport and uses gradients and contrasting colors for visual interest. Built with React and D3.js v7, it relies on the `arc` function from D3 to generate the mouth path, while React renders the SVG elements declaratively. A linear gradient fills the face and a separate gradient strokes its outline, with all geometric values defined as constants.

Nnikitamakkena
88% match
Loading thumbnail…

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

This React-based visualization displays a stylized, cartoon-like face built entirely from SVG shapes. The composition centers on a gradient-filled circle with asymmetrical eyes—one rendered as an ellipse and the other as a circle—along with a mouth and teeth created using D3’s `arc` generator. The `FaceContainer` component defines the SVG canvas and a linear gradient, while modular components for eyes, mouth, and teeth accept numerous numeric props to control positioning and sizing. The final result, a half-completed smiley face, is assembled in `index.js` using ReactDOM rendering with D3 v7 and React 18.

NNeeharikaGali
87% match
Loading thumbnail…

Fork of Face

A smiling face rendered with SVG, centered and scaled to fill the browser window. The visualization constructs the face using D3’s `arc` generator for the mouth and plain SVG circles for the head, eyes, and stroke. The React component computes the coordinates and dimensions based on the window’s width and height, with the head radius derived from the viewport height. The example demonstrates a hybrid approach, using React for structure while calling on D3 for the arc path generation.

Ttheocostaras
87% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a large face using React and D3, with a radially gradient-filled circle for the head, eyes, pupils, and an arc-based mouth. The SVG output is composed via React components, while the mouth shape is generated using the D3 `arc()` function with explicit start and end angles. All shapes are positioned using computed offsets and radii, and the face is centered within a fixed 960-by-500 viewport. The page loads React 17 and D3 v7 from CDNs, and the code demonstrates a minimal but complete React-D3 integration without external data.

AAdamRyanUK
87% match
Loading thumbnail…

Fork of Fork of Hello HTML teste

The visualization displays a single, randomly configured cartoon face composed of SVG shapes, rendered in a React component. The face includes a pink background circle, gradient-filled eyes, a D3-generated arc for a mouth, a rectangular nose, and a specular lighting filter applied to an outer rectangle. Powered by D3 v6, React, and various SVG elements from the provided files, the code uses D3's `arc` function and `Math.PI` for the mouth path, while the `index.js` file maps over a range of one to create the face.

AAkrutiKhurana2103
87% match