Brian Blakely

@bpblakely·5 public vizzes

Fork of Smiley Face Part II

A yellow smiley face is rendered using React components and SVG shapes, with eyes positioned by offset coordinates and a mouth drawn as an arc path. The code uses D3's `arc` generator to create the mouth's annular sector, while the background circle is defined by a radius and stroke width. The SVG canvas fills the browser window, with all elements centered via a transform. React and ReactDOM handle component rendering, and D3 v5 provides the arc calculation.

Apr 27, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, yellow smiley face drawn with three SVG circles: a large filled circle for the head and two smaller unfilled circles for eyes. The code defines the layout using React and ReactDOM, computing the center coordinates and radius from fixed width and height variables rather than hardcoding them. The rendering relies on SVG circle elements and an inline stylesheet to remove page margins.

Apr 27, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a single yellow circle with a black outline centered on a 960×500 SVG canvas, set against a blank page with hidden overflow. The rendering is accomplished entirely through a hand-coded SVG `<circle>` element with fixed `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes, embedded directly in an HTML document. It uses no external JavaScript libraries or data sources, relying solely on the native SVG API to draw the shape.

Apr 27, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a smiley face from nested SVG shapes using React components, where a yellow background circle, two eyes, and an arc-shaped mouth are composed together. The face’s dimensions and proportions are driven by parameters like `eyeOffsetX`, `eyeR`, and `mouthRadius` passed from a top-level `Face` component. The mouth is drawn using D3’s `arc()` constructor to generate an SVG path, while the eyes and background are plain `<circle>` elements. The composition centers all children inside a transformed `<g>` group based on the container’s width and height.

Apr 11, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a single yellow circle with a black outline in the center of an SVG canvas. The visualization demonstrates basic SVG styling and layout, using a hard-coded circle element with explicit `cx`, `cy`, `r`, `fill`, and `stroke-width` attributes. It relies on inline SVG within a plain HTML page, with presentation rules defined in an external CSS file. No JavaScript, data binding, or interactive behavior is present.

Apr 9, 2021