springsaga

@springsaga·5 public vizzes

samily face P2-with React and colors

A smiling face is constructed from SVG circles, rendered in yellow with a red outline and featuring two eyes. The left eye is unfilled, while the right eye is filled with green, creating a simple, colorful character. Built with React, the code uses `ReactDOM.render` to inject the SVG into the page, with circle positions and dimensions set via `cx`, `cy`, and `r` attributes. The visualization relies on the `react` and `react-dom` libraries, with all shapes defined directly in the JavaScript source.

Mar 20, 2020

Loading thumbnail…

Hello HTML

This example shows a single, unstyled circle centered in an SVG canvas, demonstrating the minimal structure needed to render a shape in a web page. The page relies on plain HTML and inline SVG, with no external libraries or JavaScript. The circle has a radius of 300 pixels and no fill or stroke, making it invisible against the white background. The SVG element is set to 900 by 500 pixels, and the body uses inline CSS to remove margins and hide overflow, ensuring the graphic fills the viewport without scrollbars.

Mar 16, 2020

Loading thumbnail…

HTML Cars Report

This example displays a plain HTML cars report listing three vehicles by model, year, and color. The page uses semantic HTML elements, including a heading and an unordered list, with CSS classes to visually distinguish highlighted green and blocked red entries. The stylesheet sets a monospace font and large base size, while the JavaScript file assigns a static message to a placeholder element, though that element is not present in the markup. The report is rendered directly from static HTML without external data or interactive features.

Mar 15, 2020

Loading thumbnail…

Let's Make a Face Part I

This example shows the first step toward building a smiley face, with a yellow circular head and two black-outlined eyes positioned symmetrically on a white background. The static SVG scene is constructed directly using inline `<circle>` elements within an `<svg>` tag, specifying coordinates, radii, fill colors, and stroke properties. No JavaScript libraries or data sources are involved; the rendering relies solely on SVG markup and the browser’s native support. The face remains incomplete, hinting at a future part that will likely add a mouth or other features.

Mar 13, 2020

Loading thumbnail…

Hello HTML

A minimal HTML page renders a single yellow circle centered in an SVG canvas. The example demonstrates the simplest possible structured document, using a plain `<svg>` element with a `<circle>` tag to display vector graphics without any external libraries. The circle’s position and radius are set directly via `cx`, `cy`, and `r` attributes, while its color comes from the `fill` property. The page’s static, declarative markup shows how raw SVG inside HTML can produce basic shapes with no JavaScript or data processing.

Mar 13, 2020