rahul887393@gmail.com

@rcodyp·6 public vizzes

Fork of Fork of Fork of HTML Starter

A React component renders an SVG circle that follows the mouse cursor across a 960x500 viewport. The application uses React's `useState` hook to track the cursor's `clientX` and `clientY` coordinates, updated by an `onMouseMove` event handler on the SVG element. The circle's `cx` and `cy` attributes bind to the stored position, creating a direct visual response to pointer movement. The visualization demonstrates a simple, interactive SVG rendering approach using React 18 and ReactDOM.

Mar 14, 2024

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

A circle follows the mouse cursor across an SVG canvas, its position updating in real time as the pointer moves. Built with React 18, the app uses `useState` to track the cursor's `clientX` and `clientY` coordinates, which are bound to the circle's `cx` and `cy` attributes. An `onMouseMove` handler on the SVG element triggers the state update, while ReactDOM renders the component into the DOM.

Mar 14, 2024

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a mouse follower visualization where a circle tracks the cursor’s position across an SVG canvas. The React app uses the `useState` hook to store mouse coordinates, updating them on every `onMouseMove` event. The circle radius is fixed at 50, and it renders via ReactDOM into an HTML root element. The visualization highlights real-time interaction, with the SVG’s width and height set to 960 by 500 pixels. It relies on React 18.2.0 and ReactDOM for rendering, showing how state management and event handling create a responsive graphical effect.

Mar 14, 2024

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a minimal interactive mouse-follower where a single circle remains stationary at the center of an SVG canvas. The visualization uses React to render an `<svg>` element with a fixed radius circle, while CSS hides any page overflow. The code leverages React’s component model and JSX syntax, with dimensions hardcoded as constants. Although a script tag references an external library, no mouse-tracking behavior is implemented in the visible code, making it a static starter template for further development.

Mar 14, 2024

Loading thumbnail…

Fork of HTML Starter

This example shows a single circle rendered at the center of an SVG canvas using React. The code defines a React component that returns an SVG element with a fixed width and height, positioning the circle at coordinates calculated from those dimensions. It imports React and ReactDom, but does not yet mount the component to the DOM. The visualization uses SVG for rendering and demonstrates a minimal React setup for drawing shapes, with the circle’s radius and position hard-coded in JavaScript constants.

Mar 14, 2024

Loading thumbnail…

learning

This example displays seven semi-transparent circles of varying sizes and bright colors on a pale green background, each positioned at distinct coordinates. The visualization uses D3’s `select`, `selectAll`, and `join` methods within `index.js` to bind an array of hardcoded objects—containing `x`, `y`, `r`, and `fill` values—to SVG circle elements. The code sets the background via a styled `svg` element and applies a fixed opacity of 0.708 to all circles. It serves as a simple, editable template, inviting users to fork and customize the theme.

Mar 14, 2024