Skip to main content
SimilarExport ZIP
100%

svg _ figma

✓ Published0🌍 Public
Yyoohayung10309@gmail.com
Last edited Nov 9, 2024
Created on Nov 9, 2024
Forked from SVG fundementals

This example shows four evenly spaced gray vertical bars of descending height, creating a simple bar chart-like composition on a white background. The chart is drawn entirely with static SVG `<rect>` elements, whose dimensions and positions are hardcoded in the markup. The page uses plain HTML and CSS, with no JavaScript libraries or data-binding logic present, and it is rendered directly in the browser via the SVG namespace.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart from figma

This example displays a static bar chart with four vertical bars in red, yellow, blue, and green, each with varying heights and positioned across a fixed 640×420 canvas. It uses raw SVG `<rect>` elements directly written in the HTML, with no JavaScript or data-binding libraries, and relies solely on hard-coded coordinates and dimensions for the bars. The rendering approach is pure SVG markup, with each bar’s fill color specified as a CSS color keyword.

Aavia62490
88% match
Loading thumbnail…

Bar SVG Fundamentals

This example demonstrates a basic bar chart rendered entirely as static SVG elements, with a grey background and four dark bars of varying heights. The chart uses raw SVG markup within an HTML page, with each bar drawn using a `<rect>` element that specifies its x and y position, width, height, and fill color. The visualization relies on manual coordinate and dimension values rather than any data-binding or layout algorithm, showing the fundamental building blocks of SVG-based graphics in a React-free, bare-minimum HTML context. The chart’s values are hard-coded, so it does not respond to data changes or user interaction.

Ssubratanp
84% match
Loading thumbnail…

SVG Fundementals

This example shows a minimalist bar chart created with five black rectangles of varying heights and positions on a white background, representing abstract data values across a 960-by-500 viewBox. It renders directly in SVG elements defined inline within the HTML, using the `rect` tag with explicit `x`, `y`, `width`, and `height` attributes. The code relies on basic CSS to remove page margins and set overflow to hidden, with no JavaScript libraries or external data sources involved.

11512978kamps@zuyd.nl
84% match
Loading thumbnail…

Pseudo Horizontal Bar chart

This example shows four black horizontal bars of varying lengths on a light gray background, with SVG text labels positioned to the left of each bar. The bars are rendered as SVG `rect` elements with fixed dimensions and positions, while the labels are drawn using SVG `path` elements that trace letterforms. The layout is hard-coded within the HTML, using no JavaScript libraries or data-binding frameworks. Instead, the visualization relies entirely on static SVG markup, making it a simple demonstration of how CSS and pure SVG can create a bar-chart-like composition.

AAshwani Sajwan
83% match
Loading thumbnail…

svg2

This example demonstrates a static bar chart rendered as inline SVG within an HTML page, using React conventions but no external libraries. It shows six rounded bars in descending height, with CSS classes controlling fill color, opacity, and paint-order, while inline styles override class rules for the background rectangle. The chart includes labeled categories A through F using SVG text elements. The page also displays two HTML divs with text, and loads the Atkinson Hyperlegible font from Google Fonts, with CSS controlling layout and typography throughout.

Ppoppy
83% match
Loading thumbnail…

Fork of SVG Fundamentals

This example shows a static bar chart-like composition built with raw SVG elements, displaying four gray rectangular bars of varying heights on a light background. The chart is accompanied by black text labels and path-based annotations, including the letter “A” and numeric values rendered as SVG `<path>` elements. The visualization is implemented using React with inline SVG markup, and the page imports the Archivo and IBM Plex Sans fonts via Google Fonts. The rendering approach relies entirely on hand-coded SVG coordinates and shapes without any data-driven JavaScript or charting library.

Cclara7227
82% match
Loading thumbnail…

Psuedo bar chart SVG from Figma

This example shows a pseudo bar chart rendered as static SVG rectangles on a gray background, with black bars of varying heights and positions representing categorical data values. The visualization relies on raw SVG elements—specifically `<rect>` tags—defined directly in the HTML, with fixed pixel coordinates and dimensions supplied from a Figma design. The code uses no JavaScript charting library; instead, it employs plain SVG and CSS styling within a React context. The layout is hardcoded, not generated from a dataset, and the bars’ heights and x-positions are manually set in the markup.

NNita
82% match
Loading thumbnail…

SVG fundamental

This example demonstrates fundamental SVG rendering in React, showing a bar chart with green rectangles of varying heights and a detailed axis with tick marks. The visualization uses raw SVG elements including `rect` for the bars and repeated `line` elements for the axis ticks, all defined directly in JSX within the HTML structure. The chart displays four data bars arranged horizontally on a white background within a 1280x832 viewBox, with the tallest bar on the right and progressively shorter bars moving left. The rendering relies entirely on static SVG markup without any JavaScript libraries or data processing.

Rrwata97
82% match