A music player that connects to your cloud/distributed storage.
1module UI.Svg.Elements exposing (dropboxLogo, ipfsLogo, loading, loadingWithSize, remoteStorageLogo)
2
3import Svg exposing (..)
4import Svg.Attributes exposing (..)
5
6
7
8-- LOGOS
9
10
11ipfsLogo : Int -> Svg Never
12ipfsLogo size =
13 svg
14 [ height (String.fromInt size)
15 , viewBox "0 0 511.99999 511.99998"
16 , width (String.fromInt size)
17 ]
18 [ -- Group 1
19 ----------
20 g
21 [ transform "translate(-50.017 -515.51)" ]
22 [ Svg.path
23 [ d "m283.13 546.35-160.74 92.806c0.32126 2.8543 0.32125 5.7352 0 8.5894l160.75 92.806c13.554-10.001 32.043-10.001 45.597 0l160.75-92.807c-0.32126-2.8543-0.32293-5.7338-0.001-8.588l-160.74-92.806c-13.554 10.001-32.044 10.001-45.599 0zm221.79 127.03-160.92 93.84c1.884 16.739-7.3611 32.751-22.799 39.489l0.18062 184.58c2.6325 1.1489 5.1267 2.5886 7.438 4.294l160.75-92.805c-1.884-16.739 7.3611-32.752 22.799-39.49v-185.61c-2.6325-1.1489-5.1281-2.5886-7.4394-4.294zm-397.81 1.0315c-2.3112 1.7054-4.8054 3.1465-7.438 4.2954v185.61c15.438 6.7378 24.683 22.75 22.799 39.489l160.74 92.806c2.3112-1.7054 4.8069-3.1465 7.4394-4.2954v-185.61c-15.438-6.7378-24.683-22.75-22.799-39.489l-160.74-92.81z"
24 , fill "currentColor"
25 ]
26 []
27 ]
28
29 -- Group 2
30 ----------
31 , g
32 [ fill "currentColor"
33 , transform "translate(0 -196.66)"
34 ]
35 [ Svg.path
36 [ d "m256 708.66 221.7-128v-256l-221.7 128v256z"
37 , fillOpacity "1"
38 ]
39 []
40 , Svg.path
41 [ d "m256 708.66v-256l-221.7-128v256l221.7 128z"
42 , fillOpacity ".75"
43 ]
44 []
45 , Svg.path
46 [ d "m34.298 324.66 221.7 128 221.7-128-221.7-128-221.7 128z"
47 , fillOpacity ".5"
48 ]
49 []
50 ]
51 ]
52
53
54dropboxLogo : Int -> Svg Never
55dropboxLogo size =
56 svg
57 [ height (String.fromInt size)
58 , viewBox "0 0 43 40"
59 , width (String.fromInt size)
60 ]
61 [ Svg.path
62 [ d "m12.5 0l-12.5 8.1 8.7 7 12.5-7.8-8.7-7.3zm-12.5 21.9l12.5 8.2 8.7-7.3-12.5-7.7-8.7 6.8zm21.2 0.9l8.8 7.3 12.4-8.1-8.6-6.9-12.6 7.7zm21.2-14.7l-12.4-8.1-8.8 7.3 12.6 7.8 8.6-7zm-21.1 16.3l-8.8 7.3-3.7-2.5v2.8l12.5 7.5 12.5-7.5v-2.8l-3.8 2.5-8.7-7.3z"
63
64 --
65 , fill "currentColor"
66 ]
67 []
68 ]
69
70
71remoteStorageLogo : Int -> Svg Never
72remoteStorageLogo size =
73 svg
74 [ clipRule "evenodd"
75 , fillRule "evenodd"
76 , height (String.fromInt size)
77 , imageRendering "optimizeQuality"
78 , shapeRendering "geometricPrecision"
79 , textRendering "geometricPrecision"
80 , viewBox "0 0 739 853"
81 , width (String.fromInt size)
82 ]
83 [ polygon
84 [ points "370,754 0,542 0,640 185,747 370,853 554,747 739,640 739,525 739,525 739,476 739,427 739,378 653,427 370,589 86,427 86,427 86,361 185,418 370,524 554,418 653,361 739,311 739,213 739,213 554,107 370,0 185,107 58,180 144,230 228,181 370,100 511,181 652,263 370,425 87,263 87,263 0,213 0,213 0,311 0,378 0,427 0,476 86,525 185,582 370,689 554,582 653,525 653,590 653,592"
85 , fill "currentColor"
86 ]
87 []
88 ]
89
90
91
92-- LOADING ANIMATION
93
94
95loading : Svg Never
96loading =
97 loadingWithSize 29
98
99
100loadingWithSize : Int -> Svg Never
101loadingWithSize size =
102 svg
103 [ class "loading-animation"
104 , height (String.fromInt size)
105 , viewBox "0 0 30 30"
106 , width (String.fromInt size)
107 ]
108 [ circle
109 [ class "loading-animation__circle"
110 , cx "15"
111 , cy "15"
112 , fill "none"
113 , r "14"
114 , strokeLinecap "round"
115 , strokeWidth "2"
116 ]
117 []
118 ]