SVG Basics Experiment

100%

SVG Basics Experiment

✓ Published0🌍 Public

Last edited Oct 15, 2022

Created on Oct 15, 2022

This example demonstrates a cartoon smiley face drawn with SVG primitive shapes, including a head outline, eyes, nose, and mouth, set against a gradient-filled background. The animation shows the mouth expanding and contracting through elliptical size changes. The page uses raw SVG elements—`rect`, `path`, `ellipse`, `circle`, and `animate`—within an HTML document, with no JavaScript libraries. The gradient is defined in `<defs>` and applied via the `fill` attribute, while the mouth’s motion is driven by repeated `<animate>` tags on its radius properties.

AI-generated description

This is a page trying out the various svg elements based on the first episode of the D3 course Get it right in Black & White.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

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.

Aajoua

84% match

Loading thumbnail…

Smile 😀: Exploring the SVG Canvas!

This example demonstrates a simple SVG smiley face constructed with basic geometric shapes. It shows how SVG elements—a pink circle for the head, green and blue ellipses for the eyes, and a brown path with an M and Q command for the mouth—can combine to form a recognizable illustration. The code uses plain SVG markup within an HTML document, referencing no external JavaScript libraries. Styling is applied via attributes like `fill`, `stroke`, and `stroke-width`, with the canvas defined by a 960x500 coordinate system. The project highlights SVG’s vector rendering approach, ensuring scalable, non-pixelated output.

JJessica Burns

84% match

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

83% match

Loading thumbnail…

Smile face

A smiling face is drawn from SVG primitives: a yellow circle for the head, two black circles for the eyes, two rectangles for eyebrows, and an arc path for the mouth. The example demonstrates animated transitions, with the eyebrows moving up and then back down over two seconds using chained `.transition().duration()` calls. The scene is centered within a 960×500 SVG canvas using a `g` element translated to the midpoint. The code imports `select` and `arc` from D3 v5, and constructs the mouth’s arc path with the `arc()` generator, specifying inner and outer radii and angular spans.

SSungmi

82% match

Loading thumbnail…

Smiley Face Part I (with html,css and svg)

This example displays a simple cartoon smiley face drawn with scalable vector graphics. The face consists of a large yellow circle, two eyes, and a red circular mouth, all rendered using inline SVG elements within an HTML page. The page uses pure HTML and CSS, with no JavaScript, to style the SVG shapes. CSS rules define the background color and override the fill colors of the eyes and mouth to green, while the SVG attributes set the initial positions, radii, colors, and stroke widths for each circle.

NNita

82% match

Loading thumbnail…

HTML Starter

This example shows a simple SVG smiley face composed of geometric shapes, rendered within an HTML page. It includes a lavender background circle for the face, black circles for eyes, a path element for the mouth, and a yellow rectangle strip at the bottom. The code uses raw SVG elements such as `circle`, `path`, and `rect`, along with the `transform` attribute for scaling. Styling is handled through inline CSS, with the body set to center content and a large font size. The visualization demonstrates basic SVG rendering in a static, non-interactive format.

Ssrwezuva

82% match

Loading thumbnail…

Smily Face

The example shows a green smiling face constructed from SVG shapes, which winks by animating its eyebrows and changing its mouth’s color and orientation. The face is built using d3.select and append to add circles, rectangles, and an arc-generated path, with d3.arc defining the mouth’s curved form. Animations are driven by chained transition calls on SVG attributes, such as transform, to move the eyebrows and rotate the mouth.

CChristine Lanser

82% match

Loading thumbnail…

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

Ssivakaman

81% match