/
Ellipse.js
76 lines (69 loc) · 1.64 KB
/
Ellipse.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React, {
Component
} from 'react';
import Svg, {
Ellipse
} from 'react-native-svg';
class EllipseExample extends Component{
static title = 'Ellipse';
render() {
return <Svg
height="100"
width="200"
>
<Ellipse
cx="50%"
cy="50%"
rx="45%"
ry="40%"
stroke="purple"
strokeWidth="2"
fill="yellow"
/>
</Svg>;
}
}
class PileEllipses extends Component{
static title = 'The following example creates three ellipses on top of each other';
render() {
return <Svg
height="120"
width="200"
>
<Ellipse cx="98" cy="60" rx="90" ry="30" fill="purple" />
<Ellipse cx="94" cy="45" rx="80" ry="25" fill="lime" />
<Ellipse cx="92" cy="30" rx="70" ry="20" fill="yellow" />
</Svg>;
}
}
class CombinedEllipses extends Component{
static title = 'The following example combines two ellipses (one yellow and one white)';
render() {
return <Svg
height="100"
width="200"
>
<Ellipse cx="100" cy="50" rx="90" ry="30" fill="yellow" />
<Ellipse cx="95" cy="50" rx="75" ry="20" fill="white" />
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<Ellipse
cx="10"
cy="10"
rx="8"
ry="4"
stroke="purple"
strokeWidth="1"
fill="yellow"
/>
</Svg>;
const samples = [EllipseExample, PileEllipses, CombinedEllipses];
export {
icon,
samples
};