Linear Gradient for SVG

xxxxxxxxxx

 

1

%%html

2

<style>

3

@import 

4

'https://fonts.googleapis.com/css?family=Ewert&effect=3d';

5

text {fill:#fff; font-family:Ewert; font-size:35px}

6

</style>

7

<svg width='400' height='80' class='font-effect-3d'>

8

<linearGradient id='b' x2='0' y2='100%'>

9

<stop offset='0' stop-color='slategray' stop-opacity='.1'/>

10

<stop offset='1' stop-opacity='.5'/>

11

</linearGradient>

12

<clipPath id='a'>

13

<rect width='400' height='80' rx='20'/>

14

</clipPath>

15

<g clip-path='url(#a)'>

16

<path fill='#ff3636' d='M0 0h280v80H0z'/>

17

<path fill='#3636ff' d='M290 0h120v80H290z'/>

18

<path fill='url(#b)' d='M0 0h290v80H0z'/>

19

<path fill='url(#b)' d='M290 0h120v80H290z'/>

20

</g>

21

<text x='10' y='45'>in progress</text>

22

<text x='325' y='45'>%</text>

23

</svg>

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages