SVG

100%

SVG - Database Icon

✓ Published0🌍 Public

Last edited Sep 23, 2021

Created on Aug 26, 2021

This example shows a classic cylindrical database icon drawn entirely with SVG shapes. The code uses SVG elements such as `ellipse`, `path`, and `circle` to render the icon's body, connector lines, and data dots on a 960x500 canvas. The icon is composed of stacked curved paths creating a three-dimensional cylinder effect, with the top ellipse and side straight lines forming the container. Grey circles on the side represent stored records, while the stroke and fill attributes control the black-and-white aesthetic. No JavaScript libraries are used; the visualization relies purely on static SVG markup.

AI-generated description

Database icon created only using SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Icon Chart using SVG Path Command

This example shows a 10-by-10 grid of circles that form an icon chart, with the first five circles in the top row highlighted in a lighter blue to mark a distinct subset. The visualization is built entirely with SVG and JavaScript, creating each circle dynamically using `document.createElementNS` and setting `cx`, `cy`, `r`, and `fill` attributes directly. The data is hard-coded in nested loops, and the SVG is appended to the page body, demonstrating a minimal, manual approach to icon-based charting without external libraries.

PPeter Cordone

74% match

Loading thumbnail…

J_DV_D3_C01_SVG

This example displays a collection of basic SVG shapes—circles, paths, lines, and a rectangle—arranged on a 960-by-900 canvas, with a large translucent circle and a small globe icon drawn as a path. The code uses raw SVG elements and CSS styling directly in an HTML file, with no external libraries or JavaScript logic. It demonstrates static vector graphics rendering, showing how shapes with different fill colors, stroke properties, and coordinate positions compose a single scene. The rendering approach relies entirely on SVG’s declarative markup, with no interactivity or data binding.

Jjerald-lim

73% match

Loading thumbnail…

SVG Fund

This example displays a single red circle on a blank canvas. The visualization is rendered as an SVG element, using a basic circle shape with center coordinates and a radius. The source data is a static HTML file, with the circle drawn directly within the SVG markup. The code relies solely on standard SVG syntax, with the circle element defining the visual, and no external JavaScript libraries or data-processing APIs are used. It shows a simple geometric form without any interaction or animation.

Vvcabgar

73% match

Loading thumbnail…

SVG Icons in JS

This example demonstrates how to embed SVG icons directly in JavaScript code as template strings, avoiding the need for separate image files. It displays three icons from heroicons.com—an arrow path, an external link, and a gear—centered in a flexbox layout. Using D3.js, the code maps over the icon keys and injects the SVG markup into div elements via the `.html()` method, then resizes each icon to 250 pixels wide. The approach highlights a clean, dependency-light way to manage icons in web visualizations.

CCurran Kelleher

72% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the core building blocks of SVG graphics, showing how basic shapes combine to form a static vector illustration. It features a red circle, a blue rectangle, a thick navy diagonal line, and an open path that creates a two-segment angular stroke on a 960x500 canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—defined directly in an `index.html` file without any JavaScript library. Each shape is styled via presentation attributes like `fill`, `stroke`, and `stroke-width`, while a comment in Spanish notes the markup. This is a pure, hand-authored SVG example, with no external data source.

JJhonatan Perera

72% match

Loading thumbnail…

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a scaled and translated coordinate system. The code uses raw SVG elements within an HTML document, applying CSS classes to style the line and path elements with black and green strokes. A white-filled group with black outlines is layered over earlier shapes to show overlap and composition. The visualization shows how SVG coordinates and grouping transforms can be combined to build simple geometric compositions without any external JavaScript libraries.

JJasonXu1244

72% match

Loading thumbnail…

SVG Fundamentals

This example displays a series of black circles arranged diagonally across a light background, created entirely with inline SVG elements. The page uses direct SVG markup within an HTML document, with each circle defined by its center coordinates (cx, cy) and radius (r), all filled with the color #0E0E0E. The visualization demonstrates fundamental SVG shape creation and positioning without any external libraries, relying on the native SVG rendering within the browser. The circles are placed at varied coordinates, showing how basic geometric primitives can be composed into a larger visual layout.

YYasen

72% match

Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Ppaddyokore39@gmail.com

72% match