Skip to main content
SimilarExport ZIP
100%

First program

✓ Published0🌍 Public
GGOKULKRISHNA22
Last edited Oct 21, 2021
Created on Oct 19, 2021
Forked from Hello HTML

This example shows a simple cartoon face rendered with React and D3.js in an SVG. It uses three reusable components—BackgroundCircle, Eyes, and Mouth—to compose a yellow circle with black outlined eyes and an arc-based mouth. The components accept props to control dimensions like radius, eye offset, and stroke width. D3’s `arc()` API generates the mouth path, while React handles component structure and SVG rendering. The face is centered via an SVG `<g>` transform, and all styling is applied through inline SVG attributes.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example renders a simple cartoon face using React components and SVG. It shows a yellow circle face with two eyes and a mouth, centered on a 960x500 canvas. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, which use d3’s `arc` to generate the mouth path. The face is composed declaratively via React props in `Face.js`, with `FaceContainer` providing the SVG root and coordinate transforms. The main app sets dimensions and offsets directly in JSX, targeting plain HTML via ReactDOM.

Aask4jm
90% match
Loading thumbnail…

SVG Fundamentals

This example shows a stylized cartoon face built entirely from SVG primitives, including a yellow circle for the head, two black eye circles, and a curved mouth generated with d3’s arc generator. The face is composed through reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which accept numeric props for positioning and sizing. The FaceContainer wraps all elements inside an SVG group that translates to the canvas center, while the mouth’s path is computed using d3.arc with specified inner and outer radii and angular ranges. The final rendering relies on React 18 and d3.v7, producing a static visualization without interaction or data binding.

SSerind Joshua McCue
89% match
Loading thumbnail…

Hello World!

This example creates a smiling face using React and SVG, with a yellow circle for the head, two eyes, and a mouth shaped as an arc. The face is assembled from modular components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—each defined as separate React components. It uses D3’s `arc` generator to construct the mouth path and demonstrates SVG rendering within a React framework. The composition is centered and scaled via transform attributes, with D3 version 7 and React 16.9 as the underlying libraries.

MMaurice Huang
89% match
Loading thumbnail…

Hello HTML

This example renders a smiling face composed of SVG shapes, including a yellow background circle, two eyes, and a mouth created with a D3 arc path. The face is built from reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that accept props for positioning and sizing. The FaceContainer establishes an SVG coordinate system centered at a specified point, while D3’s `arc` generator defines the mouth’s curved shape. The visualization demonstrates how React and D3 can be combined to create declarative, parameterized graphics.

Ttatpiras
89% match
Loading thumbnail…

face

A simple cartoon face is drawn using React and SVG, with a yellow circular background, two eyes, and a smiling mouth. The face is composed of separate React components, each responsible for a part (BackgroundCircle, Eyes, Mouth). The mouth is generated using the `arc` function from the d3 library to create a path with a specified inner radius, width, and angular range. The overall composition is centered and scaled through the `FaceContainer` component.

Ooeohomos
89% match
Loading thumbnail…

Let's make a face

This example builds a cartoon face out of scalable vector graphics (SVG) shapes using React and D3. The code draws a yellow circular head, two eyes, a nose, ears, and a mouth using basic SVG elements like circle and path. React handles the component structure, while D3’s arc generator calculates the mouth’s curved shape. The layout is centered on a 960 by 500 canvas, with each facial feature positioned through explicit pixel coordinates and styled with fills, strokes, and stroke widths.

Tteohangxanh
89% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face using D3.js v6 in a React framework, rendered as SVG with animated elements. It draws a yellow circle for the head, black circles for eyes, and an arc-generated mouth using the `d3.arc()` API. Two rectangular eyebrows are added, with the left one animating upward via a `transition().duration(2000)` call. The code uses `select` and `arc` from D3, positioning elements relative to the SVG’s width and height attributes. The face is composed purely of geometric primitives, with no external data source.

SSeanisgod1994
89% match
Loading thumbnail…

Hello HTML

This example renders a stylized cartoon face using React and SVG. The face is composed of a yellow background circle, two eyes, and a curved mouth, all positioned relative to a central point. The mouth shape is generated using the `d3.arc` API, while the layout is managed through React components and a reusable `FaceContainer` that applies a translation transform. The visualization demonstrates a modular component-based approach to building SVG graphics with D3's arc generator.

TthanosK95
89% match