Funny Face by TL

100%

Funny Face by TL

✓ Published0🌍 Public

Last edited Feb 22, 2023

Created on Feb 22, 2023

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

This example draws a cartoon face using D3.js version 5 and SVG. It renders a yellow circular head with green hat and ears, featuring eyebrows, white eyes with brown pupils and highlights, black eyelashes, and a red tongue within a pale mouth. The face also includes a moustache (implied) and is centered via a translated group. The code uses D3 selections and shape methods like `append`, `attr`, and `arc` to compose the illustration, with hardcoded pixel coordinates for precise placement.

AI-generated description

Creating a funny face

MIT Licensed

Similar vizzes

Loading thumbnail…

Funny Face

A cartoon face rendered as an SVG with React and D3 shows a symmetrical smiley with distinct eyes, pupils, a nose, and a tongue. The face’s head is a gold circle with a brown stroke, while the left eye is pink and the right eye is white, each with differently positioned pupils. The code uses D3’s `arc` generator to create the mouth path, and React components structure each facial feature. All elements are positioned within a single SVG group transformed to the center of a 1000×500 canvas.

AAkrutiKhurana2103

86% match

Loading thumbnail…

Funny Face with d3

A yellow circle with a black outline serves as a face, featuring two eyes, animated eyebrows, and a mouth drawn as a path. The eyebrows move up and down repeatedly using chained `transition()` calls with a 2000-millisecond duration. The example uses D3 v5's `select`, `arc`, and `transition` APIs, rendering everything as SVG elements within a fixed 960×500 viewport. The `arc` generator creates the mouth shape with specified inner and outer radii and angular extents.

CChocoOrange

86% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a cartoon face entirely with SVG shapes. The code builds a yellow circle for the head, then appends circles for eyes and rectangles for eyebrows, all positioned with fixed pixel offsets. A mouth is created using the `d3.arc()` generator with custom inner and outer radii and angle values. The visualization demonstrates basic D3 selection, SVG element creation, and the arc API for path generation.

Llololoandlalala

85% match

Loading thumbnail…

Let's Make a Face with D3.js!

This example demonstrates how to construct a simple cartoon face using SVG primitives created with D3.js v5. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and a path generated by the `arc` function for the mouth. The code leverages D3’s selection and creation API, including `select`, `append`, and attribute setting, while a chained `transition().duration(2000)` animation repeatedly moves the eyebrows up and down. The face is centered within an SVG canvas, with styling provided by an external CSS file.

Iimmanentdomain

85% match

Loading thumbnail…

Lets Make a Face!

This example draws a simple cartoon face using D3.js version 5 and SVG. It renders a yellow circle for the head, two black ellipses for eyes, and an empty path for the mouth. The code uses D3’s `select` and `attr` methods to position each shape based on the SVG’s fixed width of 960 and height of 500. All elements are placed with relative coordinates, such as `width/2.5` for the left eye, demonstrating basic geometric composition through SVG primitives.

Vvpruden1

85% match

Loading thumbnail…

Lets make a face with D3.js!

This example constructs a cheerful cartoon face entirely from SVG shapes using D3.js v5. It shows a yellow circle head, black eyes with white irises, red cheeks, a short nose line, and two arc-based mouth segments. The code explicitly positions each shape using `svg.append`, relying on arithmetic for coordinates and the D3 `arc()` generator to form the smile. All rendering happens in SVG with a light blue background.

Ssslee8778960

85% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a cartoon face in an SVG canvas using D3.js v5. A yellow circle forms the head, with blue circles for eyes and a black-outlined path for a mouth, created via D3’s `arc` helper. The left eye animates downward over two seconds using the `.transition().duration(2000)` API. The face is centered by translating a group element, and the SVG dimensions are read dynamically from the markup.

Jjmeroth

85% match

Loading thumbnail…

Make face with d3

This example draws a simple cartoon face using D3 v5 in an SVG container. The code creates a yellow circular head, two black eyes with fixed spacing, and a mouth path built with the `d3.arc` generator. The face is positioned relative to the SVG’s width and height attributes, and basic styling is applied directly through attributes and CSS. The rendering approach uses basic SVG shapes and a path, with no data binding or interaction.

MMasoumeh Bakhtiariziabari

85% match