Skip to main content
SimilarExport ZIP
100%

Fork of Don't give a shit face

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

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.

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 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
94% match
Loading thumbnail…

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

A React and D3 v7 composition builds a smiling face, showing how reusable SVG components combine through props. The `Face`, `Eyes`, `Mouth`, and `Teeth` components use D3's `arc()` generator to create concentric shapes, while a `linearGradient` fills the background circle in green-to-yellow. A static set of line elements renders teeth, with prop-driven dimensions controlling eye radius, mouth width, and offsets.

CCHANDU BHARGAVI
86% match
Loading thumbnail…

Fork of Hello HTML

A stylized face built from SVG shapes rendered through React components, with circles for the head and eyes and a D3 arc path forming a curved mouth. The code uses React 17 to manage the SVG element tree, while `d3.arc()` computes the mouth’s path geometry between specified angles and radii. A single translated group positions all shapes relative to the canvas center, and React’s declarative composability structures the LargeCircle and Eye subcomponents. The rendering approach is entirely vector-based, with no external data beyond the hardcoded geometry parameters.

AAndi Oneto
86% match
Loading thumbnail…

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

An animated face built with D3.js v5 and React shows a red circle head with eyes, eyebrows, and a mouth. The eyebrows transition up and down in a looping motion using `transition.duration` and `transition.attr`. Rendered as SVG, the code uses D3’s `select` and `arc` to construct the mouth path, with eye and brow shapes positioned via translation attributes. The face is centered on a 960x500 SVG canvas with no external data.

DDarren-20
85% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of "Let's Make a Face" renders a cartoon face in SVG with a gradient background. The face’s eyes, mouth, and teeth are constructed as separate React components and positioned using configurable parameters. The code relies on D3’s `arc` API to generate the mouth and teeth paths, while the overall layout is composed with React’s component model. The example uses D3 v7 and React 18 to create a static, smiley-like visual with hard-coded numeric values for shape placement.

Aaliciaadj
85% match
Loading thumbnail…

Fork of Smiley Face Part III

This fork of Smiley Face Part III draws a stylized face as an SVG using React and D3. It renders a red circle for the head, two black eyes, a horizontal line for a nose, and a curved mouth path created with D3’s `arc()` generator. The code uses React components to structure the SVG elements and D3 v5 to compute the mouth’s arc geometry. Eye positions and radii are defined as constants, while the head’s size derives from the viewport height.

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