1
1
<!doctype html>
2
2
< html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 " />
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6
+ < meta
7
+ name ="description "
8
+ content ="SVG Wave is a minimal svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs. "
9
+ />
10
+ < meta
11
+ name ="title "
12
+ content ="Svg Wave - A free and beautiul gradient SVG wave Generator. "
13
+ />
14
+ < title > Svg Wave - A free & beautiful gradient SVG wave Generator.</ title >
15
+ < meta property ="og:type " content ="website " />
16
+ < meta property ="og:url " content ="https://www.svgwave.in " />
17
+ < meta
18
+ property ="og:title "
19
+ content ="Svg Wave - A free & beautiul gradient SVG wave Generator. "
20
+ />
21
+ < meta
22
+ property ="og:description "
23
+ content ="SVG Wave is a minimal gradient svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs. "
24
+ />
25
+ < meta
26
+ property ="og:image "
27
+ content ="https://svgwave.in/images/29cf875dd59e3301be675929e0ea67a8-3-01.svg "
28
+ />
29
+ < meta property ="twitter:card " content ="summary_large_image " />
30
+ < meta property ="twitter:url " content ="https://www.svgwave.in " />
31
+ < meta
32
+ property ="twitter:title "
33
+ content ="Get Waves – Create SVG waves for your next design "
34
+ />
35
+ < meta
36
+ property ="twitter:description "
37
+ content ="SVG Wave is a minimal gradient svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs. "
38
+ />
39
+ < meta property ="twitter:image " content ="./assets/bg.png " />
40
+ < link rel ="shortcut icon " href ="./assets/3-01.svg " />
41
+ < link rel ="preconnect " href ="https://fonts.googleapis.com " />
42
+ < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin />
43
+ < link
44
+ href ="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;800&display=swap "
45
+ rel ="stylesheet "
46
+ />
47
+ < style >
48
+ .loader-container {
49
+ width : 100% ;
50
+ height : 100vh ;
51
+ background-color : # eee ;
52
+ display : flex;
53
+ justify-content : center;
54
+ align-items : center;
55
+ }
56
+
57
+ .loader {
58
+ width : 100px ;
59
+ height : 100px ;
60
+ background-color : # 4de6d4 ;
61
+ border-radius : 50% ;
62
+ position : relative;
63
+ overflow : hidden;
64
+ }
65
+
66
+ .loader : after {
67
+ content : '' ;
68
+ position : absolute;
69
+ width : 100px ;
70
+ height : 100px ;
71
+ background-color : # fff ;
72
+ }
73
+
74
+ .loader : before {
75
+ content : '' ;
76
+ position : absolute;
77
+ width : 100px ;
78
+ height : 100px ;
79
+ background-color : # fff ;
80
+ }
81
+
82
+ .loader : before {
83
+ top : -40px ;
84
+ border-radius : 50% ;
85
+ background : rgba (255 , 255 , 255 , 0.7 );
86
+ animation : wave 5s linear infinite;
87
+ }
88
+
89
+ .loader : after {
90
+ top : -40px ;
91
+ border-radius : 30% ;
92
+ background : rgba (255 , 255 , 255 , 0.3 );
93
+ animation : wave 5s linear infinite;
94
+ }
95
+
96
+ @keyframes moveTheWave {
97
+ 0% {
98
+ stroke-dashoffset : -3 ;
99
+ transform : translate3d (0 , 0 , 0 );
100
+ }
101
+
102
+ 100% {
103
+ stroke-dashoffset : -138 ;
104
+ transform : translate3d (-90px , 0 , 0 );
105
+ }
106
+ }
107
+ </ style >
108
+
109
+ < style >
110
+ # carbonads {
111
+ font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto,
112
+ Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue' , Helvetica, Arial,
113
+ sans-serif;
114
+ max-width : 300px ;
115
+ }
116
+
117
+ # carbonads > span {
118
+ display : block;
119
+ position : relative;
120
+ padding : 10px ;
121
+
122
+ border-radius : 4px ;
123
+ background-color : # fff ;
124
+ box-shadow :
125
+ 0 0 1px 1px hsla (0 , 0% , 0% , 0.05 ),
126
+ 0 0 2px 2px hsla (0 , 0% , 0% , 0.05 ),
127
+ 0 0 4px 4px hsla (0 , 0% , 0% , 0.05 );
128
+ }
129
+
130
+ # carbonads .carbon-wrap {
131
+ display : flex;
132
+ }
133
+
134
+ # carbonads .carbon-img {
135
+ margin-right : 10px ;
136
+
137
+ line-height : 1 ;
138
+ }
139
+
140
+ # carbonads .carbon-text {
141
+ margin-bottom : 12px ;
142
+
143
+ font-size : 12px ;
144
+ line-height : 1.45 ;
145
+ text-decoration : none;
146
+ }
147
+
148
+ # carbonads .carbon-poweredby {
149
+ position : absolute;
150
+ bottom : 10px ;
151
+ left : 152px ;
152
+
153
+ font-size : 8px ;
154
+ font-weight : 500 ;
155
+ line-height : 1 ;
156
+ text-decoration : none;
157
+ letter-spacing : 0.5px ;
158
+ text-transform : uppercase;
159
+ }
160
+
161
+ # ds-callout {
162
+ justify-items : start;
163
+ }
164
+
165
+ @media screen and (max-width : 1440px ) {
166
+ .callout {
167
+ width : 256px !important ;
168
+ }
169
+ }
170
+ </ style >
171
+ <!-- Global site tag (gtag.js) - Google Analytics -->
172
+ < script
173
+ async
174
+ src ="https://www.googletagmanager.com/gtag/js?id=UA-110192731-2 "
175
+ > </ script >
176
+ < script >
177
+ window . dataLayer = window . dataLayer || [ ]
178
+ function gtag ( ) {
179
+ dataLayer . push ( arguments )
180
+ }
181
+ gtag ( 'js' , new Date ( ) )
182
+
183
+ gtag ( 'config' , 'UA-110192731-2' )
184
+ </ script >
185
+ </ head >
3
186
4
- < head >
5
- < meta charset ="UTF-8 " />
6
- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7
- < meta name ="description "
8
- content ="SVG Wave is a minimal svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs. " />
9
- < meta name ="title " content ="Svg Wave - A free and beautiul gradient SVG wave Generator. " />
10
- < title > Svg Wave - A free & beautiful gradient SVG wave Generator.</ title >
11
- < meta property ="og:type " content ="website " />
12
- < meta property ="og:url " content ="https://www.svgwave.in " />
13
- < meta property ="og:title " content ="Svg Wave - A free & beautiul gradient SVG wave Generator. " />
14
- < meta property ="og:description "
15
- content ="SVG Wave is a minimal gradient svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs. " />
16
- < meta property ="og:image " content ="https://svgwave.in/images/29cf875dd59e3301be675929e0ea67a8-3-01.svg " />
17
- < meta property ="twitter:card " content ="summary_large_image " />
18
- < meta property ="twitter:url " content ="https://www.svgwave.in " />
19
- < meta property ="twitter:title " content ="Get Waves – Create SVG waves for your next design " />
20
- < meta property ="twitter:description "
21
- content ="SVG Wave is a minimal gradient svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs. " />
22
- < meta property ="twitter:image " content ="./assets/bg.png " />
23
- < link rel ="shortcut icon " href ="./assets/3-01.svg " />
24
- < link rel ="preconnect " href ="https://fonts.googleapis.com " />
25
- < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin />
26
- < link href ="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;800&display=swap "
27
- rel ="stylesheet " />
28
- < style >
29
- .loader-container {
30
- width : 100% ;
31
- height : 100vh ;
32
- background-color : # eee ;
33
- display : flex;
34
- justify-content : center;
35
- align-items : center;
36
- }
37
-
38
- .loader {
39
- width : 100px ;
40
- height : 100px ;
41
- background-color : # 4de6d4 ;
42
- border-radius : 50% ;
43
- position : relative;
44
- overflow : hidden;
45
- }
46
-
47
- .loader : after {
48
- content : '' ;
49
- position : absolute;
50
- width : 100px ;
51
- height : 100px ;
52
- background-color : # fff ;
53
- }
54
-
55
- .loader : before {
56
- content : '' ;
57
- position : absolute;
58
- width : 100px ;
59
- height : 100px ;
60
- background-color : # fff ;
61
- }
62
-
63
- .loader : before {
64
- top : -40px ;
65
- border-radius : 50% ;
66
- background : rgba (255 , 255 , 255 , 0.7 );
67
- animation : wave 5s linear infinite;
68
- }
69
-
70
- .loader : after {
71
- top : -40px ;
72
- border-radius : 30% ;
73
- background : rgba (255 , 255 , 255 , 0.3 );
74
- animation : wave 5s linear infinite;
75
- }
76
-
77
- @keyframes moveTheWave {
78
- 0% {
79
- stroke-dashoffset : -3 ;
80
- transform : translate3d (0 , 0 , 0 );
81
- }
82
-
83
- 100% {
84
- stroke-dashoffset : -138 ;
85
- transform : translate3d (-90px , 0 , 0 );
86
- }
87
- }
88
- </ style >
89
-
90
- < style >
91
- # carbonads {
92
- font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto,
93
- Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue' , Helvetica, Arial,
94
- sans-serif;
95
- max-width : 300px ;
96
- }
97
-
98
- # carbonads > span {
99
- display : block;
100
- position : relative;
101
- padding : 10px ;
102
-
103
- border-radius : 4px ;
104
- background-color : # fff ;
105
- box-shadow :
106
- 0 0 1px 1px hsla (0 , 0% , 0% , 0.05 ),
107
- 0 0 2px 2px hsla (0 , 0% , 0% , 0.05 ),
108
- 0 0 4px 4px hsla (0 , 0% , 0% , 0.05 );
109
- }
110
-
111
- # carbonads .carbon-wrap {
112
- display : flex;
113
- }
114
-
115
- # carbonads .carbon-img {
116
- margin-right : 10px ;
117
-
118
- line-height : 1 ;
119
- }
120
-
121
- # carbonads .carbon-text {
122
- margin-bottom : 12px ;
123
-
124
- font-size : 12px ;
125
- line-height : 1.45 ;
126
- text-decoration : none;
127
- }
128
-
129
- # carbonads .carbon-poweredby {
130
- position : absolute;
131
- bottom : 10px ;
132
- left : 152px ;
133
-
134
- font-size : 8px ;
135
- font-weight : 500 ;
136
- line-height : 1 ;
137
- text-decoration : none;
138
- letter-spacing : 0.5px ;
139
- text-transform : uppercase;
140
- }
141
-
142
- # ds-callout {
143
- justify-items : start;
144
- }
145
-
146
- @media screen and (max-width : 1440px ) {
147
- .callout {
148
- width : 256px !important ;
149
- }
150
- }
151
- </ style >
152
- <!-- Global site tag (gtag.js) - Google Analytics -->
153
- < script async src ="https://www.googletagmanager.com/gtag/js?id=UA-110192731-2 "> </ script >
154
- < script >
155
- window . dataLayer = window . dataLayer || [ ]
156
- function gtag ( ) {
157
- dataLayer . push ( arguments )
158
- }
159
- gtag ( 'js' , new Date ( ) )
160
-
161
- gtag ( 'config' , 'UA-110192731-2' )
162
- </ script >
163
- </ head >
164
-
165
- < body >
166
- < div id ="app "> </ div >
167
- </ body >
168
- < script type ="module " src ="/src/main.jsx "> </ script >
169
-
170
- </ html >
187
+ < body >
188
+ < div id ="app "> </ div >
189
+ </ body >
190
+ < script type ="module " src ="/src/main.jsx "> </ script >
191
+ </ html >
0 commit comments