Skip to main content
SimilarExport ZIP
100%

TTworkshop - html basic

✓ Published0🌍 Public
NNate-Holland
Last edited Oct 19, 2017
Created on Oct 19, 2017

This example demonstrates a minimal HTML page for the TTworkshop, combining styled text with an inline SVG drawing. The page uses CSS selectors to apply different font sizes and colors to paragraphs, including an ID and class-based style, while a blue inline style overrides the class rule for the first paragraph. The SVG element renders a single red circle with a black stroke, and the code uses plain HTML and SVG APIs without any JavaScript libraries or data sources.

AI-generated description

Built with blockbuilder.org this is a basic example to get started with development

mit Licensed

Similar vizzes

Loading thumbnail…

html_basics

This example demonstrates basic HTML and CSS styling for text and SVG shapes, with a primary focus on the cascade and specificity of CSS selectors. The page contains two paragraphs: the first is styled with a larger font size and pink color via an ID and class selector, while the second uses a plain element selector. The visualization also includes a yellow circle drawn with an inline SVG element, using standard SVG attributes for positioning and appearance. The code relies on native web APIs—HTML, CSS, and SVG—without external JavaScript libraries, showcasing fundamental front-end techniques.

BBillyBHWong
77% match
Loading thumbnail…

draft

The HTML Starter example demonstrates rudimentary vector graphics rendered directly in an HTML page using inline SVG elements, including a pink circle, an orange rectangle with a blue stroke, a red diagonal line, and a black zigzag path. It employs plain HTML markup and CSS styling without any JavaScript libraries, instead relying on the browser’s native SVG rendering capabilities. The code showcases fundamental SVG shapes and attributes like `cx`, `cy`, `r`, `width`, `height`, `fill`, `stroke`, and `d`, providing a minimal starting point for static visualizations.

TTian
74% match
Loading thumbnail…

HTML Starter

This example demonstrates the minimal setup for an HTML page containing an SVG visualization. It renders a single red circle positioned within a 960 by 500 pixel SVG canvas, styled with a large text-align center body. The code uses a plain HTML structure with an inline `<style>` block to set the font size, and an inline `<svg>` element with a hardcoded `<circle>` shape defining its center coordinates, radius, and fill color. There is an empty `<script>` tag included, but no JavaScript libraries or data are used beyond the static SVG markup.

Jjava-jedi
73% match
Loading thumbnail…

HTML Starter

This example displays a simple HTML page with a green circle and a red rectangle rendered inside an SVG element. The page uses plain HTML and inline CSS to center the content and set a large font size. The SVG shapes are drawn directly in the markup with `circle` and `rect` elements, demonstrating basic static vector graphics without any JavaScript libraries or data sources. The code serves as a minimal starting point for HTML and SVG visualization projects.

Ggoshashi
73% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that combines CSS and JavaScript for visualization. It renders two SVG graphics: a standalone circle and a larger SVG containing a red rectangle, green circle, and white text label. The code uses plain HTML elements with inline SVG attributes, including width, height, and fill properties, to construct the shapes without any external libraries. The page serves as a bare-bones template for getting started with web-based graphics.

AAshtone Onyango
73% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic HTML and CSS styling applied to simple SVG shapes. A red circle and a red rectangle with a blue stroke are drawn directly within the page’s markup. Using native SVG elements, the code shows how to render primitive graphics without any external JavaScript libraries. The rectangle’s fill and stroke properties are set via inline SVG attributes. This serves as a minimal starting point for web-based visualization, illustrating fundamental vector graphics output.

AAleksei Kamenev
73% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal SVG scene with three basic geometric shapes: a blue circle, a yellow rectangle with a navy border, and a diagonal black line. The SVG markup is written directly in the HTML file using the native `circle`, `rect`, and `line` elements. The page relies on browser-native SVG rendering without external JavaScript libraries, with the shapes positioned using explicit `x`, `y`, `cx`, `cy`, `r`, and `width`/`height` attributes. The markup also includes a commented-out text element and simple CSS styling for possible message display.

Nnbhimte
73% match
Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page demonstrating inline SVG rendering alongside styled HTML text. The page displays a “Hello HTML!” message and an SVG element containing a single black path curve, which is transformed with translation and scaling. The code relies on raw SVG path data, CSS styling (including an orange stroke overrides), and JavaScript console logging via `console.log`, with the SVG rendered directly in the markup. The visualization highlights basic SVG path drawing and CSS customization within a simple HTML structure, without any external libraries.

NNita
73% match