hanzi

100%

✓ Published1🌍 Public

Last edited May 29, 2021

Created on May 8, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

75% match

Loading thumbnail…

Hanzi Map

A force-directed graph visualizes a hierarchy of Chinese characters as a radial tree of colored nodes and links. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position a main node, two child nodes, and twenty leaf nodes in SVG. Node size and color are assigned from a static dataset, with text labels for the main and child nodes.

MMarco Trevisan

70% match

Loading thumbnail…

HTML Starter

This example showcases a line drawing of an intricate shape that animates itself onto the screen using a stroke-dash technique. The path is drawn over three seconds with a linear ease. The code uses D3.js version 3.5.6 to select the body, append an SVG, and create the path. It then leverages `path.node().getTotalLength()` and transitions with `attrTween` to animate the `stroke-dasharray` and `stroke-dashoffset` attributes, creating the effect of the line being traced. The underlying data is a static, pre-defined SVG path.

AAndrew Yan

66% match

Loading thumbnail…

stroke-dash type

Three SVG path elements demonstrate the visual effect of varied stroke-dasharray values in React. Each horizontal line uses a different dash pattern—uniform segments, a repeating 10,10,5,5,8 sequence, and a longer 20,10,5,5,5,10 cycle—all rendered with black strokes on a white background. The SVG markup defines the paths directly with stroke-dasharray attributes, showcasing how dash spacing and repetition create distinct line textures without additional JavaScript or data.

Zzoniyac

66% match

Loading thumbnail…

SVG Animations using CSS transitions

A single red rectangle with a thick black stroke sits on a blank SVG canvas. The example demonstrates CSS transitions on SVG elements, where hovering over the rectangle smoothly animates its fill color to green and expands its stroke width over three seconds. This is achieved using the CSS `transition` property on the rect’s `fill` and `stroke-width` attributes, applied directly within an HTML page. No JavaScript libraries are used; the interaction relies purely on CSS hover states and SVG styling.

GGiorgi Xiaoyu Zhang

66% match

Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor

65% match

Loading thumbnail…

SVG and CSS

This example illustrates basic SVG shapes—circles, rectangles, lines, and a path—within a scalable group, using both inline presentation attributes and an external CSS stylesheet for styling. The code relies on the SVG markup language and CSS rules to define fills, strokes, and shape properties, with explicit color values like `red` and hex codes. A separate ES6 module, `myMessage.js`, exports a string, though the visualization itself does not render it. The rendering is entirely SVG-based, scaling the coordinate system via a transform.

Zzuzuzxz

65% match