https://github.com/bsodium/svg-gradients
A collection of methods for rendering svg grainy/noisy gradients
https://github.com/bsodium/svg-gradients
experiment experimental-design featured gradient svg
Last synced: 2 months ago
JSON representation
A collection of methods for rendering svg grainy/noisy gradients
- Host: GitHub
- URL: https://github.com/bsodium/svg-gradients
- Owner: BSoDium
- License: gpl-2.0
- Created: 2024-06-03T23:16:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-07T12:59:00.000Z (over 1 year ago)
- Last Synced: 2025-03-01T00:30:22.467Z (7 months ago)
- Topics: experiment, experimental-design, featured, gradient, svg
- Language: TypeScript
- Homepage: https://svg-gradients.vercel.app/
- Size: 429 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SVG Gradients
This repository contains a collection of experiments with SVG turbulence-based gradients.
## Usage
The `LinearGradient` component is designed to be used as a drop-in replacement for the standard `linearGradient` element in SVG. Its expected usage is thoroughly documented in the source code, along with a few examples, which can be found in the `examples` directory.
## Installation
To set up the demo, clone the repository and run the following commands:
```sh
yarn install
yarn dev
```
## Examples
The following examples demonstrate possible use cases for the `LinearGradient` component:
- [Banner](./src/examples/Banner.tsx) - a simple material you banner with a gradient background
- [Linear debug animation](./src/examples/DebugAnimationLinear.tsx) - a debug animation that visualizes the linear turbulence field and its boundaries
- [Radial debug animation](./src/examples/DebugAnimationRadial.tsx) - a similar debug animation for the radial turbulence field
- [Flower](./src/examples/Flower.tsx) - a flower-like primitive shape with a gradient background
- [Multiple layers](./src/examples/MultipleLayers.tsx) - a composition of multiple layers with different turbulence settings and colors
- [Sparkle](./src/examples/Sparkle.tsx) - a simple sparkle animation with a gradient background
- [Text](./src/examples/Text.tsx) - a text element with a gradient background
- [Arch](./src/examples/Arch.tsx) - a more artistic composition with advanced masking techniques, featuring a transparent gradient background
- [Torus](./src/examples/Torus.tsx) - a torus-like primitive shape built with multiple layered gradients
- [Abstract](./src/examples/Abstract.tsx) - an abstract composition featuring a mix of masks, gradients, and shapes, showcasing the full potential of the `LinearGradient` and `RadialGradient` components