Fork of Don't give a shit face

100%

Fork of Don't give a shit face

✓ Published1🌍 Public

Last edited Mar 15, 2022

Created on Mar 15, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of Don't give a shit face

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.

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

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

90% match

Loading thumbnail…

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

Using D3 v7's `arc` generator, this React-based example constructs a stylized cartoon face composed of modular SVG components for the background circle, eyes, mouth, and teeth. The face is drawn within a centered SVG group using React functional components with configurable props like radius, offsets, and widths. The teeth are rendered as a filled arc with black dividing lines, while the mouth uses an arc path. The code demonstrates component composition and reusable D3 shape generators within a React rendering framework.

Vvipin kumar paikra

89% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized face built from D3.js SVG shapes within a React application. The face consists of a yellow circle for the head, black circles for eyes, and D3 arc paths for the mouth, nose, and eyelid-like accents, all positioned using SVG group transforms. The code uses the `arc` generator from D3 v6 to define the mouth, nose, and eye arcs, while React renders the SVG elements. A CSS class applies red fill to the eye arcs, creating a subtle color contrast against the black strokes.

Tthedatacurious

88% match

Loading thumbnail…

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

This example builds a stylized face from reusable React components, layering a gradient background circle, ellipses for eyes, and a mouth arc into an SVG canvas. The face is centered using a FaceContainer that applies a translation, while D3’s `arc()` generator defines the mouth and tooth shapes. Teeth are rendered as white arcs with black dividing lines, and a linearGradient fills the background. The code uses d3.v7 and React 18, with all coordinates and dimensions passed as props to control facial feature placement.

VVamshisoleti09

88% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple, stylized face built from layered SVG shapes: a yellow circle for the head, two light-blue eyes with black pupils, and a red arc for the mouth. The rendering is driven by a React component hierarchy, with each facial feature defined as a separate reusable component. The code uses D3’s `arc` generator to create the mouth’s curved path, while all positioning relies on SVG attributes within a centered group. The face is hardcoded at 600 by 500 pixels with no interactive behavior or external data source.

SSistema Frenos

87% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example draws a smiling face using SVG circles and an arc path. The face is composed of a yellow circle for the head, two smaller circles for the eyes, and a mouth created with D3’s `arc` generator. The code uses React to render the SVG elements and D3 v7 for the arc path calculation, applying a black stroke to the head and positioning all elements relative to the center of the viewport.

UUzoemeka Okechukwu Innocent

87% match