Skip to main content
SimilarExport ZIP
100%

矢量画圆

✓ Published1🌍 Public
Kkkw-21
Last edited Feb 12, 2022
Created on Feb 12, 2022

A yellow smiley face is drawn using React and rendered as SVG, with its circular head and facial features positioned relative to the window dimensions. The face is centered on screen using a translated `<g>` group, and circles are used for the head, eyes, and mouth. The code uses React 16.9.0 with `ReactDOM.render` to inject the SVG into the DOM, and all shapes are defined with SVG circle elements. The example demonstrates responsive sizing by deriving coordinates from `window.innerWidth` and `window.innerHeight`.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 矢量画圆

This example renders a yellow smiley face as an SVG graphic using React and D3’s arc generator. The face is composed of a large outline circle, two fixed eye circles, and a mouth path drawn with an arc that has inner and outer radii, spanning a full 2π angle. The React component returns the SVG elements, positioning everything relative to the center via a translate transform. The code uses ReactDOM to mount the component into the root div, with the D3 arc API handling the mouth’s curved path.

Kkkw-21
88% match
Loading thumbnail…

Smile 1

A yellow circle with a thick black outline is centered in an SVG canvas, drawn with React elements. The visualization uses React and ReactDOM to render a single `<circle>` element, with its radius calculated from the viewport height and stroke width. The code explicitly sets the fill color, stroke color, and stroke width to create the smiley face’s base, though no facial features are drawn in the active script. The rendering relies on SVG within a React component, with dimensions fixed at 960 by 500 pixels.

WWinnie Yoe
87% match
Loading thumbnail…

smiley face part 1

A yellow smiley face is drawn as a single large circle with a black outline, rendered in SVG. Two static black circles serve as eyes, positioned on the face. The code uses React with ReactDOM to render the SVG elements, specifying dimensions, center coordinates, and stroke width as constants. The example demonstrates a minimal setup for creating SVG graphics with React, relying on standard SVG circle elements rather than any data-driven or interactive features.

Kkish0e
87% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline and two black inner circles forms a simple smiley face. The face is drawn entirely with SVG circle elements, centered within a 960 by 500 viewport, using React's JSX syntax to render the markup. The code sets explicit pixel values for the face radius, eye offset, and eye radius, and relies on ReactDOM to mount the SVG into the page.

MMaulana Adam Sahid
87% match
Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn as an SVG, centered on a 960 by 500 canvas. The example uses React to declaratively render three circles: a large yellow face with a black stroke for the outline, and two smaller black circles for the eyes. The React component defines the SVG elements with explicit coordinates and dimensions, including the face radius, eye offsets, and eye radius. This demonstrates a minimal, code-driven approach to creating a simple vector graphic with a functional React component and `ReactDOM.render`.

GGueen Li
86% match
Loading thumbnail…

Smiley Face Part 1

This example shows a yellow smiley face rendered as a static SVG graphic, with a circular head, two eyes, and a visible black outline. Built with React and rendered through SVG elements, the code uses constants for dimensions, stroke width, and eye positioning to place each circle precisely on a 960 by 500 canvas. The implementation relies on React 18 and ReactDOM to mount the component, with all shapes defined as inline `<circle>` elements using explicit `cx`, `cy`, and `r` attributes.

YYuxi Chen
86% match
Loading thumbnail…

smiley

A simple SVG smiley face is drawn using React components, where a yellow circle with a black stroke forms the head and two filled circles represent the eyes, positioned symmetrically around the center. The face is centered dynamically based on the window dimensions, with its size scaling relative to the viewport height. The implementation uses React 16.9 and ReactDOM to render the SVG elements directly in the browser, computing all positions and radii from the window's width and height rather than using fixed coordinates.

Mmanjushayarreddu
86% match
Loading thumbnail…

1

A smiley face is drawn as a responsive SVG visualization, with a yellow circle for the head, black stroke outline, and smaller unfilled circles for the eyes. It uses React 16.9 to render the SVG elements, with dimensions computed from `window.innerWidth` and `window.innerHeight`. The component positions the face via a transformed group, while circle radii and offsets are derived from viewport height and predefined constants.

Ggayathri
86% match