nishanthh19

@nishanthh19·7 public vizzes

Naveen Angry

A black SVG face with red fill and thick black outlines displays a shifting expression. D3.js functions such as `select`, `append`, and `attr` construct the circular head, eyes, and mouth. An animated transition, using `.transition()`, repeatedly moves the eyebrows up and down, creating an angry, frowning effect. The face is centered via SVG transforms, with all elements drawn directly using D3's DOM manipulation.

Sep 22, 2023

Loading thumbnail…

Naveen"s Fork of SVG Fundamentals Dynamic landscape practice

This animated SVG landscape depicts a dynamic gradient sky and layered mountain silhouettes, with a sun that vertically oscillates in a looping motion. The scene uses SVG’s `animate` element to cycle the sky and landscape gradient colors (e.g., alice blue to indigo) over durations of 1 to 15 seconds. Three `path` elements render the terrain, each filled with a linear or radial gradient defined in `defs`. The rendering relies purely on native inline SVG and SMIL animation, with no external JavaScript libraries.

Sep 22, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense scatter of small, randomly colored circles overlays a large, black-and-white line drawing of Buddha, rendered as an SVG path. The circles, colored with randomized RGB values and partial opacity, fill the canvas and suggest noise over the figure. Built with React and rendered as SVG, the code uses nested loops to generate 9261 circles, each positioned using the square of an index multiplied by random values, while the Buddha path is drawn with a thick stroke.

Sep 22, 2023

Loading thumbnail…

Fork of Nishanth

This example displays a large, left-aligned “Hello HTML!” message in the browser. The visualization is a bare-bones HTML page styled with CSS and JavaScript, with the text set at a font size of 10em. It uses basic HTML structure and a simple `<style>` block to control the message’s appearance, with no external libraries or data sources involved. The page is a minimal demonstration of CSS and JavaScript integration within a static HTML document.

Sep 22, 2023

Loading thumbnail…

Fork of Making a face

This example animates a simple cartoon face built entirely from SVG shapes. A green circle serves as the head, with two black circles for eyes, a dark arc for the mouth, and two rectangles for eyebrows. The eyebrows move up and down repeatedly in a looping animation using chained `transition().duration()` calls. The visualization is constructed with D3 v7, using `select` to target the SVG, `arc()` to generate the mouth path, and SVG primitives like `circle` and `rect`.

Sep 22, 2023

Loading thumbnail…

Making a face

This example uses D3 v7 to construct a cartoon-like face from scratch. The visualization draws a green circle as the head, then adds black circles for eyes and a curved path, created with the `d3.arc` API, for the mouth. Two rectangles serve as eyebrows, which animate vertically using `transition` methods, moving up and then back down over two seconds each. The code demonstrates SVG shape creation and grouping, using D3's `select` to target the SVG element and `attr` to set positions and dimensions for each facial feature.

Sep 22, 2023

Loading thumbnail…

mani bro

This example displays a large left-aligned "Hello HTML!" message on a plain page. It uses a simple CSS class to set the font size and alignment, and the message is rendered directly within the HTML body without any external libraries or JavaScript. The code is a minimal demonstration of structuring content with HTML and styling it via CSS, suitable as a starting point for a React-based visualization project.

Sep 22, 2023