shubhampawar0151

@shubhampawar0151·4 public vizzes

Let's work with D3

This example draws a smiling face using SVG primitives and D3.js. It creates a yellow circle for the head, black circles for the eyes, and an arc-shaped mouth, all positioned within an SVG canvas. The code uses D3’s `select`, `append`, and `attr` methods to build and style the shapes, and the `arc` function from D3 to generate the mouth path. The rendering is done entirely in SVG.

Oct 11, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—styled through both inline presentation attributes and an external CSS stylesheet. The graphic shows a progression from default black shapes to explicitly colored fill and stroke properties, then to grouped elements that inherit common styling like a brown fill with a black outline. A separate group applies stroke styling to line and path elements via CSS class selectors, including a custom stroke-linejoin. The page uses an HTML5 structure with a fixed-width SVG canvas, while the CSS file manages global layout and overrides shape appearance based on class and element type.

Oct 11, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes—two circles and two rectangles—are displayed on a 960 by 500 canvas. The first pair uses default black fills, while the second pair is explicitly colored red and blue, demonstrating inline presentation attributes. A `<g>` group element then translates all shapes down by 100 pixels, applying a brown fill and black stroke with a 5-pixel width to both shapes simultaneously. The example showcases fundamental SVG structure with CSS for page margins, and relies on the SVG API for all drawing and grouping operations.

Oct 11, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes can be positioned and rendered on a web page using a minimal setup. It shows two circles placed at different coordinates within a 960×500 SVG canvas, with the page styled through a linked CSS stylesheet that removes margins and hides overflow. The code relies on native SVG elements (`circle`) and standard CSS properties (`body`, `margin`, `overflow`) to control layout. No JavaScript libraries are used; the rendering is purely declarative SVG markup embedded directly in the HTML document.

Oct 11, 2020