shaji K

@shajikk·5 public vizzes

Mouse Follower Cross hair

A circle and two crosshair lines track the mouse cursor in real time over a fixed-width SVG canvas. The React application captures pointer movement through an `onMouseMove` event handler, updating state that repositions the red dot and the intersecting vertical and horizontal lines. React's `useState` and `useCallback` hooks manage the coordinate updates, while ReactDOM renders the SVG elements directly in the browser.

May 7, 2021

Loading thumbnail…

Fork of Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, with black crosshairs tracing the cursor's horizontal and vertical position. The React app tracks mouse movement events via the `onMouseMove` handler, updating state through `useState` and `useCallback`. It renders the circle and lines as SVG elements using `ReactDOM.render` into a root div.

May 7, 2021

Loading thumbnail…

Make a face

A yellow circle with a black outline fills the center of a blank SVG canvas, creating a minimalist base for a face. The example uses a single static `<circle>` element rendered via SVG, with hard-coded coordinates and styling defined directly in the HTML. It relies on no external libraries or data sources, serving as a simple demonstration of basic SVG shape drawing and CSS styling within an HTML page. The fixed width and height constrain the graphic to a 960×500 viewport.

May 6, 2021

Loading thumbnail…

Fork of HTML Starter

A single red heart dominates the center of an SVG canvas, rendered as a filled path with a red stroke and transparent fill. The heart shape is defined by two arc commands and two quadratic Bézier curves, which create its symmetrical upper lobes and pointed bottom. The SVG uses a viewBox of 0 0 100 100, while the surrounding HTML sets the body font size to 13em for dramatic scaling. This is a minimal, static visualization built with plain HTML, CSS, and inline SVG, with no JavaScript libraries or data sources involved.

Apr 11, 2021

Loading thumbnail…

HTML_Starter_test

A single static webpage displays the text "Hello HTML" centered in a 13-em font. The page uses plain HTML, CSS, and JavaScript, with no external libraries. The `console.log` statement outputs "Hello JavaScript!" to the browser's developer tools. The code demonstrates a minimal setup for embedding styling and scripting directly in an HTML document, serving as a bare-bones template for web-based visualizations.

Apr 11, 2021