Prathik Kulkarni

@pkulkarni01·3 public vizzes

Fork of Shapes with SVG and CSS

A single purple circle is drawn centered within an empty SVG canvas. The visualization demonstrates basic SVG shape creation and CSS styling using D3 v7. The code selects the SVG element with d3.select, appends a circle, and sets its radius and center coordinates via the .attr method. CSS rules define a stroke color and rounded line joins for path elements, though no paths are drawn in this example.

Dec 15, 2022

Loading thumbnail…

Lets make a face

The example draws a simple face using raw SVG shapes, starting with a single circle positioned at the center of an SVG canvas. It demonstrates basic SVG attribute manipulation with D3 v7, using the `select` method to choose the `svg` element and then appending a `circle` with explicit `r`, `cx`, and `cy` attributes. The stylesheet defines stroke properties for line elements but the JavaScript only creates the circle, leaving the face incomplete. The core visualization shows how D3 can programmatically generate geometric primitives within an SVG container.

Dec 5, 2022

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows basic SVG shapes styled with CSS, including circles, rectangles, lines, and a path. The shapes demonstrate inline fill attributes, a grouped set with a shared fill and stroke, and a separate class-based styling for lines. The code uses raw SVG elements within an HTML file, with a linked stylesheet applying stroke properties to the `.lines` class. Rendering relies on the browser’s native SVG support, with a scale transform applied to the entire group. No external JavaScript libraries are used, and the data is static geometry defined directly in markup.

Dec 5, 2022