FullstackStation / React Native Svg Animated Linear Gradient
Licence: mit
A wrap SVG component for animated linear gradient
Stars: ✭ 418
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Svg Animated Linear Gradient
Jeelizweboji
JavaScript/WebGL real-time face tracking and expression detection library. Build your own emoticons animated in real time in the browser! SVG and THREE.js integration demos are provided.
Stars: ✭ 835 (+99.76%)
Mutual labels: svg, animated
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: ✭ 137 (-67.22%)
Mutual labels: expo, animated
Svg Gauge
Minimalistic, animated SVG gauge. Zero dependencies
Stars: ✭ 188 (-55.02%)
Mutual labels: svg, animated
React Native Examples
A repo that contain React Native examples most related to tutorials I publish
Stars: ✭ 222 (-46.89%)
Mutual labels: expo, animated
React Svg Buttons
React configurable animated svg buttons
Stars: ✭ 209 (-50%)
Mutual labels: svg, animated
Popmotion
Simple animation libraries for delightful user interfaces
Stars: ✭ 18,656 (+4363.16%)
Mutual labels: svg
Svg Screenshots
📸🧩 Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.
Stars: ✭ 404 (-3.35%)
Mutual labels: svg
Britecharts
Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
Stars: ✭ 3,688 (+782.3%)
Mutual labels: svg
Shapeshifter
SVG icon animation tool for Android, iOS, and the web
Stars: ✭ 3,705 (+786.36%)
Mutual labels: svg
Icons
Official open source SVG icon library for Bootstrap.
Stars: ✭ 5,735 (+1272.01%)
Mutual labels: svg
Jquery.flowchart
JQuery plugin that allows you to draw a flow chart.
Stars: ✭ 413 (-1.2%)
Mutual labels: svg
Deepsvg
[NeurIPS 2020] Official code for the paper "DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation". Includes a PyTorch library for deep learning with SVG data.
Stars: ✭ 403 (-3.59%)
Mutual labels: svg
Sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Stars: ✭ 21,131 (+4955.26%)
Mutual labels: svg
Verovio
🎵 Music notation engraving library for MEI with MusicXML and Humdrum support and various toolkits (JavaScript, Python)
Stars: ✭ 375 (-10.29%)
Mutual labels: svg
Bangumi
💫 An unofficial bgm.tv app client for Android and iOS, built with React Native. 类似专门做ACG的豆瓣, 已适配 iOS/Android, mobile/Pad, light/dark theme, 并加入了很多独有的增强功能
Stars: ✭ 409 (-2.15%)
Mutual labels: expo
Jam
Jam icons is a set of SVG icons designed for web projects, illustrations, print projects, etc. Licensed under MIT
Stars: ✭ 398 (-4.78%)
Mutual labels: svg
SVG Animated Linear Gradient [iOS + Android]
This component make Animated Linear Gradient for all SVG components as child props. You can use this component as loading component like Facebook or Instagram, used for any group of svg.
This component is using expo, if you don't want to use expo, feel free to fork this repo and remove expo, and use react-native-svg instead, or use the forked repo react-native-content-loader
Demo
|
|
Usage
npm i react-native-svg-animated-linear-gradient --save
npm i react-native-svg
react-native link react-native-svg
Inside your component:
import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient'
import Svg, {Circle, Rect, .... } from 'react-native-svg'
Examples
Instagram style
<SvgAnimatedLinearGradient height={300}>
<Circle cx="30" cy="30" r="30"/>
<Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
<Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
<Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
</SvgAnimatedLinearGradient>
Facebook style
<SvgAnimatedLinearGradient
primaryColor="#e8f7ff"
secondaryColor="#4dadf7"
height={140}>
<Rect x="0" y="0" rx="5" ry="5" width="70" height="70"/>
<Rect x="80" y="17" rx="4" ry="4" width="300" height="13"/>
<Rect x="80" y="40" rx="3" ry="3" width="250" height="10"/>
<Rect x="0" y="80" rx="3" ry="3" width="350" height="10"/>
<Rect x="0" y="100" rx="3" ry="3" width="200" height="10"/>
<Rect x="0" y="120" rx="3" ry="3" width="360" height="10"/>
</SvgAnimatedLinearGradient>
Code style
<SvgAnimatedLinearGradient
primaryColor="#fff0f6"
secondaryColor="#f783ac"
height={80}>
<Rect x="0" y="0" rx="3" ry="3" width="70" height="10"/>
<Rect x="80" y="0" rx="3" ry="3" width="100" height="10"/>
<Rect x="190" y="0" rx="3" ry="3" width="10" height="10"/>
<Rect x="15" y="20" rx="3" ry="3" width="130" height="10"/>
<Rect x="155" y="20" rx="3" ry="3" width="130" height="10"/>
<Rect x="15" y="40" rx="3" ry="3" width="90" height="10"/>
<Rect x="115" y="40" rx="3" ry="3" width="60" height="10"/>
<Rect x="185" y="40" rx="3" ry="3" width="60" height="10"/>
<Svg.Rect x="0" y="60" rx="3" ry="3" width="30" height="10"/>
</SvgAnimatedLinearGradient>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| primaryColor | String | '#eeeeee' | Primary color, also background color |
| secondaryColor | String | '#dddddd' | Secondary color |
| duration | Number | 2000 | Animation duration in milliseconds |
| width | Number | 300 | Width of SVG |
| height | Number | 200 | Height of SVG |
| x1 | String | '0' | x of point star gradient, accept Number or Percentage |
| y1 | String | '0' | y of point star gradient, accept Number or Percentage |
| x2 | String | '100%' | x of point end gradient, accept Number or Percentage |
| y2 | String | '0' | y of point end gradient, accept Number or Percentage |
| offset | Number | 1 | Gradient offset value of animation |
TODO
- Write test
My blog about React/React Native
- (Vietnamese only) Fullstack Station
Thankful
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].