Drop shadow for a line in react native - css

I want to implement a drop shadow for a line something like this:
What I did so far:
<View style=
{{
elevation: 5,
borderBottomWidth: 2,
bottom: 1,
}}
>
</View>


Use this code this might help you, Your can change the color as your theme.
cardContainer: {
borderBottomWidth: 1,
borderColor: #4d4d4d,
shadowColor: #4d4d4d,
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.8,
shadowRadius: 13.51,
elevation: 5,
}


import Svg, { LinearGradient, Defs, Stop, Rect } from 'react-native-svg'
<Svg height="100" width="100%" style={{ zIndex: 1, marginTop: -50 }}>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
<Stop offset="0" stopColor="#e6e6e6" stopOpacity="1" />
<Stop offset="1" stopColor="#e6e6e6" stopOpacity="0.01" />
</LinearGradient>
</Defs>
<Rect height="100" width="100%" fill="url(#grad)" />
</Svg>

Related

Transition <line> x1, y1, etc. attributes in SVG using CSS

I have an inline SVG in a svelte component that contains some <line>s which change their x1, x2, y1 and y2 attributes based on state. I want to transition between the changes with CSS but it just jumps to the new state instead of transitioning. I would like if there's a native solution with CSS but I can also use svelte transitions.
<button aria-pressed={active} on:click={toggleActive} {...$$restProps}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
{#if active}
<line x1="10" y1="10" x2="20" y2="20" />
<line x1="10" y1="30" x2="30" y2="10" />
<line x1="20" y1="20" x2="30" y2="30" />
{:else}
<line x1="5" y1="10" x2="35" y2="10" />
<line x1="5" y1="20" x2="35" y2="20" />
<line x1="5" y1="30" x2="35" y2="30" />
{/if}
</svg>
</button>
svg line {
stroke: black;
stroke-width: 5;
transition-property: x1, x2, y1, y2, all;
transition-duration: 5s;
}
I have tried using style attribute to set the coordinates based on this answer and that didn't work either.

Even if the attributes could be transitioned, this would not work because the attributes are not changed: The previous elements are discarded and fully replaced.
One thing you could do is use tweened stores, though there are probably better methods. E.g.
<script>
import { cubicOut } from 'svelte/easing';
import { tweened } from 'svelte/motion';
let active = false;
const stateActive = [10, 10, 20, 20, 10, 30, 30, 10, 20, 20, 30, 30];
const stateInactive = [5, 10, 35, 10, 5, 20, 35, 20, 5, 30, 35, 30];
const anim = stateInactive.map(v => tweened(v));
const [v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12] = anim;
$: anim.forEach((store, i) => store.set(
(active ? stateActive : stateInactive)[i],
{ duration: 500, easing: cubicOut }
));
</script>
<button aria-pressed={active} on:click={() => active = !active}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<line x1={$v1} y1={$v2} x2={$v3} y2={$v4} />
<line x1={$v5} y1={$v6} x2={$v7} y2={$v8} />
<line x1={$v9} y1={$v10} x2={$v11} y2={$v12} />
</svg>
</button>
REPL

When conditionally setting d= on the same path element the transition seems to be working in Chrome(109) and Firefox(110) but not in Safari (16). The mentioned d: path() in the comments doesn't seem to be supported yet caniuse Not sure if that's what's relevant in this case.
REPL
<script>
let active = true
</script>
<button on:click={() => active = !active}>
toggle
</button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path d="{active ? 'M10 10 L20 20' : 'M5 10 L35 10'}" />
<path d="{active ? 'M10 30 L30 10' : 'M5 20 L35 20'}" />
<path d="{active ? 'M20 20 L30 30' : 'M5 30 L35 30'}" />
</svg>
<style>
svg {
width: 200px;
}
path {
stroke: black;
stroke-width: 5;
transition: all 400ms;
}
</style>

how can I get the text around whatsapp fa icon?

I'm trying to put the svg text around the whatsapp fa icon, something like this
but unable to achieve desired result. this is what I'm getting so far.
I tried with the below code.
<a id='whatsapp'
style={{
bottom: '162px', right: '32px', fontSize: '3.3rem',
padding: '0.6rem', backgroundColor: '#70d470',
color: '#fff'
}}
href="https://wa.me/1232365326"
target="_blank" rel="noopener noreferrer"
className={`${visible ? "block whatsapp" : "none"}`}
>
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="8">
<textPath xlinkHref="#circle">
Need Appointment? Click me!
</textPath>
</text>
</svg>
<RiWhatsappFill/>
</a>

You could try using position: 'absolute' on the text, then aligning it manually.
Here's something that might work, give it a shot.
<a id='whatsapp'
style={{
bottom: '162px', right: '32px', fontSize: '3.3rem',
padding: '0.6rem', backgroundColor: '#70d470',
color: '#fff'
}}
href="https://wa.me/1232365326"
target="_blank" rel="noopener noreferrer"
className={`${visible ? "block whatsapp" : "none"}`}
>
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text style={{position: 'absolute', right: '32px', top: '2px'}} font-size="8">
<textPath xlinkHref="#circle">
Need Appointment? Click me!
</textPath>
</text>
</svg>
<RiWhatsappFill/>
</a>

SVG Filled path animation

I have a path with an arrow-head, and I want to make a color transition animation, from left to right.
I've done this for the line and arrow, but it does not appear to be in sync.
I want the line and arrow to both transition colors seamlessly.
Here's the fiddle: https://jsfiddle.net/afonsolfm/6ojwrksd/ .
HTML
<svg>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="green">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate dur="0s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<linearGradient id="left-to-right-arrow">
<stop offset="0" stop-color="green">
<animate begin="2s" dur="1s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<marker id="arrow-head" viewBox="-5 -5 10 10" refX="0" refY="0" orient="auto" markerWidth="10" markerHeight="10">
<path d="M -5 5, 0 0.3, -5 -5"></path>
</marker>
</defs>
<path class="line" d="M 10 100 A 500 500 0 0 1 500 100"></path>
</svg>
CSS
svg {
width: 600px;
height: 300px;
border: 1px solid green;
}
path {
fill: transparent;
}
.line {
marker-end: url(#arrow-head);
stroke: url(#left-to-right);
stroke-width: 10px;
}
#arrow-head {
stroke: url(#left-to-right-arrow);
}

Another approach is to put the gradient animation on a rectangle, then use your arrow as a mask.
svg {
width: 600px;
height: 300px;
border: 1px solid green;
}
path {
fill: transparent;
}
.line {
marker-end: url(#arrow-head);
stroke: white;
stroke-width: 10px;
}
#arrow-head {
stroke: white;
}
#masked-rect {
fill: url(#left-to-right);
mask: url(#arrow-mask);
}
<svg>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="green">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate dur="0s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<marker id="arrow-head" viewBox="-5 -5 10 10" refX="0" refY="0" orient="auto" markerWidth="10" markerHeight="10">
<path d="M -5 5, 0 0.3, -5 -5"></path>
</marker>
<mask id="arrow-mask">
<path class="line" d="M 10 100 A 500 500 0 0 1 500 100"></path>
</mask>
</defs>
<rect id="masked-rect" width="100%" height="100%"/>
</svg>

This seems better, you can experiment further with the numbers I guess. Basically I've tied the animations together and speeded up the marker one once it starts.
svg {
width: 600px;
height: 300px;
border: 1px solid green;
}
path {
fill: none;
}
.line {
marker-end: url(#arrow-head);
stroke: url(#left-to-right);
stroke-width: 10px;
}
#arrow-head {
stroke: url(#left-to-right-arrow);
}
<svg>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="green">
<animate id="a" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate dur="0s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<linearGradient id="left-to-right-arrow">
<stop offset="0" stop-color="green">
<animate begin="a.end-0.2s" dur="0.2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate begin="a.end-0.2s" dur="0.2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<marker id="arrow-head" viewBox="-5 -5 10 10" refX="0" refY="0" orient="auto" markerWidth="10" markerHeight="10">
<path d="M -5 5, 0 0.3, -5 -5"></path>
</marker>
</defs>
<path class="line" d="M 10 100 A 500 500 0 0 1 500 100"></path>
</svg>

Create SVG components with scoped CSS

I am creating React components that will render out various SVGs:
const Close = ({
fill, width, height, float,
}) => (
<svg width={ `${width}px` } height={ `${height}px` } viewBox="0 0 14.48 14.48" style={ { float: `${float}`, cursor: 'pointer' } }>
<title>x</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Background">
<line style={ { fill: 'none', stroke: `${fill}`, strokeMiterlimit: 10 } } x1="14.13" y1="0.35" x2="0.35" y2="14.13" />
<line style={ { fill: 'none', stroke: `${fill}`, strokeMiterlimit: 10 } } x1="14.13" y1="14.13" x2="0.35" y2="0.35" />
</g>
</g>
</svg>
);
It's very convenient to be able to supply various attributed to this component to control dimensions, colour, etc...
What I don't have a good solution for, however, is handling the styles in a DRY manner. Note the line elements have the same value for style. I presently have them written inline because if I added an embedded stylesheet, then I would get class name collisions with other SVGs I render elsewhere on the page (our SVG software uses the same classes over and over).
<style scoped> has been removed from the spec: https://github.com/whatwg/html/issues/552
Shadow DOM is not yet supported by Edge: https://caniuse.com/#feat=shadowdomv1
Is there any other alternative for scoping styles?

To combine the best of both worlds, you could create an external styles file, as you would for CSS, but with exported style objects. You could then import it into any file that needs it.
As example, main file:
import React, { Component } from 'react';
import { render } from 'react-dom';
import * as Styles from './svgstyles';
class App extends Component {
render() {
return (
<div>
<svg width="100" height="200" viewBox="0 0 100 200">
<rect x="0" y="0" width="10" height="10" style={Styles.style1} />
<rect x="15" y="0" width="10" height="10" style={Styles.style2} />
<rect x="30" y="0" width="10" height="10" style={Styles.style3} />
<rect x="45" y="0" width="10" height="10" style={Styles.style4} />
<rect x="0" y="15" width="10" height="10" style={Styles.style4} />
<rect x="15" y="15" width="10" height="10" style={Styles.style3} />
<rect x="30" y="15" width="10" height="10" style={Styles.style2} />
<rect x="45" y="15" width="10" height="10" style={Styles.style1} />
</svg>
</div>
);
}
}
render(<App />, document.getElementById('root'));
And an external styles file:
export const style1 = {
stroke: 'red',
strokeWidth: "1",
fill: "blue",
}
export const style2 = {
stroke: 'red',
strokeWidth: "1",
fill: "green",
}
export const style3 = {
stroke: 'red',
strokeWidth: "1",
fill: "yellow",
}
export const style4 = {
...style3,
fill: "pink",
}
Live example here

If you just want to DRY up the code, you could create one style-object and reuse it:
const Close = ({
fill, width, height, float,
}) => {
const style = { fill: 'none', stroke: `${fill}`, strokeMiterlimit: 10 }
return (
<svg width={ `${width}px` } height={ `${height}px` } viewBox="0 0 14.48 14.48" style={ { float: `${float}`, cursor: 'pointer' } }>
<title>x</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Background">
<line style={ style } x1="14.13" y1="0.35" x2="0.35" y2="14.13" />
<line style={ style } x1="14.13" y1="14.13" x2="0.35" y2="0.35" />
</g>
</g>
</svg>
);
}
This would also result in a small performance improvement since fewer objects would be created in each render cycle.

Actually, if I was in your place, Surely I use fonts instead of SVGs, but for your exact question, I prefer to use constant variables inside of my arrow function, just like below:
import React from 'react';
const Close = ({ fill, width, height, float }) => {
const constStyle = { fill: 'none', stroke: `${fill}`, strokeMiterlimit: 10 };
return (
<svg
width={`${width}px`}
height={`${height}px`}
viewBox="0 0 14.48 14.48"
style={{ float: `${float}`, cursor: 'pointer' }}
>
<title>x</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Background">
<line style={constStyle} x1="14.13" y1="0.35" x2="0.35" y2="14.13" />
<line style={constStyle} x1="14.13" y1="14.13" x2="0.35" y2="0.35" />
</g>
</g>
</svg>
);
};
export default Close;
Even, I make the line dimension variables as props, but I don't know what is your case exactly.
Hope this answer helps you.

How to (properly) reuse a SVG with linearGradient multiple times on a single page

I'm using the following SVG of a Google Play download button. There are 4 <linearGradient> inside <defs>.
<linearGradient> requires an ID for CSS to reference as a fill. I'd rather not use IDs since I'm going to have two of these icons on a single page, causing the page to have duplicate IDs. Any ideas of an alternative way to achieve this?
SVG Code:
<svg viewBox='0 0 135 40'>
<path d='M130,40H5c-2.8,0-5-2.2-5-5V5c0-2.7,2.2-5,5-5h125c2.8,0,5,2.2,5,5v30C135,37.7,132.8,40,130,40z'/>
<path className='st0' d='M130,0.8c2.3,0,4.2,1.9,4.2,4.2v30c0,2.3-1.9,4.2-4.2,4.2H5c-2.3,0-4.2-1.9-4.2-4.2V5c0-2.3,1.9-4.2,4.2-4.2 H130 M130,0H5C2.3,0,0,2.3,0,5v30c0,2.8,2.2,5,5,5h125c2.8,0,5-2.2,5-5V5C135,2.3,132.8,0,130,0L130,0z'/>
<path className='st1' d='M47.4,10.2c0,0.8-0.2,1.5-0.7,2c-0.6,0.6-1.3,0.9-2.2,0.9c-0.9,0-1.6-0.3-2.2-0.9c-0.6-0.6-0.9-1.3-0.9-2.2 c0-0.9,0.3-1.6,0.9-2.2c0.6-0.6,1.3-0.9,2.2-0.9c0.4,0,0.8,0.1,1.2,0.3c0.4,0.2,0.7,0.4,0.9,0.7l-0.5,0.5 c-0.4-0.5-0.9-0.7-1.6-0.7c-0.6,0-1.2,0.2-1.6,0.7c-0.5,0.4-0.7,1-0.7,1.7s0.2,1.3,0.7,1.7c0.5,0.4,1,0.7,1.6,0.7 c0.7,0,1.2-0.2,1.7-0.7c0.3-0.3,0.5-0.7,0.5-1.2h-2.2V9.8h2.9C47.4,9.9,47.4,10.1,47.4,10.2z'/>
<path className='st1' d='M52,7.7h-2.7v1.9h2.5v0.7h-2.5v1.9H52V13h-3.5V7H52V7.7z'/>
<path className='st1' d='M55.3,13h-0.8V7.7h-1.7V7H57v0.7h-1.7V13z' />
<path className='st1' d='M59.9,13V7h0.8v6H59.9z' />
<path className='st1' d='M64.1,13h-0.8V7.7h-1.7V7h4.1v0.7h-1.7V13z' />
<path className='st1' d='M73.6,12.2c-0.6,0.6-1.3,0.9-2.2,0.9c-0.9,0-1.6-0.3-2.2-0.9c-0.6-0.6-0.9-1.3-0.9-2.2s0.3-1.6,0.9-2.2 c0.6-0.6,1.3-0.9,2.2-0.9c0.9,0,1.6,0.3,2.2,0.9c0.6,0.6,0.9,1.3,0.9,2.2C74.5,10.9,74.2,11.6,73.6,12.2z M69.8,11.7 c0.4,0.4,1,0.7,1.6,0.7s1.2-0.2,1.6-0.7c0.4-0.4,0.7-1,0.7-1.7S73.5,8.7,73,8.3c-0.4-0.4-1-0.7-1.6-0.7s-1.2,0.2-1.6,0.7 c-0.4,0.4-0.7,1-0.7,1.7S69.3,11.3,69.8,11.7z'/>
<path className='st1' d='M75.6,13V7h0.9l2.9,4.7h0l0-1.2V7h0.8v6h-0.8l-3.1-4.9h0l0,1.2V13H75.6z'/>
<path className='st2' d='M68.1,21.8c-2.4,0-4.3,1.8-4.3,4.3c0,2.4,1.9,4.3,4.3,4.3c2.4,0,4.3-1.8,4.3-4.3 C72.4,23.5,70.5,21.8,68.1,21.8z M68.1,28.6c-1.3,0-2.4-1.1-2.4-2.6c0-1.5,1.1-2.6,2.4-2.6c1.3,0,2.4,1,2.4,2.6 C70.5,27.5,69.4,28.6,68.1,28.6z M58.8,21.8c-2.4,0-4.3,1.8-4.3,4.3c0,2.4,1.9,4.3,4.3,4.3c2.4,0,4.3-1.8,4.3-4.3 C63.1,23.5,61.2,21.8,58.8,21.8z M58.8,28.6c-1.3,0-2.4-1.1-2.4-2.6c0-1.5,1.1-2.6,2.4-2.6c1.3,0,2.4,1,2.4,2.6 C61.2,27.5,60.1,28.6,58.8,28.6z M47.7,23.1v1.8h4.3c-0.1,1-0.5,1.8-1,2.3c-0.6,0.6-1.6,1.3-3.3,1.3c-2.7,0-4.7-2.1-4.7-4.8 s2.1-4.8,4.7-4.8c1.4,0,2.5,0.6,3.3,1.3l1.3-1.3c-1.1-1-2.5-1.8-4.5-1.8c-3.6,0-6.7,3-6.7,6.6c0,3.6,3.1,6.6,6.7,6.6 c2,0,3.4-0.6,4.6-1.9c1.2-1.2,1.6-2.9,1.6-4.2c0-0.4,0-0.8-0.1-1.1H47.7z M93.1,24.5c-0.4-1-1.4-2.7-3.6-2.7c-2.2,0-4,1.7-4,4.3 c0,2.4,1.8,4.3,4.2,4.3c1.9,0,3.1-1.2,3.5-1.9l-1.4-1c-0.5,0.7-1.1,1.2-2.1,1.2c-1,0-1.6-0.4-2.1-1.3l5.7-2.4L93.1,24.5z M87.3,25.9c0-1.6,1.3-2.5,2.2-2.5c0.7,0,1.4,0.4,1.6,0.9L87.3,25.9z M82.6,30h1.9V17.5h-1.9V30z M79.6,22.7L79.6,22.7 c-0.5-0.5-1.3-1-2.3-1c-2.1,0-4.1,1.9-4.1,4.3c0,2.4,1.9,4.2,4.1,4.2c1,0,1.8-0.5,2.2-1h0.1v0.6c0,1.6-0.9,2.5-2.3,2.5 c-1.1,0-1.9-0.8-2.1-1.5l-1.6,0.7c0.5,1.1,1.7,2.5,3.8,2.5c2.2,0,4-1.3,4-4.4V22h-1.8V22.7z M77.4,28.6c-1.3,0-2.4-1.1-2.4-2.6 c0-1.5,1.1-2.6,2.4-2.6c1.3,0,2.3,1.1,2.3,2.6C79.7,27.5,78.7,28.6,77.4,28.6z M101.8,17.5h-4.5V30h1.9v-4.7h2.6 c2.1,0,4.1-1.5,4.1-3.9S103.9,17.5,101.8,17.5z M101.9,23.5h-2.7v-4.3h2.7c1.4,0,2.2,1.2,2.2,2.1C104,22.4,103.2,23.5,101.9,23.5z M113.4,21.7c-1.4,0-2.8,0.6-3.3,1.9l1.7,0.7c0.4-0.7,1-0.9,1.7-0.9c1,0,1.9,0.6,2,1.6v0.1c-0.3-0.2-1.1-0.5-1.9-0.5 c-1.8,0-3.6,1-3.6,2.8c0,1.7,1.5,2.8,3.1,2.8c1.3,0,1.9-0.6,2.4-1.2h0.1v1h1.8v-4.8C117.2,23,115.5,21.7,113.4,21.7z M113.2,28.6 c-0.6,0-1.5-0.3-1.5-1.1c0-1,1.1-1.3,2-1.3c0.8,0,1.2,0.2,1.7,0.4C115.2,27.8,114.2,28.6,113.2,28.6z M123.7,22l-2.1,5.4h-0.1 l-2.2-5.4h-2l3.3,7.6l-1.9,4.2h1.9l5.1-11.8H123.7z M106.9,30h1.9V17.5h-1.9V30z'/>
<path className='st3' d='M10.4,7.5C10.1,7.8,10,8.3,10,8.9v22.1c0,0.6,0.2,1.1,0.5,1.4l0.1,0.1l12.4-12.4V20v-0.1L10.4,7.5L10.4,7.5z' />
<path className='st4' d='M27,24.3l-4.1-4.1V20v-0.1l4.1-4.1l0.1,0.1l4.9,2.8c1.4,0.8,1.4,2.1,0,2.9L27,24.3L27,24.3z' />
<path className='st5' d='M27.1,24.2L22.9,20L10.4,32.5c0.5,0.5,1.2,0.5,2.1,0.1L27.1,24.2' />
<path className='st6' d='M27.1,15.8L12.5,7.5c-0.9-0.5-1.6-0.4-2.1,0.1L22.9,20L27.1,15.8z' />
<path className='st7' d='M27,24.1l-14.5,8.2c-0.8,0.5-1.5,0.4-2,0l0,0l-0.1,0.1l0,0l0.1,0.1l0,0c0.5,0.4,1.2,0.5,2,0L27,24.1L27,24.1 z' />
<path className='st8' d='M10.4,32.3C10.1,32,10,31.5,10,30.9v0.1c0,0.6,0.2,1.1,0.5,1.4V32.3L10.4,32.3z' />
<path className='st8' d='M32,21.3l-5,2.8l0.1,0.1l4.9-2.8c0.7-0.4,1-0.9,1-1.4l0,0C33,20.5,32.6,20.9,32,21.3z' />
<path className='st9' d='M12.5,7.6L32,18.7c0.6,0.4,1,0.8,1,1.3l0,0c0-0.5-0.3-1-1-1.4L12.5,7.5C11.1,6.7,10,7.3,10,8.9v0.1 C10,7.5,11.1,6.8,12.5,7.6z' />
<defs>
<linearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='21.8'
y1='33.29' x2='5.017' y2='16.508' gradientTransform='matrix(1 0 0 -1 0 42)'>
<stop offset='0' stopColor='#00a0ff' />
<stop offset='0.007' stopColor='#00a1ff' />
<stop offset='0.26' stopColor='#00beff' />
<stop offset='0.512' stopColor='#00d2ff' />
<stop offset='0.76' stopColor='#00dfff' />
<stop offset='1' stopColor='#00e3ff' />
</linearGradient>
<linearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='33.834'
y1='21.999' x2='9.637' y2='21.999' gradientTransform='matrix(1 0 0 -1 0 42)'>
<stop offset='0' stopColor='#ffe000' />
<stop offset='0.409' stopColor='#ffbd00' />
<stop offset='0.775' stopColor='orange' />
<stop offset='1' stopColor='#ff9c00' />
</linearGradient>
<linearGradient id='SVGID_3_' gradientUnits='userSpaceOnUse' x1='24.827'
y1='19.704' x2='2.069' y2='-3.054' gradientTransform='matrix(1 0 0 -1 0 42)'>
<stop offset='0' stopColor='#ff3a44' />
<stop offset='1' stopColor='#c31162' />
</linearGradient>
<linearGradient id='SVGID_4_' gradientUnits='userSpaceOnUse' x1='7.297'
y1='41.824' x2='17.46' y2='31.661' gradientTransform='matrix(1 0 0 -1 0 42)'>
<stop offset='0' stopColor='#32a071' />
<stop offset='0.069' stopColor='#2da771' />
<stop offset='0.476' stopColor='#15cf74' />
<stop offset='0.801' stopColor='#06e775' />
<stop offset='1' stopColor='#00f076' />
</linearGradient>
</defs>
</svg>
CSS:
.st0{
fill:#A6A6A6;
}
.st1{
fill: #FFFFFF;
stroke: #FFFFFF;
stroke-width: 0.2;
stroke-miterlimit: 10;
}
.st2{
fill: #FFFFFF;
}
.st3{
fill: url(#SVGID_1_);
}
.st4{
fill: url(#SVGID_2_);
}
.st5{
fill: url(#SVGID_3_);
}
.st6{
fill: url(#SVGID_4_);
}
.st7{
opacity: 0.2;
enable-background: new;
}
.st8{
opacity: 0.12;
enable-background: new;
}
.st9{
opacity: 0.25;
fill: #FFFFFF;
enable-background:new;
}

Resources