SVG Starter

100%

✓ Published1🌍 Public

Last edited Apr 22, 2021

Created on Apr 22, 2021

This example displays a simple, static cartoon face composed of basic SVG shapes: a yellow circle for the head, two dark circles for eyes, two rectangles for eyebrows, and an arc path for the mouth. Built with D3.js 6.7.0, the code uses `d3.select` to append elements to an SVG canvas and `d3.arc` to generate the mouth’s path. The layout is hard-coded using pixel coordinates. The visual demonstrates fundamental SVG and D3 shape creation without any data or interaction.

AI-generated description

Learning some basics of svg and d3.js.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG face

This example shows a cartoon face built from SVG primitives, with a yellow circular head, two black eyes, and a curved mouth rendered using D3’s `arc` generator. Eyebrows are added as rectangles positioned via SVG transforms. The code uses D3 selections to create and style elements, relying on hardcoded dimensions from the SVG attributes rather than external data.

Uuttam-vish

87% match

Loading thumbnail…

face_d3_start

This example shows a simple cartoon face drawn with SVG, featuring a yellow circular head, two black eyes, and a curved mouth. The face is centered within a 960×500 SVG canvas. The code uses D3 v6’s `select` and `arc` APIs to construct the shapes, with the mouth built via an arc generator specifying inner and outer radii and angular extents. Colored fills and strokes are applied through SVG attributes, while a CSS rule removes page margins for full-bleed rendering.

Jjyotigpt790

87% match

Loading thumbnail…

HTML Starter

This example creates a simple cartoon face in SVG using D3 v5, built within a React framework. It draws a large yellow circle as the face, two black circles for eyes, and a smile-shaped arc for the mouth. The code uses D3’s `select`, `attr`, and `append` methods to construct the SVG elements, and employs D3’s `arc` function to generate the mouth path with specified inner and outer radii and angles. Data is hardcoded; no external dataset is loaded.

IIsmael Martinez

86% match

Loading thumbnail…

Hello

This example displays a simple, stylized face: a yellow circle for the head, two black circles for eyes, and a quarter-circle arc for the mouth. The SVG is built using D3 v6 selection and append operations, with positioning handled via SVG attributes. The mouth is generated using d3.arc, which creates a path based on inner and outer radius and angle parameters. The code uses D3’s selectors and the arc function on an empty 960x500 SVG canvas.

LLara Issa

86% match

Loading thumbnail…

Face w/ D3.js

This example renders a simple cartoon face using D3.js v7 in an SVG container. A yellow circle forms the head, with two black circles for eyes and a D3 arc path creating a mouth that spans a quarter of a circle. The code uses D3 selections to append and style elements, and the `arc` generator from the `d3` module to compute the mouth’s path data. The SVG dimensions are read directly from the markup, and styles are applied via an external CSS file.

Vvishnu-varun

86% match

Loading thumbnail…

Using SVG and D3

This example uses SVG and D3 to draw a simple, static face composed of a yellow circle, two eyes, two animated eyebrows, and a mouth arc. The right eyebrow moves up and down via chained transition calls, each lasting two seconds. The code selects the SVG element with `d3.select`, appends and positions shapes with `.attr`, and constructs the mouth using D3’s `arc` generator. The scene is centered by translating a group element, and the SVG background is set to red through the D3 style method.

JJokerhan88

86% match

Loading thumbnail…

Lets make a face with D3.js

This example shows a simple yellow cartoon face built from SVG shapes in a 960×500 viewport. D3.js (v3) appends a large yellow circle for the head and two smaller black circles for the eyes, then positions a mouth path using the `d3.svg.arc` API with an inner and outer radius. All elements are selected via `d3.select` and placed relative to the SVG width and height attributes, with eye spacing and offset defined as numeric constants.

Rrajeev-2020

86% match

Loading thumbnail…

HTML Starter

This example shows a simple smiling face drawn as SVG shapes: a yellow circle for the head, a black circle for the left eye, and an arc for the mouth. The visualization presents static geometric elements without any data input or interaction. The code uses D3 v5’s `select` to target the SVG container, `append` to create circles, and the `arc` generator to produce the curved mouth path. The viewBox is set via the SVG’s width and height attributes, with the face centered at (400, 450). The React framework is referenced in the metadata, but the actual implementation relies on plain HTML and JavaScript with D3.

KKashikoma301

85% match