Skip to main content
SimilarExport ZIP
100%

SVG 2019

✓ Published0🌍 Public
SSam Lite
Last edited Feb 13, 2020
Created on Feb 13, 2020
Forked from HTML Starter

This example shows a yellow smiley face drawn inside an SVG canvas. The face consists of a large circular head centered in the 960x500 viewport, two smaller circles positioned for eyes, and a curved path forming a smile. The visualization uses d3.select and d3.append to build the SVG elements, with d3.arc generating the mouth’s path coordinates. All shapes are styled using SVG attributes like fill and stroke. The code runs in a React framework using D3 v5, rendering purely through SVG without external data.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG

This example renders a smiley face using React and D3, composed of SVG circles and an arc path. The face includes a yellow background circle with a black stroke, two eyes positioned symmetrically, and a mouth created with d3.arc(). The code uses React components for the background and eyes, while a D3 arc generator computes the mouth’s path with specified inner and outer radii and angles. The visualization is static, with all elements centered within an 960×500 SVG canvas.

AAsif Nawaz
92% match
Loading thumbnail…

Smiling Face

This example displays a classic yellow smiley face centered within an SVG canvas. The face is constructed from a large yellow circle with a black stroke, two smaller circles for eyes, and two rectangles as eyelids. The mouth is created using D3's arc API with defined inner and outer radii and specific angles. The React-based code leverages D3 v5’s select function to manipulate the SVG elements directly.

Llrakla
92% match
Loading thumbnail…

Smiley face

This example shows a simple smiley face drawn entirely with SVG shapes: a yellow circle for the head and two black circles for the eyes, centered in a 960-by-500 viewport. The face is not yet complete, as the mouth is missing. The visualization is built with React and D3 v7, using D3’s `arc` import (though unused in the final render) and hardcoded circle coordinates. React renders the SVG elements directly, with the head’s radius and stroke width derived from the center and height constants to keep proportions consistent.

Ffutureofworld
91% match
Loading thumbnail…

SVGs and CSS

This example shows a yellow smiley face constructed from basic SVG shapes, including a circular head, two eyes, and an arc-shaped mouth. It demonstrates the fundamental approach of using d3-selection from d3 v6 to append and style SVG elements with attributes. The code specifically uses `d3.select`, `.append`, and `.attr` to position shapes relative to the SVG's width and height, while the `arc` generator creates the mouth path. The rendering occurs in a React-free HTML page with CSS styling applied directly through SVG attributes like `fill` and `stroke`.

Qquiqdome
91% match
Loading thumbnail…

Smiley_face_part1

A yellow smiley face rendered as SVG, with a circular head, two eyes, and a mouth, is centered on a 960 by 500 canvas. The code uses React to manage the component structure and D3's `arc` generator to create the mouth path. The face is drawn with hardcoded dimensions and coordinates, including a thick black stroke around the head, and the eyes are simple circles positioned relative to the center. The visualization demonstrates basic geometric composition using SVG primitives within a React and D3 context.

Ggagegreen00
91% match
Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn inside an SVG canvas, with two black eyes and a brown arc-shaped mouth. The face is centered within an 800x500 viewport, using a yellow circle with a black stroke as the head. The mouth is generated with the d3.arc() API, calculating its inner and outer radii and start and end angles. The example is built with React, using JSX to render the SVG elements, and relies on d3.v7 for the arc path generation.

Ddan815
91% match
Loading thumbnail…

smiley part I

A yellow smiley face is drawn on an SVG canvas using React and D3. The face consists of a large yellow circle with a black stroke, two black eyes positioned symmetrically, and a mouth created with the `d3.arc()` generator using a half-circle path. The code defines geometry with variables for center coordinates, eye offsets, and radii, then renders the scene through React components. The rendering relies on D3 v7 for the arc path and React for declarative SVG element creation.

Ccsigani
91% match
Loading thumbnail…

smiley face part 1

An SVG smiley face is drawn with yellow circular head, black outlined eyes, and a black outlined mouth arc, all centered within a 960x500 viewport. The visualization uses React to render SVG elements, while D3.js provides the `d3.arc` generator to create the mouth path coordinates. Each facial feature is positioned using explicit pixel offsets and radii, and the mouth uses a defined inner radius, arc width, and start/end angles from pi/2 to 3pi/2. The drawing employs circle and path SVG elements with stroke styling.

Ddmr
91% match