Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
JJack Elsey
Last edited May 8, 2021
Created on May 8, 2021
Forked from HTML Starter

This example shows a large, centered Chinese character rendered as an SVG path, with two strokes animating in sequence from blue to black. The animation uses CSS `@keyframes` and `stroke-dashoffset` to create a drawing effect, with each stroke clipped to its shape. A lightgray grid of dashed lines provides a background, while the SVG `viewBox` and transforms scale and flip the coordinate system for display. The page is minimal HTML with embedded styles and a console.log, serving as a basic starter template.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter with SVG

This example presents a basic SVG scene composed of circles, rectangles, lines, and a path, rendered within a 960x500 viewport. The graphic demonstrates primitive shapes and SVG grouping via the `<g>` element, with some elements transformed using the `translate` attribute. CSS styling applies a black stroke to the line group and a blue stroke with rounded joins to the path. The code uses plain HTML, SVG, and CSS, with no JavaScript libraries or data sources, serving as a minimal starter template for visualization work.

Vvmakker
86% match
Loading thumbnail…

Fork of hanzi

This fork of the hanzi example animates two Chinese character strokes using SVG and CSS. It shows light gray character shapes being progressively drawn with thick blue strokes, creating a handwriting effect. The animation uses CSS `@keyframes` with `stroke-dashoffset` transitions over two seconds, while SVG `clipPath` elements constrain the blue paths to the original character outlines. The code includes embedded SVG markup inside an HTML document and minor JavaScript that logs to the console.

JJack Elsey
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes drawn directly in HTML, featuring a large black circle and a red-outlined rectangle. The page uses inline SVG elements within a basic HTML structure, styled with a CSS class for oversized text. It requires no JavaScript libraries, relying solely on native SVG markup and CSS styling. The visualization serves as a minimal starter template for understanding SVG coordinate systems and basic geometric rendering.

Sskylons@hotmail.com
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a hand-coded SVG composition of basic geometric shapes—circles, rectangles, lines, and a path—styled with CSS and rendered within an HTML page. It shows how SVG elements respond to presentation attributes like fill, stroke, stroke-width, and grouping via `<g>` tags. The code uses no external libraries, relying on native SVG and a small JavaScript console log. The dark background and vibrant shapes highlight how inline styles and CSS classes interact with SVG rendering.

Jjakesilly
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes rendered directly in an HTML page, including a circle, rectangle, line, and text element. The shapes use explicit SVG attributes for positioning, dimensions, fill colors, and stroke properties, such as `fill`, `stroke`, and `stroke-width`. Rendered as inline SVG within a 900x500 viewport, the visualization serves as a minimal starter template showing how SVG primitives can be combined without any JavaScript libraries or data processing. The code includes an empty script tag and a CSS keyframe animation, but no dynamic behavior is triggered.

Aahavagowtham
85% match
Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page centered around a large "Hello HTML" message, styled with CSS at 13em font size. It shows a scalable SVG graphic with a radial gradient rectangle that transitions from white to black. The page uses an inline SVG with a defined `radialGradient` element and a JavaScript console log statement. The SVG `viewBox` and `rect` elements demonstrate basic vector rendering, while the script provides a simple debugging output for browser developer tools.

SSaad Khalid
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic vector shapes rendered in SVG, including circles with various fill and stroke combinations, a rectangle with a yellow fill and blue outline, a diagonal line, and a curved path with a black stroke. The page uses a minimal HTML structure with inline CSS and JavaScript, with the `index.html` file defining a 960 by 800 pixel SVG canvas. The code directly specifies shape attributes such as coordinates, dimensions, and colors rather than relying on external libraries or data sources, serving as a foundational starter for building more complex visualizations with React or other frameworks.

Hhillierben@gmail.com
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal SVG scene with a blue circle with a red stroke and a red diagonal line, rendered directly in HTML. It shows how static shapes can be positioned using explicit coordinates within an SVG viewport of 960 by 600 pixels. The implementation relies on native SVG elements embedded in the DOM, styled via CSS and structured with basic JavaScript-free markup. The code uses no external libraries, making it a pure HTML and SVG starter template for simple geometric visualizations.

Nnkmng77@gmail.com
84% match