Fork of SVG Face

Fork of d3js

This example shows a stylized yellow face with eyes, eyebrows, and a mouth rendered as SVG shapes inside a 960-by-500 viewport. The eyebrows animate up and down using chained `transition()` calls with `duration(2000)`, while the mouth is drawn with `d3.arc()` using specified inner and outer radii and angle spans. The code imports `select` and `arc` from D3 v5, positions elements via `attr('transform')` with translations, and applies CSS styles from an external stylesheet. The face centers on a circle with black stroke, and all elements are grouped under a translated `<g>` container.

HHeisenberg

Fork of d3js

HHeisenberg

Fork of D3 Face Making

A smiling yellow face is drawn in SVG with D3 v5, featuring circular eyes and a curved mouth built from an arc path. Brows animate by moving downward and upward over two successive two-second transitions, each triggered via `transition.duration` on a group. The code constructs the face using `d3.select`, `d3.arc`, and positioned groups, with coordinates calculated from the SVG’s height and width. A static yellow background circle with a black stroke forms the head, while all shapes are appended directly to the SVG.

SShishiraRudrabhatla

Fork of Create a face with d3.js!

A yellow SVG face with black-outlined eyes, eyebrows, and a smile is centered in a 960×500 viewport. D3 v7 draws the circular head and features using `selection.attr` and the `arc` generator for the mouth. The eyebrows animate vertically through chained `transition` calls with `duration(2000)`, moving down 50 pixels and back, demonstrating two-way motion sequencing.

SSilverOwl1112

Fork of Create a face with d3.js!

A yellow face rendered in SVG centers a circular head, two eyes, raised eyebrows, and a smile. Built with D3 v7, the code uses `d3.select` and `d3.arc` to construct the shapes. The eyebrows animate upward and back down over two seconds via chained `transition().duration()` calls. Static data values define positions and sizes for facial features.

44charan4

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

A yellow SVG face is drawn with D3.js v5, featuring two large eyes and an open mouth rendered as an arc path. The face uses `d3.select` and `d3.arc` to construct the shapes on an SVG canvas. The code includes a commented-out animated eyebrow section that would use `transition` to move eyebrows up and down, though the active version shows only static features. All elements are positioned using SVG transform attributes, with the face centered on a 960×500 viewport.

Jjlspangl

Mmukundakrishna.r@gmail.com

Fork of Fork of Face with d3.js!

This example builds a stylized cartoon face in SVG using D3 v7, rendering a yellow circular head, elliptical eyes, curved eyebrows, and a smiling mouth. The face is centered by translating a group element to the middle of the viewport, with shapes positioned using absolute pixel offsets. The code imports `select` from D3 and uses the `arc()` generator to create the eyebrow and mouth paths, while eye spacing and radii are defined as constants. All visual elements are drawn directly into an SVG canvas without external data.

Fork of D3 Face

A yellow circular face with black features, including eyes, eyebrows, and a frown, is rendered in SVG. The eyebrows animate upward and then return to their original position using a chained `transition.attr` in D3 v7. The code builds the face using `select`, `arc`, and `append`, with a `g` element centered via a transform. Static constants define the eye spacing, offsets, and mouth arc, all drawn within a 960 by 500 SVG canvas.

AAkhilaSiripurapu