api-whichway

@api-whichway·4 public vizzes

Fork of SVG Fundamentals Dynamic landscape

A dynamic SVG landscape cycles through a day-to-night color transition, with the sky and rolling hills shifting between aliceblue and steelblue while a sun moves vertically. React renders the scene, using SVG radial and linear gradients with SMIL animate elements to alter gradient stops and the sun’s position over a 15-second loop. The code defines hardcoded coordinates for the terrain paths and celestial body, driven by React’s declarative component structure.

Aug 6, 2022

Loading thumbnail…

Fork of Fork of SVG Fundamentals Dynamic landscape

This example shows a full-screen sky landscape that slowly cycles through colors, simulating a sunrise-to-sunset effect. A single SVG rectangle fills the viewport and is painted with a radial gradient, using the `radialGradient` and `stop` elements. The gradient’s first color stop is animated with SMIL’s `<animate>` tag, transitioning between aliceblue and indigo over a 15-second loop to shift the sky’s mood. Built with React, the component renders directly to SVG using JSX, with layout fixed at 960 by 500 pixels.

Aug 6, 2022

Loading thumbnail…

D3 Selection Exploration

This example demonstrates dynamic D3 selection and data binding by animating a set of circles that move and resize in a sine-wave pattern. Using `d3.select`, `selection.data`, and `.join`, it updates the SVG circle positions and radii every frame at 60fps via `setInterval`. The `makeData` function generates the x, y, and r values, while the `vizData` module applies the attributes. Rendering relies on SVG elements with no transitions, showing raw join behavior. The data is synthetic, derived from trigonometric functions, and the visualization fills the browser window.

Aug 5, 2022

Loading thumbnail…

Fork of HTML Starte

This example uses React to render two SVG circles, one large green circle with a black stroke and a smaller circle offset to the left, on a 960 by 500 canvas. The main circle’s radius is set by subtracting a hardcoded stroke width from the canvas height, though a typo in the stroke-width attribute leaves the circle without its intended border. The code loads React and ReactDOM from CDN, logs them to the console, and mounts the SVG to the root element.

Aug 5, 2022