Skip to main content
SimilarExport ZIP
100%

Haciendo una cara

✓ Published0🌍 Public
EErandiFlores
Last edited Nov 12, 2021
Created on Nov 11, 2021

This example builds a simple geometric face using SVG primitives composed with the D3.js selection and arc APIs. It centers the composition on a black background, adding a white circular head, a red circular bindi, two black eye circles, and a green smile generated with `d3.arc()` path geometry. The design demonstrates basic SVG attributes like `r`, `cx`, `cy`, and `d` within a translated coordinate system, using D3 v7 to append elements and apply styling.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

A stylized face built entirely from geometric primitives, with a red circular head, two eyes, angular eyebrows, and an arc-based mouth. The example demonstrates fundamental D3 v6 SVG drawing using selection, `arc`, and attribute manipulation within a React framework. It constructs the face from a central circle, offset eye groups, rotated rectangles for eyebrows, and a path generated by the `arc` generator, translating groups to position each feature.

NNino Schelcher
84% match
Loading thumbnail…

Let's make a face

A simple SVG face is drawn with D3 v7, composed of a yellow circular head, two black eyes, and a mouth. The code uses D3 selections and the `arc` generator to create the mouth path, while circles are positioned relative to the SVG's width and height. The example demonstrates common SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`, rendered directly to the SVG canvas in a fixed 960x500 viewport.

AAndrew Babilonia
83% match
Loading thumbnail…

face

This example creates a simple face in an SVG canvas, rendering a green circular head, white eyes with black pupils, a red arc mouth, and two antennae with blue tips. The visualization demonstrates fundamental D3.js v6 selection and attribute methods, using `d3.select` to append shapes and `d3.arc` to generate the mouth path. All elements are positioned relative to fixed coordinates, with no data binding or interaction, showcasing basic SVG construction through D3’s imperative API.

Nnagasai.mandalapu@gmail.com
83% match
Loading thumbnail…

Let´s make a face with D3.js!

A yellow circle with a black outline forms a face, two black circles serve as eyes, and an arc-shaped path creates a mouth. The SVG elements are centered using a translation transform, with eyes positioned at fixed offsets and the mouth drawn via D3's `arc` generator with specified inner and outer radii. The example uses D3 v7’s `select` and `append` methods to build the static composition.

JJpcofre
83% match
Loading thumbnail…

Lets make a face

A face built from basic SVG shapes appears in the center of the canvas, with a yellow circle for the head, two dark eyes, and a semicircular mouth. The example demonstrates how to compose a figure using D3 v5’s `select` and `arc` APIs, positioning elements through translation and coordinates. The code calculates dimensions from the SVG attributes and places the face’s components relative to the viewport center, showing a simple approach to building custom visualizations with D3’s drawing utilities.

Nneydareh
83% match
Loading thumbnail…

Lets Make a Face

This example constructs a cartoon face using D3.js v7 and SVG elements. The face consists of a yellow circular head, two black eyes positioned symmetrically, and a mouth drawn with an arc path using the `arc()` function from D3’s shape module. The SVG canvas is 960 by 500 pixels, with elements centered via a translation. Positions for the eyes and head are calculated from the SVG’s width and height attributes, and the mouth uses specified inner and outer radii with start and end angles. The code imports `select` and `arc` from D3.

Ggabrielribeirob
82% match
Loading thumbnail…

Lets make a face

This example assembles a smiling cartoon face from basic D3 shapes, including a bright yellow circular head, black eyes, and a curved arc mouth. It showcases manual SVG construction through D3 selections and the `d3.arc` generator for the mouth’s path. The face is centered by translating a group element, while eyes are positioned with explicit `cx` and `cy` offsets. The code relies on D3 v5’s `select`, `arc`, and attribute methods, rendering entirely in SVG with no external data source, demonstrating coordinate math and layout composition.

CCasperHogenboom
82% match
Loading thumbnail…

Lets make a face with d3

This example uses d3 v5 to construct a simple, stylized face entirely from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes with circular pupils, rectangular eyebrows, and a semi-circular mouth created with an arc path. The face is centered within an SVG canvas using a transform, with facial feature positions calculated relative to the center. The code relies on d3's `select` and `arc` functions, and demonstrates how to programmatically generate SVG shapes and coordinate them for a recognizable composition.

Ffaquora
82% match