Akash Santosh Kuskar

@akashkuskar·4 public vizzes

Fork of Let's make a face with D3.js!

A smiley face built with SVG animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by appending circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move via chained `transition` calls that repeatedly offset their vertical position. The code imports `select` and `arc` from the D3 v5 library and renders entirely in an SVG container.

Dec 25, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG fundamentals by rendering two overlapping circles and a thick navy line on a 960×500 canvas. The red and green circles are positioned at the same coordinates, with the smaller green circle layered on top of the larger red one, while the line spans the width of the viewport. The code uses plain SVG elements (`<circle>`, `<line>`) within an `<svg>` tag, with styling controlled via presentation attributes like `fill` and `stroke`.

Oct 16, 2023

Loading thumbnail…

Fork of SVG Fundamentals Sunset/Sunrise

This example depicts an animated sunset and sunrise scene using a full-width SVG canvas. The visualization shows a glowing yellow sun that moves vertically against a backdrop of layered, undulating landscapes, creating a cyclical day-to-night transition. The animation is driven by SVG native `<animate>` elements, which modulate the sun’s vertical position and adjust the gradient colors of the sky and terrain over a 15-second loop. The scene is constructed with `<radialGradient>` and `<linearGradient>` definitions, with complex landscape shapes formed by SVG `<path>` elements.

Oct 16, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

This example displays a yellow, cartoon-style face with a crying expression: large circular eyes, rectangular eyebrows, and an arc-shaped mouth drawn on an SVG canvas. Built with D3 v7, it uses `select` and `arc` to construct the facial features, while a chained `transition` animation repeatedly raises and lowers the eyebrows to simulate crying. The face is centered using an SVG group transform, and the code demonstrates local ES6 module imports alongside loading D3 via UNPKG.

Oct 9, 2023