Home / JavaScript / Font and Icon

🌊 SVG Wave is a tiny, free and beautiful SVG gradient waves generator for your UI or website desgin. It offers dead simple UI to customize, and style your waves based on your theme specifications.

🌊 SVG Wave - A tiny, customizable gradient SVG wave generator SVG Wave is a tiny, free and beautiful gradient SVG waves generator for your UI or webs
Information
Category: JavaScript / Font and Icon
Watchers: 2
Star: 158
Fork: 15
Last update: Oct 5, 2021
Resource links
https://www.svgwave.in
https://github.com/anup-a/svgwave

🌊 SVG Wave - A tiny, customizable gradient SVG wave generator

SVG Wave is a tiny, free and beautiful gradient SVG waves generator for your UI or website desgin. It offers dead simple UI to customize, and style your waves based on your theme specifications.

SVG Wave is a tiny UI tool built with Preact, tailwind and bundled with Webpack. ⚛

Updated ! - New Gradient Wave Support 🌈

Features

  • Adjust number of layers of waves 🏢
  • Modify the number of crest and trough ➰
  • Change Colors of waves 🎨
  • Export as SVG or PNG ⬇
  • Randomize 🔁
  • New cool Dark mode 🖤
  • Gradient fill to waves 🌈
  • Coming soon...

App ⭐

Contributions & Hacktoberfest ❤

We whole heartedly welcome new contributions either fixing a issue, adding a new customization or simply improving the stylings.

We truly ❤️ pull requests! If you wish to help, you can learn more about how you can contribute to this project in the contribution guide.

Give a star if you like It. 👍

Contributors

3 Open More issues
Closed

[React] Add button to invert waves upside down

  • Add Button to invert svg waves upside down.
  • Wave should remain down initially, but should swap to top of container and invert on button press.
  • something similar which to getwaves.io
enhancement good first issue hacktoberfest 
opened Oct 16, 2020 by anup-a 15
Closed

React: Add github star button in Navbar

Add github start button in the UI, with link to this repo.

Button styling should be as mentioned here - https://buttons.github.io/

enhancement good first issue hacktoberfest react 
opened Oct 2, 2021 by anup-a 13
Closed

Add animation feature to the waves

It would be really nice to have an animation for the waves, preferably an animation that the user can edit the speed of. 😄

Here are some visual examples that I found:

Nice project otherwise! 😃

enhancement help wanted hacktoberfest 
opened Oct 22, 2020 by Nojze 9
Closed

feat: Added Slider for Wave Height

Resolves #2

opened Oct 16, 2020 by Remakh 9
Closed

[React] Add loading animation to svgwave.in

As of now there is no loading animation till page fully renders.

Task is simple -

  • discuss/suggest the loading animation in thread ( theme compatible )
  • implement a loader in react app

Helpful links - loading.io

PS -try not to use any third-party libraries.

enhancement good first issue hacktoberfest 
opened Oct 16, 2020 by anup-a 8
Closed

use stopOpacity instead of #RRGGBBAA

Closes #26

Mapped opacity array from 0 to 1

- export const OPACITY_ARR = ['44', '66', '88', 'ff']
+ export const OPACITY_ARR = ['0.267', '0.4', '0.534', '1']

Tested the output with browser stack.

Earlier

image

Now

image

hacktoberfest hacktoberfest-accepted 
opened Oct 7, 2021 by il3ven 7
Open

feat: add wave modes

null

opened Jan 21, 2023 by anup-a 1
Open

Format code with prettier

null

opened Oct 27, 2022 by deepsource-autofix[bot] 1
Open

[React] Export svg images to webp

  • Allow waves to export as webp just like png
enhancement hacktoberfest 
opened Oct 26, 2022 by anup-a 0
Open

Make it mobile responsive

null

hacktoberfest 
opened Oct 4, 2022 by sarthakastic 6
Open

Format code with prettier

null

opened Sep 11, 2022 by deepsource-autofix[bot] 1
Open

preserveAspectRatio="none"

Firefox only stretches an SVG freely if it has preserveAspectRatio="none" set on the root svg element (see StackOverflow)

Please add this property to the generated SVG code.

opened Aug 14, 2022 by achimmihca 2

Contents

    asottile dead simple python dead code detection
    bokub :rainbow: Beautiful color gradients in terminal output
    catalinmiron React Native css gradients - react-native-linear-gradient with css gradient support
    renebrandel 🎨 Stupidly simple JS library to suggest you a good looking gradient
    lilipads Gradient Descent Viz is a desktop app that visualizes some popular gradient descent methods in machine learning
    teropa A UI for exploring the harmonic series of sine waves. Done with Angular 2, @ngrx, Immutable.js
    aykutkardas SVG Quick Editor is a free and open-source SVG editing tool.
    glorylab Widget for displaying waves with custom color, duration, floating and blur effects.
    fireship-io A website design with lots of waves, curves, a blobs
    rainner Syntaxy is a small and flexible syntax highlighter for the web. It uses one common theme file for all syntax languages to make it easier to customize the appearance to fit your theme. It has no dependencies out of the box, but can be used as a jQuery plugin, if you already have it loaded on your site.
    elephaint Probabilistic Gradient Boosting Machines (PGBM) is a probabilistic gradient boosting framework in Python based on PyTorch
    rishikksh20 NU-Wave: A Diffusion Probabilistic Model for Neural Audio Upsampling
    h2oai H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python
    f90 Implementation of the Wave-U-Net for audio source separation
    danklammer Tiny style-controlled SVG iconset (101 icons, 12kb)
    analokmaus Kaggle G2Net Gravitational Wave Detection : 2nd place solution
    NinjaWeedle A Multi-System emulator in Scratch 3.
    hwalsuklee A simple, concise tensorflow implementation of style transfer (neural style)
    lancifollia A Tiny, Pure Python implementation of Gradient Boosted Trees.
    DIYgod 🍰 Lovely theme for Tiny Tiny RSS
    apankrat Small and fast lib for smoothing visible banding in linear-gradient backgrounds.
    Share this repo

    Related Repos


    Font and Icon
    3
    SVG icons for Emacs Speedbar
    kcyarn Pretty Speedbar for Emacs Why turn off the ugly Emacs Speedbar icons when you can replace them with pretty SVG icons customized to match your theme? I
     
    Font and Icon
    10
    Open-source Tengwar font
    Tosche Alcarin Tengwar Alcarin Tengwar is a Tengwar typeface designed to pair well with the Brill typeface; Tengwar is an fictional writing system invented b
     
    Font and Icon
    9
    Budgie Desktop View is the official Budgie desktop icons application / implementation.
    BuddiesOfBudgie Budgie Desktop View Budgie Desktop View is the official Budgie desktop icons application / implementation. Scope The scope of this project is to provi
     
    Font and Icon
    6
    🍱 Simple nodejs support for using icons!
    Borrus-sudo 🍱 node-icons Usage Checkout its unit tests to see complete usage with output! import Icons from "node-icons"; const icons = Icons({ // auto install
     
    Font and Icon
    3.5k
    Font Awesome React component
    FortAwesome react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners
     
    Font and Icon
    3.4k
    Read and write OpenType fonts using JavaScript.
    opentypejs opentype.js · opentype.js is a JavaScript parser and writer for TrueType and OpenType fonts. It gives you access to the letterforms of text from the b
     
    Font and Icon
    22
    Custom stylesheet for filebrowser that adds colors and changes icons
    jniggemann Table of Contents About This Project What It Does Screenshot How To Use This License About this project Custom stylesheet for filebrowser that adds co
     
    Font and Icon
    295
    Lora fonts — serif family for text. Variable Open Source Font
    cyrealtype Lora Fonts by Olga Karpushina and Lora project authors Lora is a well-balanced contemporary serif with roots in calligraphy. It is a text typeface wit
     
    Font and Icon
    18
    This is an awesome project about Web Development tools. ⚡
    smthari Tools for web developers this repository contains a best and useful tools for web developers what we can use in our daily professional life like css code generators , ui generators , color generators , animation libraries , free icons, free vector , cheatsheet , editor playground, vs code extensions, chrome extensions etc...
     
    Font and Icon
    11
    Material Design Svg Icons for Vue.js
    yeliulee Material Design Svg Icons for Vue.js Library to render Material Design Svg Icons in Vue.js Never mind the project name, you can actually use any monoc
     
    Font and Icon
    10
    Radix Icons for Astro
    astro-community Radix Icons for Astro Radix Icons are a crisp set of 15×15 icons designed by the Modulz team. npm install @astropub/icons Usage All of the icons are a
     
    Font and Icon
    7
    HERE icons are visual cues of objects, points, actions, and tools found across HERE produc...
    heremaps HERE Icon Library HERE icons are visual cues of objects, points, actions, and tools found across our products. They are designed to complement our hum
     
    Font and Icon
    8
    IconGaGa a Node.js library of randomly generated icons.
    bytesfriends ICON-GAGA An awesome random icon builder! Explore the Sites » About The Project This library is mainly a way of randomly generating icons on one of ou
     
    Font and Icon
    16
    The home for our Cal Sans font.
    calendso Cal Sans 1.0 Introduction Cal Sans is a geometric sanserif tuned for display, that is, large point sizes. It is an Open Source typeface to adorn the h
     
    Font and Icon
    8
    This tool helps to convert svg to vue templates as icons
    Graxi Svg to vue Project Description This script helps to batch generate vue templates from svg files Instructions Run npm install to install dependencies P