Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published2🌍 Public
Aajoua
Last edited Jan 19, 2023
Created on Jan 19, 2023
Forked from HTML Starter

This example demonstrates a smiley face constructed from basic SVG shapes. A large yellow circle forms the face, with two smaller circles for eyes and white highlights, while a curved path creates the mouth using a quadratic Bézier command. The code uses standard SVG elements like `circle` and `path` directly in HTML markup, with attributes controlling fill color, stroke, and coordinates.

AI-generated description

A demonstration of SVG shapes

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates a minimal smiley face constructed from basic SVG elements, including circles for the face, eyes, and a stroke outline in yellow and black. The code shows how raw SVG markup in an HTML file can render static vector graphics without any external libraries. It uses standard SVG APIs for shapes and styling, with the face centered at (480, 250) within a 960×450 viewport. A small console.log statement in the script tag reveals basic JavaScript integration, but the visualization itself relies purely on SVG’s declarative rendering.

EEmnaAbbes
89% match
Loading thumbnail…

Smile Face Part1!

This example creates a simple smiley face using SVG primitives. It shows a large yellow circle outlined in black as the head, with two smaller black circles positioned as eyes. The code uses raw SVG elements—`<circle>`—within an HTML page, specifying coordinates, radii, fill colors, and stroke properties directly in the markup. Rendering relies on the browser’s built-in SVG support, with no additional JavaScript libraries or data sources involved.

FFang-Chieh CHou
88% match
Loading thumbnail…

smiley face part 1

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, all centered on a 960 by 500 canvas. The drawing uses the Scalable Vector Graphics (SVG) API directly within an HTML page, with the `circle` element specifying `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code does not include a mouth, leaving the smiley face incomplete, and the page’s body margin is set to zero to ensure the SVG fills the viewport.

RRob-Colon
88% match
Loading thumbnail…

SVG Smiley Face

A smiling face is drawn with SVG primitives, centered on a yellow circle with black outlines, including eyes, eyebrows, and a mouth. The example demonstrates basic D3 v5 shape generation and selection, using `d3.select` to manipulate SVG elements and `d3.arc` to create the mouth path. All elements are positioned relative to a central group, with geometric constants for spacing and offsets. The static visualization is built entirely in code, with no external data source.

Bbprokopowicz
88% match
Loading thumbnail…

Smiley Face Part I

This example displays a simple smiley face, constructed from a large yellow circle for the face and two smaller black circles for the eyes. Rendered as a static SVG, the code defines the shapes directly using SVG `circle` elements within an `index.html` file. The face circle is centered on the canvas with a black stroke, while the eye circles are positioned symmetrically to either side. The visualization demonstrates basic SVG markup for creating geometric shapes, with no interactive or animated behavior present.

NNajmuddin
87% match
Loading thumbnail…

A Smiley Face Parte I

This example shows a simple smiley face built entirely with SVG primitives. It renders a large yellow circle for the face, outlined with a black stroke, and places two smaller black circles as eyes at fixed coordinates. The code uses raw SVG elements—`<circle>` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside an inline `<svg>` tag with a 960 by 500 viewport. No JavaScript libraries or data sources are involved; the rendering is purely declarative SVG markup within an HTML document, with CSS applied only to remove the body margin.

OOscar Muindi
87% match
Loading thumbnail…

Smiley Face

This example draws a simple smiley face entirely with SVG shapes: a yellow circle for the head, two black circles for the eyes, and an arc for the mouth. The layout is computed from the SVG’s width and height attributes, with fixed constants for eye spacing and altitude. It uses D3 v7’s `select` and `arc` helpers, applying `attr` to position each element and `path` with an arc generator to define the mouth’s curved geometry.

Wwisam-ahmed
87% match
Loading thumbnail…

Creating a smiley face

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The head is drawn with a black stroke and a fill of yellow, while the eyes use only a black fill. The code uses plain SVG elements rendered directly in HTML, with CSS styling applied to remove page margins and hide overflow. The face is centered using explicit x and y coordinates (cx and cy) and sized with radius attributes, with no interactive or animated behavior.

NNarottam Medhora
87% match