Teste do SVG

100%

✓ Published0🌍 Public

Last edited Jul 16, 2019

Created on Jul 10, 2019

Forked from Bowl Fruit - General Update Pattern

This example draws a simple geometric face in an SVG canvas using D3 v5. It constructs a yellow circle as the head, two smaller circles for the eyes, and a mouth created with D3’s `arc` shape generator. The code uses `select` and `append` from the D3 API to build the SVG hierarchy, positioning elements relative to a centered group. The face is rendered purely through SVG primitives with no external data source, focusing on basic shape composition and coordinate transforms.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a simple cartoon face entirely from SVG shapes. It draws a yellow circle for the head and two black circles for eyes, with positions calculated relative to the SVG’s width and height. The code imports `select` and `arc` from D3, though only `select` is used to append and style the elements. Eye spacing and vertical offset are defined as constants, demonstrating how D3’s attribute chaining builds static visuals with minimal data.

Jjbrauckman

86% match

Loading thumbnail…

Face

This example shows a simple, stylized face rendered in SVG. A yellow circle forms the head, two black circles serve as eyes, and a black arc creates a smiling mouth. The code uses D3’s `select` and `arc` functions to construct the shapes, setting coordinates and radii relative to the SVG’s width and height. The rendering uses D3 v5 and outputs to SVG, with the mouth path created using the `arc` function’s parameters for inner and outer radius and start and end angles.

Ddvyachkil

86% match

Loading thumbnail…

Lets make a face

This example shows a yellow circle face created with SVG, built using D3 v5 selection and attribute methods. The code appends circles to an SVG canvas, setting radius, position, fill color, and stroke properties directly through `.attr()`. It uses `d3.select` to target the SVG and reads its width and height attributes to center the face. The partially completed code includes a commented placeholder for a left eye, and the page loads D3 from a CDN with a separate stylesheet that hides overflow.

DDaniel Piqué

86% match

Loading thumbnail…

Let's make a face with D3.js

This example draws a simple yellow face in an SVG canvas using D3.js v5. It centers a circle for the head, then positions two smaller circles for eyes and an arc-generated path for a mouth. The code uses D3's `select` to target the SVG element, `attr` for setting dimensions, and the `arc` API from D3's shape utilities to define the mouth path.

BBryan Liu

85% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a simple cartoon face entirely with SVG shapes. It shows a yellow circle for the head, two black-outlined circles for eyes, and a curved mouth path, all centered within a 960×500 SVG canvas. The code exercises core D3 selections and the `arc` generator, computing eye spacing and mouth angles programmatically. Raw SVG attributes like `r`, `cx`, and `stroke-width` are set directly, while a group element translates all features to the canvas midpoint. The mouth’s path is produced by the `d3.arc` generator with specified inner and outer radii.

BBaxinho

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

85% match

Loading thumbnail…

d3

This example uses D3.js (v7) to draw a simple yellow face on an SVG canvas. The visualization shows a circle for the face, two smaller black circles for eyes, and an arc-shaped path for a mouth. The code uses D3's `select` and `append` functions to build the SVG elements, and the `arc` function to generate the mouth path with specified inner and outer radii and angular range. The entire composition is centered on the canvas using a group element with a translate transform.

HHeet Bhatt

85% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aadelgrosso

85% match