silenusrich

@silenusrich·4 public vizzes

HTML Starter

A single yellow circle with a thick black outline sits centered on a 960 by 500 pixel SVG canvas. The example demonstrates the minimal structure required for an HTML page rendering vector graphics, using raw SVG elements with inline CSS styling. The circle is explicitly positioned via `cx`, `cy`, and `r` attributes, with its fill and stroke set to yellow and black respectively. This serves as a bare-bones starting point, illustrating how a static SVG shape can be embedded directly in an HTML document without any JavaScript or external libraries.

May 29, 2020

Loading thumbnail…

HTML Starter

This example displays a single large "Hello HTML" message centered on a blank white page. It is a minimal demonstration of a static web page, using plain HTML and CSS within an `index.html` file. The page relies on the HTML `<style>` tag to set the body’s font size to 13em and center the text, showcasing how basic styling can be applied without JavaScript or external libraries. The rendering approach is entirely browser-native, with no data source or dynamic behavior present. It serves as a foundational template for starting new visualization projects, particularly as a contrast to React-based starters.

May 29, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML” in large, centered type. It uses a plain HTML document with embedded CSS styling, setting the body’s text-align to center and font-size to 13em via the `<style>` tag. No JavaScript, external libraries, or data sources are involved—only the fundamental structure of an HTML file with a title and body content, serving as a bare-bones starting point for web development.

May 29, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with inline presentation attributes and CSS styling. It shows circles, rectangles, a line, and a path, with inherited visual properties applied to grouped elements. The code uses raw SVG elements within an HTML document, applying a scale transform to the entire canvas and a translate transform to a subgroup. CSS classes control stroke and line-join for the path, while group-level presentation attributes set fill and stroke for child shapes. The example highlights how SVG presentation attributes can be overridden by CSS rules, enabling flexible styling control.

Jul 17, 2019