Fork of Daruma dolls

100%

Fork of Daruma dolls

✓ Published0🌍 Public

Last edited Feb 14, 2024

Created on Feb 14, 2024

Three Daruma dolls face the viewer, each composed entirely from layered ellipses that build up their bodies, faces, and features like eyes, lips, and mustaches. The dolls differ in color and expression, showcasing how simple geometric shapes can form recognizable characters. The code uses D3’s `select` and the general update pattern with `join` to create an SVG canvas, then binds an array of ellipse properties such as center coordinates, radii, and fill colors to render the static composition.

AI-generated description

Daruma dolls

Inspiration - https://www.freepik.com/free-vector/daruma-doll-japanese-doll-isolated-vector-illustration_16294597.htm

Ellipse - https://gist.github.com/arcox80/970ea216ebb1c2136cf3604ea0e814df

MIT Licensed

Similar vizzes

Loading thumbnail…

Daruma dolls

Three Daruma dolls stand in a row, each composed of layered ellipses for the body, face, eyes, eyebrows, nose, lips, and mustache, rendered in shades of red, white, and black. The code uses D3’s `select` and data join pattern to create an SVG, then binds an array of ellipse objects—containing `cx`, `cy`, `rx`, `ry`, and `fill` properties—to draw each shape. The dolls show variations in mouth and mustache styling, with a soft yellow background.

AAkanksha

88% match

Loading thumbnail…

Fork of Fork of Fork of d3js

A smiling yellow face with blue eyes and eyebrows sits centered in an SVG canvas, built using D3 v5 selections and the `arc` helper. The eyebrows animate upward and back down over two seconds via chained `transition` calls, while the mouth is drawn as a half-circle arc. The example demonstrates basic SVG shape composition, coordinate transforms, and timed animations using D3’s selection framework.

Mmuslimaaliyeva

73% match

Loading thumbnail…

Fork of Fork of Fork of Fork of d3js

This example renders an animated face built from SVG primitives, including a yellow circular head with eyes, eyebrows, and an arc-based mouth. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle blinking or surprised expression. The code imports `select` and `arc` from D3 v5, uses `d3.arc()` to define the mouth’s path, and positions all elements relative to a centered `<g>` group. The SVG canvas is 960 by 500 pixels, with a blue stroke on the head and no external data source.

Mmuslimaaliyeva

72% match

Loading thumbnail…

Fork of D3.js Face

A cheerful cartoon face rendered in SVG uses D3.js v7 to draw concentric arcs and circles. The face includes a yellow head, two black eyes, rectangular eyebrows, and a mouth built with the `d3.arc` shape generator. The eyebrows animate vertically through chained `transition` calls, moving down and back up over two seconds each. The code imports `select` and `arc` from D3 and uses SVG attribute manipulation to position elements relative to the viewport center.

YYuqi Tang

72% match

Loading thumbnail…

Fork of Fork of Face with d3.js!

A smiling face built with d3.js renders as a yellow circle with elliptical eyes and arched eyebrows, all drawn as SVG shapes on a 960 by 500 canvas. The code uses d3.select and append to construct the face, while d3.arc defines the curved mouth and eyebrow paths. Eyebrows and eyes are positioned with SVG transform translations, and the face is centered using a group element. This example demonstrates basic d3.js v7 shape generation and SVG manipulation in a static, data-free visualization.

Mmukundakrishna.r@gmail.com

72% match

Loading thumbnail…

Fork of D3 face

This demo builds a cartoon face from basic SVG shapes—a yellow circle for the head, black circles for eyes, and an arc for the mouth—using D3 v7’s `select` and `arc` helpers. The eyebrows are rectangles that animate up and down via chained `transition().duration(2000)` calls. All elements are grouped and centered within an SVG using static transform attributes, with no external data source.

Wwieswies

72% match

Loading thumbnail…

Fork of Fork of Face with d3.js!

A grid of five stylized smiley faces demonstrates how D3.js v7 can assemble SVG shapes from local data. Each face uses circles for the head and eyes, rectangles for eyebrows, and an `arc()` path for the mouth, with its start and end angles adjusted per expression, such as happy or angry. Distinct decorative elements—ears, a beard, or hair—are conditionally appended to individual faces based on the data’s `expression` field, while transformations like `scale()` and `skewX()` modify the eyebrow geometry. The example imports `select` and `arc` from the D3 library, which is loaded via UNPKG, and renders entirely through SVG elements created dynamically.

Mmukundakrishna.r@gmail.com

72% match

Loading thumbnail…

Fork of Fork of d3js

A cheerful yellow face with black-outlined features is rendered as an SVG in D3 v5. The animation lifts the rectangular eyebrows upward and then returns them to their original position over a four-second cycle, using chained `transition()` calls on a grouped element. The face is composed of circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within a fixed 960x500 SVG viewport.

HHeisenberg

71% match