srwezuva

@srwezuva·4 public vizzes

Smiley face

This visualization displays a simple yellow smiley face rendered as SVG, composed of a circular face, two black eyes, and an arc-shaped mouth. The code uses D3 v5’s `select` and `arc` APIs to construct the path for the mouth, while positioning all elements relative to the SVG’s width and height. The face is drawn with a circle, and the eyes are offset from the center using explicit pixel coordinates. The `arc` generator defines the mouth’s inner and outer radii with start and end angles, producing a fixed smile shape.

Apr 6, 2020

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.

Apr 3, 2020

Loading thumbnail…

HTML Starter

This example demonstrates basic SVG shape rendering and styling within a minimal HTML page. It displays a collection of circles, rectangles, lines, and paths inside a 500 by 500 canvas, using a scale transform to enlarge the elements and a group with an applied translation for offset positioning. The styling is handled through an external CSS file that sets a yellow page background, black strokes for line groups, and white strokes with round joins for paths. The code uses native SVG elements and CSS selectors to define visual properties.

Apr 3, 2020

Loading thumbnail…

HTML Starter

This example presents a static HTML page that displays the text “Hello HTML” in the browser. It demonstrates the minimal structure for an HTML document, including a `style` block that centers the text and sets a large font size. The page uses no JavaScript libraries or external data, relying solely on native HTML and CSS for rendering. It serves as a basic starting point for web-based projects.

Apr 2, 2020