Skip to main content
SimilarExport ZIP
100%

preetham

✓ Published0🌍 Public
VVenkata Sai Preetham
Last edited Jun 18, 2022
Created on Jun 17, 2022

A face assembled from D3 arc paths and React SVG elements sits on a pink circular head with a wide black stroke. Blue elliptical hats, partially overlapping, crown the figure, while green nose arcs, wheat pupils, and dark red eye circles define the expression. The code uses `d3.arc` for the brows, nose, and mouth, rendered through React components that apply transforms for positioning. A steel-blue page background surrounds the face, which is built from a mixture of D3 shape generators and custom React component functions.

AI-generated description

I've forked 'Half way towards a smiley face.' to see if I can REMEMBER how to build the smile...

MIT Licensed

Similar vizzes

Loading thumbnail…

preetham

A smiling face rendered with SVG shapes in D3.js animates its eyebrows in a looping motion. The face consists of a pink circle, two black eyes, and an arc-based mouth drawn with the `arc` generator. Using chained `transition` calls with two-second durations, the eyebrows repeatedly shift upward and return to their original position. The code constructs all elements via D3 selections and attribute manipulation, while the animation relies on D3's built-in transition system, visible in the JavaScript bundle.

VVenkata Sai Preetham
85% match
Loading thumbnail…

Let'd make a face with D3.js!

A smiling face is drawn with SVG shapes, including a yellow circle, eyes, and a mouth created using `d3.arc()` with a custom inner and outer radius. The eyebrows are animated with `transition().duration(2000)`, moving up and down over two seconds using chained transitions on their `transform` attribute. Built with D3 v5 in a React framework, the visualization uses `select` and `arc` imports from the D3 library, with all elements appended to a centered `<g>` group within an SVG canvas of 960 by 500 pixels.

Ppreetham
80% match
Loading thumbnail…

Fork of Praneeth

A geometric clown face rendered with SVG primitives, including circles, ellipses, rects, and paths, is drawn inside a React component using D3's arc generator. The face features a white circular head, red nose and blush, stylized eyes with dashes, and a cunning mouth arc. Red cap-like arcs are rotated and positioned at the top. All shapes are composed with absolute coordinates and transforms, using D3 v5 and React 16.9, with no external data source.

PPran6728
79% match
Loading thumbnail…

Face by priya

This example renders a stylized cartoon face in SVG using React and D3. It shows a symmetrical composition of geometric shapes, including a pink circular head, two differently colored eyes with pupils, eyebrows, an elliptical nose, and a mouth created with a D3 arc generator. Additional D3 arcs form layered eyelids and ears, while colored lines and strokes add decorative details. The code uses React components with JSX, D3 v7’s `arc()` function for curved paths, and absolute positioning via SVG transform attributes to place elements around the center of the canvas.

PPriyaEnuganti
79% match
Loading thumbnail…

Face

A stylized face composed of SVG shapes is centered on a canvas, with a sky-blue circular head outlined in black. The face features two dark eyes with white highlights, eyebrows drawn as arcs, and a curved mouth, all constructed using D3's `arc()` generator. Built with React and D3 v6, the code uses `ReactDOM.render` to render the SVG elements, employing `ellipse`, `circle`, and `path` components with explicit coordinates and stroke widths.

RRajeevMukhesh
79% match
Loading thumbnail…

D3

A smiling face built from SVG shapes, rendered with React components and D3’s `arc` generator for the mouth and nose. The face is centered via a `g` transform, with a yellow background circle, two eye circles, and an outlined smile path. D3 v7 computes the arc paths, while React 17 manages the component hierarchy and SVG rendering. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting size or offset props to control the face’s geometry.

SShasvathan Pathmanaban
79% match
Loading thumbnail…

Let'd make a face with D3.js!

This example renders a yellow, smiley face in SVG using D3.js v5 within a React framework. It uses `d3.select` to append and transform `circle`, `rect`, and `path` elements, with `d3.arc` defining the mouth. The eyebrows animate up and down via chained `transition().duration()` calls, while the static face elements are centered using SVG `transform` attributes. The data is hardcoded, and rendering relies on SVG shapes rather than external datasets.

Ppreetham
78% match
Loading thumbnail…

face with d3.js!

This example shows a stylized face built with React and D3, rendered as SVG elements such as circles, ellipses, rectangles, and a path for the mouth. The code uses D3’s `select` to append and style each shape, and the `arc` helper to generate the mouth’s curved path. Static SVG markup provides additional decorative shapes, while the React entry point attaches the D3-generated face to the scene.

66264kusuma@gmail.com
78% match