Fork of hanzi

100%

✓ Published0🌍 Public

Last edited May 29, 2021

Created on May 29, 2021

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

hanzi

This example visualizes two Chinese hanzi characters as animated blue strokes that draw themselves over a light gray grid. Each character is composed of two distinct path shapes, filled in light gray, with a blue stroke animating along a clipped path to simulate handwriting. The animation uses CSS `@keyframes` to control `stroke-dashoffset`, cycling through delays to sequence the strokes. The SVG is rendered inline in the HTML, scaled and reflected vertically, with a JavaScript console log included for debugging.

JJack Elsey

89% match

Loading thumbnail…

Fork of 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.

JJack Elsey

85% match

Loading thumbnail…

Fork of HTML Starter

This example displays a hand-drawn SVG illustration of a face alongside decorative text, rendered in a web page styled with CSS. The JavaScript-free visualization relies on CSS hover effects to change color, while the SVG paths remain static. Fonts are loaded from Google Fonts, and the document structure is defined in a single HTML file with a linked stylesheet. The design demonstrates basic SVG shape composition and interactive styling without additional libraries.

Vvalsorayksterob

72% match

Loading thumbnail…

Fork of Fork of SVG Creation

This example generates a geometric animation using raw SVG polygons, constructing 60 quadrilateral shapes that shrink and shift diagonally across the viewport. Each polygon’s vertices are calculated from a moving center point, with size and position modified by index-based formulas. The code uses the DOM `document.createElementNS` API to append SVG elements directly—no D3 library is imported—and applies a rainbow stroke color via HSL values that increment per shape. The page fills the entire browser window with a black background, rendering the hollow outlines without fill.

CChartat aGlance

71% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG fundamentals using a series of concentric circles in grey, gold, and silver, accompanied by two curved paths animated with changing opacity. The static circles establish the visual structure, while the paths use SVG `<animate>` elements with `keyTimes` and `values` to create a pulsing effect over a 10-second loop. The code relies on native SVG rendering, with the animation controlled declaratively through SMIL. An inline JavaScript `console.log` shows the integration of basic scripting into the HTML page.

CCurran Kelleher

71% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle with a thick black border changes its fill and stroke in response to hover. Using only CSS transitions, the rectangle’s fill transitions to light green, its stroke to darkmagenta, and its stroke width expands from 20px to 100px over three seconds. The code applies the `transition` property with `all` duration to the `rect` selector, triggered by the `:hover` pseudo-class, without any JavaScript or D3 involvement.

LLuiz Domingues

71% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This SVG example explores shape, color, and interactivity using custom paths and CSS transitions. A stylized funnel shape is rendered with a multi-stop linear gradient defined in SVG `<defs>`, creating a banded color effect. The page also includes a heart path with a dashed stroke that animates its offset on hover via CSS `transition`. Additional CSS demonstrates hover effects on a hidden division. The example uses plain SVG elements and CSS styling, including the `stroke-dasharray` and `stroke-dashoffset` properties for path animation.

Kkatebacon32

70% 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

70% match