Joe

@joegoodman94·5 public vizzes

Fork of Smiley Face Part III

A React and D3 smiley face is drawn entirely with SVG shapes. The circular face, two eyes, and a curved mouth are built from basic SVG elements, with the mouth path generated using the D3 `arc` generator. The component uses React to render the SVG tree and imports the `arc` function from the `d3` library to compute the mouth’s path geometry, replacing static SVG markup with dynamic, code-driven shape construction.

Mar 24, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This interactive smiley face responds to the browser window size, filling the viewport with a yellow head, black outline, and two eyes. The drawing is generated using React and ReactDOM, while D3’s `arc` function is imported but unused. The SVG elements are positioned dynamically using calculated center coordinates and offsets, with the face scaling based on `window.innerWidth` and `window.innerHeight`.

Mar 24, 2021

Loading thumbnail…

Let's Make a Face Part II

This example demonstrates a React and SVG-based face component, rendering a yellow circle as the head with a single eye placed relative to the screen center. The code computes the viewport dimensions and positions the SVG elements using JavaScript arithmetic on window.innerWidth and window.innerHeight. React manages the SVG elements through the `ReactDOM.render` method, while the eye's coordinates are derived from offset variables. The current output is only partially complete, showing the head and one eye, with commented-out code hinting at future additions like a mouth and second eye.

Mar 23, 2021

Loading thumbnail…

Hello HTML

A single yellow circle with a black outline sits centered on a blank page, rendered as inline SVG within an HTML document. The example demonstrates a minimal SVG setup using no external libraries, relying entirely on native SVG elements with explicit `cx` and `cy` attributes. It shows a basic shape with a fill and stroke, with the page set to hide overflow and remove margins through CSS. The circle is static, with no interaction or animation.

Mar 23, 2021

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG sunrise and sunset scene uses a radial gradient for the sky and linear gradients for two layered mountain ranges. The sun, a circle, moves vertically via an SVG `<animate>` element, while gradient stops also change color over a 15-second cycle. This example demonstrates fundamental SVG shapes, paths, and declarative animation without any JavaScript libraries.

Mar 23, 2021