Partial Fill Icon

100%

Partial Fill Icon

✓ Published0🌍 Public

Last edited Apr 5, 2021

Created on Mar 19, 2021

This example shows a single tree icon rendered as an SVG path, where a linear gradient fills 40% of the shape with green and the remaining portion with a muted gray-green. The fill amount is passed as a prop to a React component, with the gradient stops using that value to create the partial-fill effect. The code uses React 16.13.1 to render the SVG, and the gradient is defined with `<linearGradient>` and `<stop>` elements, using `gradientUnits="userSpaceOnUse"` to position the fill relative to the icon’s bounding box. The static fill amount is hard-coded to 0.4 in the `App` component.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Test

This example demonstrates basic SVG shape rendering in a React application, combining a circle, a rectangle, and an icon path from Bootstrap Icons. The SVG elements are drawn directly in the HTML markup, with the rectangle using a pink stroke for visual emphasis. The code also includes Bootstrap Icons styling through the `fill="currentColor"` attribute and viewBox coordinate system. As a minimal starter, it shows how static SVG graphics can be embedded in a React component without additional visualization libraries.

KKatrin Schönborn

70% match

Loading thumbnail…

SVG shapes

This example demonstrates basic SVG shape rendering in a React visualization, showing circles, rectangles, lines, and a path. The shapes appear in three groups, with the first two displaying default and explicit fill colors, while the third uses a combined fill and stroke style. The line and path elements use a CSS class to apply black strokes with rounded joins. The SVG is scaled by 1.5 and uses inline transformation attributes like `translate` to position groups, with rendering handled directly through SVG markup rather than a charting library.

CChinzorigt Ganbat

68% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within a React-based HTML page. It shows how circles, rectangles, lines, and paths are rendered with SVG attributes, including fill colors, stroke widths, and hover transitions. CSS rules apply a red fill with a black stroke to rectangles, and a hover effect transitions the fill to orange while expanding the stroke width over 2000ms. The visualization uses inline SVG markup directly in the HTML, with no external data source, showcasing basic vector graphics techniques.

Bbhargav83

67% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and grouped using CSS and SVG transform attributes. It shows circles and rectangles rendered with default black fills, then with explicit green and blue fills, and finally inside a group that applies red fill with a black stroke via CSS properties. A line and a path illustrate stroke styling, where the path inherits a purple stroke and round line joins from a CSS class. The SVG is rendered inside a React-based HTML page, with the root group scaled by 1.1 and the lower group translated vertically.

Eevapavlinek

67% match

Loading thumbnail…

SVG

This example showcases fundamental SVG shapes in a minimal React and CSS context. The visualization presents a green circle scaled up, a yellow rectangle with a black stroke translated downward on the canvas, and a set of black lines and a path with a rounded blue stroke. The code uses SVG elements like `circle`, `rect`, `line`, and `path` within an `svg` container, applying CSS classes and inline transformations for positioning and styling.

Eeman1718

67% match

Loading thumbnail…

Concentric circles

Hundreds of small, concentric black-and-white circular path forms are scattered across a grey SVG canvas, each with a unique fill color derived from its index. The React app generates 300 shapes using the `map` function, positioning them randomly via the `translate` transform and scaling each by 0.5. The `Path` component contains an SVG path element, and the code includes a radialGradient definition and a shadow filter, though the gradient is commented out.

NNita

67% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using four primitive shapes: a circle with a red-to-blue radial gradient, a larger circle with a centered radial gradient, a blue-outlined rectangle, and a red line. The SVG markup defines two radialGradient elements within a defs block, using stop tags to specify color transitions. A linearGradient is also declared but not referenced by any shape. The 800x400 canvas is rendered directly in HTML, with gradients using the url(#id) reference syntax.

Aalexscott-untitled

67% match

Loading thumbnail…

Concentric circles -linear gradient

A generative SVG visualization renders concentric circles with a linear gradient background, using React components to map 50 angular positions across 50 radial steps. Each circle’s radius is randomly scaled and filled with a radial gradient defined in SVG defs, while the backdrop uses CSS linear-gradient. The code computes positions via Math.cos and Math.sin, and applies a drop-shadow filter with cyan glow.

NNita

66% match