raptor-lucifer

@raptor-lucifer·2 public vizzes

Fork of React Starter

This example demonstrates a React component that renders a single circle that follows the mouse cursor across an SVG canvas. Using React’s `useState` hook, the component tracks the cursor’s `clientX` and `clientY` coordinates through an `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes in real time. The visualization is built with React 16 and ReactDOM, rendering directly into a 960×500 SVG viewport. It shows how declarative state management and SVG’s vector graphics can create a simple interactive pointer-tracking effect without any external data or charting libraries.

Jul 17, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using React and D3. It draws a yellow circle for the face, two black circles for eyes, and a curved arc for the mouth, all positioned within an SVG canvas. The code uses React’s `ReactDom.render` to mount the app and D3’s `arc` generator to create the mouth path with specified inner and outer radii and angle ranges. SVG circle elements are used for the face and eyes, with stroke styling applied through attributes.

Jul 16, 2021