Ju Lian Made with JS SVG and D3

100%

Ju Lian Made with JS SVG and D3

✓ Published0🌍 Public

Last edited Dec 7, 2021

Created on Aug 19, 2021

This example shows a stylized cartoon face built entirely with SVG shapes, including ears, eyes, a nose, and a mouth, arranged symmetrically around a central pink circle. The scene is rendered using React components that define each facial feature as SVG primitives like circles, ellipses, and a path. The mouth’s arc is generated with the `d3.arc()` API from D3 v7, while positioning and styling rely on React’s JSX properties such as `cx`, `cy`, `rx`, and `ry`. The D3 library is loaded separately, and all coordinate values are hardcoded constants in the script.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build an animated face from basic SVG shapes within a React framework. The code draws a yellow circle as the face, adds two eyes with matching eyebrows, and constructs a mouth using the D3 `arc` path generator with specific inner and outer radii. Eyebrows animate via chained `transition()` calls, moving upward and back down over a two-second duration. The SVG canvas is 960×500 pixels, with all elements positioned relative to a centered group using translation transforms.

Llujinxuan-fang

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

81% match

Loading thumbnail…

Ju's smiley face

This example shows a cheerful, cartoon-like smiley face built entirely with SVG shapes: a yellow circle for the face, two smaller circles for eyes, and a D3 arc path for the mouth. The code uses React to compose the SVG elements declaratively, translating the origin to the canvas center to simplify positioning. It leverages the D3 `arc` method with method chaining to generate the mouth’s path geometry, calculating its inner and outer radii and angular range. The face is rendered within a 960×500 viewport, with a black stroke outlining the main circle.

JJulia Múgica

81% match

Loading thumbnail…

Let's make a face with D3.js!

This example creates a simple cartoon face out of SVG shapes. Three circles—two small ones for eyes and a larger one for the face—are drawn on a grey background. The face is rendered using D3.js version 5’s selection and styling methods, with the `d3.select` API applying a background color to the SVG element. The code relies on standard SVG circle elements with fill and stroke attributes to construct the visual.

Jjcintolo

81% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to construct a simple cartoon face using D3.js v6 within a React framework, rendered as SVG shapes. It draws a yellow circular head with black eyes and a smiling mouth using the `d3.select` and `d3.arc` APIs. The code reads the SVG’s width and height attributes, positions the face elements relative to the center, and uses an arc generator to create the mouth path. The visualization demonstrates basic shape manipulation and layout without any external data source, relying purely on hardcoded constants for spacing.

Ffc248017

81% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a grid of cartoon faces, each with randomly sized eyes, rendered as SVG in a React application. It demonstrates the use of D3 v6’s `arc` generator to construct the smiling mouth path, while React components compose the face from reusable parts like background circles and eye pairs. The data is generated with `d3.range`, and each face is positioned by a centered `<g>` transform. The rendering approach combines D3’s geometry utilities with React’s declarative SVG elements.

XXinya Gao

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

80% match