Fangda Qiu

@founderchiu·4 public vizzes

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG. The face consists of a large yellow circle for the head, two black circles for eyes, and a mouth drawn as a thick black arc. The code uses React's `ReactDOM.render` to mount the SVG into the DOM, with dimensions and positions computed from `window.innerWidth` and `window.innerHeight`. All shapes are positioned relative to a center point using an SVG `<g>` transform.

Oct 2, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This fork of SVG Fundamentals demonstrates basic SVG shape creation and manipulation within an HTML page. The example renders two overlapping circles in red and green, a navy diagonal line, and a black polyline path, all defined through inline SVG elements. The code explicitly uses the `<circle>`, `<line>`, and `<path>` SVG APIs to construct the vector graphics, with visual properties like fill colors, stroke colors, and stroke widths set as attributes. The rendering approach relies on the browser’s native SVG support, with body margins removed for a clean display.

Sep 30, 2022

Loading thumbnail…

Fork of Pseudo Circle Packing

A pseudo circle packing visualization displays nested and overlapping circles in pink, white, and black, with letter labels from A to W. The SVG shapes are manually positioned, not generated algorithmically. The code uses raw SVG `<circle>` and `<text>` elements, with styling from CSS, featuring the Share Tech font. The circles appear to be pre-computed in Figma and exported, rather than computed dynamically.

Sep 28, 2022

Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of the Pseudo Horizontal Bar Chart presents a minimalist categorical comparison using four labeled bars rendered as SVG `<rect>` elements. The first bar, A, has a distinct white fill with a black stroke, while the remaining bars B through D are solid black, creating a visual hierarchy. The chart uses HTML and inline SVG within a standalone HTML file, with text elements for labels. The specific data values are not derived from an external dataset; instead, the bar widths are hard-coded, and the design relies on the 'Share Tech' font for a stylized look.

Sep 28, 2022