Don't give a shit face

100%

Don't give a shit face

✓ Published6🌍 Public

Last edited Mar 15, 2022

Created on Mar 14, 2022

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.

AI-generated description

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

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

90% match

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

88% match

Loading thumbnail…

Make a Face with D3 Format

This example presents a stylized, cartoon-like face constructed entirely with D3 and React, where each facial feature is a distinct geometric primitive. The application uses `d3.arc()` to define and render the curved mouth and eyes, alongside SVG `circle`, `ellipse`, and `line` elements for the head, pupils, and expressive eyebrows. The code sets up a fixed 960x500 SVG canvas, and the face is centered using a `transform` translation. It demonstrates how to mix D3's path generation with React's component-based markup to create a playful vector illustration, with hardcoded coordinates rather than external data.

SShishiraRudrabhatla

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a stylized face using D3.js, with each facial feature—eyes, nose, and mouth—composed of geometric elements arranged on an SVG canvas. The face is drawn programmatically using D3’s selection and shape APIs, such as `d3.arc` for the mouth and `d3.line` for the eyebrows, all within a React framework. The visualization demonstrates how D3’s data-binding and attribute manipulation can construct a recognizable figure from simple primitives, rendering directly to SVG via the `d3.select` and `append` methods. The face’s proportions and placement are fixed, showing a static composition rather than interactive behavior.

Nnouralkhoury

86% match

Loading thumbnail…

Face using HTML, CSS, SVG

This example renders a stylized face as an SVG graphic using React and D3. It uses D3’s arc generator for the mouth, along with HTML and CSS for layout and styling. Circles are used for the head and eyes, while a rotated rectangle forms the nose, all positioned within an SVG canvas. The code is a bare-minimum starter demonstrating how to combine React’s declarative JSX with D3’s shape utilities for custom data visualization. The face is centered on a fixed 960×500 viewport.

LLakshyaSatpal

86% match

Loading thumbnail…

Lets Make a Face with D3 Format

This example uses D3 v5 to render a simple cartoon face as an SVG. The face is constructed from primitive shapes—a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc for the mouth—all centered within a 900x500 viewport. The code leverages D3’s `select` API to access the SVG element and `arc` to generate the mouth’s path, with positions and sizes controlled by explicitly defined numeric constants. No external data source is used; the visualization is purely procedural, built directly through D3’s imperative SVG manipulation within a React context.

227-12-95

86% match

Loading thumbnail…

Data Visualization

This example renders a smiling face in SVG using React and D3.js, with geometric shapes for the head, eyes, irises, nose, and mouth. The code constructs the mouth and nose as arcs via `d3.arc`, while the remaining features are simple circles. All elements are positioned relative to the center of a 960×500 viewport using SVG’s `transform` attribute, and React drives the component structure. The result is a static, stylized character built entirely from vector primitives and filled with solid colors.

FFutileGameDev

85% match

Loading thumbnail…

Cool Face

This example renders a smiling face using React and SVG, with the D3 shape API’s `arc()` function generating the mouth path. The face consists of a yellow circle with a black stroke for the head, two white eye circles positioned symmetrically, and a curved mouth created from an arc with inner and outer radii. All elements are centered via a translated group, and the layout uses hardcoded dimensions (960×500) without any data binding or interactive behavior.

EEddie Musabula

85% match