-
Notifications
You must be signed in to change notification settings - Fork 36
/
index.html
157 lines (141 loc) · 4.85 KB
/
index.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<title>Generate Mesh Gradients | Customize & Free Export PNG</title>
<meta
content="Generate beautiful and colorful mesh gradients | Download Mesh Gradients PNG | Export mesh gradients PNG"
name="description" />
<meta name="keywords"
content="Mesh gradient, download mesh gradient, generate mesh gradient, export mesh gradient png, mesh, gradient" />
<meta name="author" content="Anup Aglawe" />
<meta content="Generate Mesh Gradients" property="og:title" />
<meta content="Generate & customizse beautiful and colorful mesh gradients. Download Mesh Gradients & Export in PNG"
property="og:description" />
<meta content="https://meshy.uxie.io/shot.webp" property="og:image" />
<meta content="Generate & customize beautiful mesh gradients" property="twitter:title" />
<meta content="Generate & customizse beautiful and colorful mesh gradients. Download Mesh Gradients & Export in PNG"
property="twitter:description" />
<meta content="https://meshy.uxie.io/shot.webp" property="twitter:image" />
<meta property="og:type" content="website" />
<meta content="summary_large_image" name="twitter:card" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/sphere.ico" />
<link type="text/css" rel="stylesheet" href="./public/reset.css" />
<link type="text/css" rel="stylesheet" href="./public/style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="manifest" href="/manifest.json" />
<link rel="canonical" href="https://meshgradient.in" />
<style>
.main,
.about-section {
/* display: none; */
}
.loader-container {
width: 100%;
height: 100vh;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 100px;
height: 100px;
background-color: #4de6d4;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.loader:after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
}
.loader:before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
}
.loader:before {
top: -40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
animation: wave 5s linear infinite;
}
.loader:after {
top: -40px;
border-radius: 30%;
background: rgba(255, 255, 255, 0.3);
animation: wave 5s linear infinite;
}
@keyframes moveTheWave {
0% {
stroke-dashoffset: -3;
transform: translate3d(0, 0, 0);
}
100% {
stroke-dashoffset: -138;
transform: translate3d(-90px, 0, 0);
}
}
#ds-callout {
justify-items: start;
}
@media screen and (max-width: 1440px) {
.callout {
width: 256px !important;
}
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TLGMK83BPN"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-TLGMK83BPN");
</script>
</head>
<body>
<div id="app" class="main"></div>
<div id="about-section" class="about-section">
<h2>About Meshy</h2>
<div class="about-tool">
<h2>◐ Generate Mesh Gradients - Intro</h2>
<p>
Meshy is design tool to generate mesh gradients, with a given color
palette.
<br />
Each generated gradient is unique to id & color hex codes, which
behaves as a seed to recreate the gradients. The Column on the right
has few presets of curated mesh gradients.
<br />
A Palette of only four colors is used to create gradient where each
color is associated with differnt amount of coverage area, (i.e
replace the colors amount of area covered by original colors)
</p>
</div>
<div class="download-section">
<h2>◐ Download Mesh Gradient PNGs - Steps</h2>
<p>
1. Click on the colors to change the selected color Palette <br />
2. Press Randomize Button to generate random its random variant untill
you find the perfect gradient <br />
3. Click on save & adjust width & height to download custom resolution
PNGs.
</p>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>