Making of a SVG

100%

Making of a SVG

✓ Published0🌍 Public

Last edited Dec 22, 2022

Created on Dec 21, 2022

This example generates a grid of eighteen cartoon faces, each rendered as a collection of SVG shapes including a yellow background circle, black eyes, and a smile. The faces are composed using React components like `Face`, `BgCircle`, `Eyes`, and `MouthArc`, with the latter leveraging the `d3.arc()` API to draw the mouth path. Randomized eye radius, mouth width, and mouth radius give each face a distinct expression. The `FaceContainer` wraps the SVG elements, translating the coordinate system to center each face within its designated width and height.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

SVG face w/ React

A grid of eighteen randomly generated cartoon faces fills the screen, each with a yellow head, two eyes, and an arc-shaped mouth. The example demonstrates reusable React functional components, including `Face`, `Eyes`, and `Mouth`, which render SVG elements. It uses the `d3.arc` API to define mouth paths, `d3.range` to generate the grid, and random values for each face's dimensions. The `FaceContainer` component structures the SVG scaling, while `ReactDOM.render` mounts the application without animation or interaction.

AAnthony Ynami

92% match

Loading thumbnail…

Text

This example generates a grid of 18 cartoon faces, each rendered as an SVG composed of a yellow circle, two eyes, and an arc-shaped mouth. The faces are created using React components and D3’s `arc` generator to define the mouth path. Randomized properties—stroke width, eye offset and radius, mouth width and radius—produce varied expressions. Each face is centered within its own 160×160 SVG canvas, with the grid laid out via `d3.range` and React’s `map`.

Hhdquang99

91% match

Loading thumbnail…

SVG Face part （HTML)

A grid of 18 simple SVG faces, each with randomized eye placement, eye size, and mouth dimensions, demonstrates the flexibility of React components for generating data-driven graphics. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` elements inside a `FaceContainer` that handles the SVG coordinate transform. D3's `arc` function generates the mouth path, while `range` from d3 creates the array of faces. Each face is rendered through ReactDOM with unique random properties, showcasing reusable SVG primitives within a React framework.

RRoma

91% match

Loading thumbnail…

Hello HTML

This example displays a grid of 18 randomly generated cartoon faces, each rendered as an SVG with a yellow circular background, two eyes, and a mouth. Built with React, it uses D3’s `arc` API to shape the mouth path and the `range` utility to create the face instances. Each face’s dimensions, stroke widths, and feature offsets vary randomly per render, showcasing reusable component composition. The SVG output is wrapped in a `FaceContainer` that centers the group, while CSS hides page overflow for a clean, full-viewport presentation.

Iiy105121

90% match

Loading thumbnail…

Smily face part 1

This example shows a grid of five cartoon faces rendered as yellow SVG circles with black outlines, each containing two eyes and an arc-shaped mouth. The faces are generated using React components that compose nested SVG elements, with d3.v7 providing the arc generator for the mouth shape. Each face’s eye radius is randomized using `Math.random()`, producing slight variation across the grid. The `FaceContainer` component applies a translation transform to center all facial features within each SVG canvas.

Aa1153724

90% match

Loading thumbnail…

Face Making

A grid of randomly generated cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and an arc-based mouth. The example demonstrates React components composing SVG shapes, where each face is built from `<circle>` elements and a D3 `arc` path for the mouth. Eye size varies per face via `Math.random()`, while D3's `range` generates the 24 faces in the layout, using d3.v6 and React 16.13.1.

DDaniel Russell-Brain

90% match

Loading thumbnail…

let's make a face

A grid of eighteen cartoon faces fills the screen, each rendered as a yellow SVG circle with black outlines, two eyes, and a curved mouth. The faces vary randomly in eye radius and mouth thickness, creating playful individual expressions. The example uses React components to compose each face from reusable parts, with the mouth path generated via `d3.arc` and the grid created by mapping over `d3.range`.

Bbdfee

90% match

Loading thumbnail…

Hello HTML

This example shows a grid of 18 cartoon faces, each rendered with slightly randomized eye and mouth sizes, creating a playful sense of variety. It uses React components to compose the face from separate SVG shapes: a yellow background circle, two eyes, and an arc-based mouth. The code leverages D3’s `arc` API to generate the mouth path, and React’s `range` utility from D3 to create the array of faces. Rendering is done entirely in SVG within a React application.

MMyGitUserName-dh

90% match