Skip to main content
SimilarExport ZIP
100%

SVG - Drawings

✓ Published0🌍 Public
Eekorre1001
Last edited Mar 18, 2021
Created on Mar 17, 2021
Forked from HTML Starter

Multiple yellow smiley faces render in a row, each built from composed React components for the background circle, eyes, and mouth. The faces derive their geometry from reusable props like `centerX`, `eyeOffsetX`, and `mouthRadius`. Rendering uses SVG elements inside a `FaceContainer`, with the mouth path generated by d3’s `arc()` and the layouts created via `range()` from d3.

AI-generated description

A project about drawing with SVG and React Component

MIT Licensed

Similar vizzes

Loading thumbnail…

smiley face

A yellow smiley face rendered as SVG via React components shows geometric shapes: a circle background, two eyes, and an arc-based mouth. Each facial feature is a separate React component—BackgroundCircle, Eyes, and Mouth—composed within a FaceContainer that applies a centered translate transform. The Mouth uses d3.arc with specified inner and outer radii and start/end angles to draw the smile. Hardcoded dimensions for the face, eyes, and stroke width define the static visualization.

Jjonrynn
91% match
Loading thumbnail…

Smiley Face

A yellow smiley face is rendered in an SVG using React components. The face consists of a yellow background circle with a black stroke, two black eyes positioned symmetrically, and a mouth drawn as an arc. The mouth uses `d3.arc()` with specified inner and outer radii and start/end angles to create a smile shape. Coordinates for the eyes and dimensions for the mouth are defined as constants, and the entire face is centered within the SVG viewport.

MMarcos
91% match
Loading thumbnail…

Smiley Face Pt. I

A smiling face rendered in yellow SVG using React components. The face is composed of a background circle, two eyes, and a mouth, all positioned relative to the center of a 960 by 500 viewport. The mouth is drawn using the d3.arc generator with specified inner and outer radii and angular range. This example demonstrates the composition of reusable React components for scalable vector graphics.

TTanmay Bishnoi
90% match
Loading thumbnail…

Create a face

Repeated SVG smiley faces are generated in a grid, each drawn with a yellow circular background, two black eyes, and a curved mouth. The code builds these faces using React to compose separate components, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is rendered using `d3.arc()`, which creates a path based on specified radius and angle parameters. Each face is rendered identically without variation in appearance, placement, or styling.

MMorris Muriithi
90% match
Loading thumbnail…

Smiley Face

A grid of fifteen yellow smiley faces, rendered with React and SVG, uses the D3 arc API to draw each mouth. The faces are generated from a single `Face` component, which composes separate `BackgroundCircle`, `Eyes`, and `Mouth` components. Each face is identically parameterized with fixed offsets and radii, and the array from D3's `range` function replicates the component across the canvas. The SVG output is translated to center each face, using D3's `arc` for the mouth path.

Sstackedchips
90% match
Loading thumbnail…

Smiley Face Part III

A grid of five smiley faces rendered in SVG through React, each with a yellow circular background, two eyes, and an arc-shaped mouth. The faces are positioned horizontally across a 960x500 canvas using an array of center coordinates. The visualization uses d3's arc generator to define the mouth path, while React components structure the face parts. The SVG drawing relies on React’s declarative syntax, with circle elements for the head and eyes, and a path for the mouth.

NNita
90% match
Loading thumbnail…

Smiley Face Part 1

A grid of identical smiley faces renders in SVG. Each face uses a yellow circle with a black stroke, two eyes positioned by offsets, and a mouth drawn as an arc. The `d3.arc` function generates the mouth path, while React components compose the face from smaller parts. The face’s center, eye offset, and radius are passed as props, with the grid created by `d3.range`.

SSpringChikn
90% match
Loading thumbnail…

smiley face part 1

A grid of eighteen smiley faces renders in SVG via React components, each face built from a yellow background circle, two eyes, and a mouth. The eyes and mouth radii vary randomly per face, creating subtle differences across the grid. The code uses React for component composition, D3’s `arc` generator to draw the mouth path, and `range` from D3 to create the array of faces.

SSamuele Greco
90% match