readme-animated-sweetbanner

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

readme-animated-sweetbanner

(★ 63)

A tool to create aesthetic animated banners using SVG for your github profile.

readme-animated-sweetbanner Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Animated Sweet Banner</h1>

<p align="center">
    A web-based editor for creating animated SVG banners for GitHub profiles. Build custom sweet banners with meteors, glowing avatars, and animated effects.
</p>

## Example

![Sweet Banner Example](https://github.com/user-attachments/assets/484c1d55-7321-4c2b-9d99-0648f5c7e92f)

## Features

- **Animated Meteors** - Add flying icon meteors with customizable trails, colors, and timing
- **Avatar Integration** - Display your GitHub avatar with animated glow effects
- **Live Preview** - See changes in real-time as you edit
- **SVG Export** - Download or copy the generated SVG code
- **Customizable Effects** - Adjust waves, particles, borders, and gradients

## Tech Stack

- React 19 + TypeScript
- Vite
- Tailwind CSS
- shadcn/ui components
- Lucide icons

## Getting Started

```bash
# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build
```

## Usage

1. Configure banner dimensions and background color
2. Set your avatar URL and size
3. Add meteors with icons from Iconify
4. Customize colors, timing, and animation properties
5. Copy the SVG code or download the file
6. Add just the banner line at the end of the copied SVG code to the beginning of your Repos Readme.md, you can also **just drag and drop the svg file**
    ```markdown
    ![banner(1)](https://github.com/user-attachments/assets/...)
    ```

## Icon Libraries

- **[Iconify](https://iconify.design/)** - Icons aggregator. +50k icons

## Configuration Options

| Setting    | Description                               |
| ---------- | ----------------------------------------- |
| Border     | Border size, angle, and color             |
| Background | Solid color background                    |
| Avatar     | GitHub avatar URL and size                |
| Meteors    | Icon, trail color, angle, duration, delay |
| Particles  | Floating particle count and color         |
| Waves      | Animated wave gradient colors             |
| Glow       | Avatar glow gradient colors               |
| Border     | Optional border with radius and size      |

## License

MIT

readme-animated-sweetbanner

readme-animated-sweetbanner Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

readme-animated-sweetbanner

readme-animated-sweetbanner Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README