Skip to content

Commit b4db16f

Browse files
gerdesquegerdesque
committed
✨ feat(app): add svg/png download possibility
1 parent ad41ba2 commit b4db16f

File tree

3 files changed

+108
-106
lines changed

3 files changed

+108
-106
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "grid-art-designer",
33
"version": "1.0.0",
4-
"description": "Inspired from [Creating Generative SVG Grids](https://frontend.horse/articles/generative-grids/) by Alex Trost",
4+
"description": "A web-based generative art tool that creates customizable SVG grids with random designs and color palettes. Download your creations in both SVG and PNG formats.",
55
"scripts": {
66
"dev": "next dev",
77
"build": "next build",

‎pages/index.tsx

Lines changed: 104 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
drawQuarterCircle,
2929
drawLetterBlock,
3030
} from "../src/blockDesign";
31+
import Link from '@mui/material/Link';
3132

3233
// Define variables with strict types
3334
export let draw: Svg;
@@ -221,103 +222,128 @@ const Home: NextPage = () => {
221222
};
222223

223224
return (
224-
<div className="wrapper">
225+
<div>
225226
<Head>
226227
<title>Grid Art Designer</title>
227-
<meta
228-
name="description"
229-
content="Inspired from [Creating Generative SVG Grids](https://frontend.horse/articles/generative-grids/) by Alex Trost"
230-
/>
228+
<meta name="description" content="Create stunning generative SVG grids with customizable designs and color palettes. Download your creations in SVG and PNG formats. Perfect for digital art, prints, and web design. Start creating with just one click!"></meta>
231229
<link rel="icon" href="./favicon.ico" />
232230
<link rel="manifest" href="./manifest.json" />
233231
</Head>
234232
<AppBar position="static" sx={{ backgroundColor: "#dd8d0e" }}>
235233
<Toolbar>
236-
<Typography>
237-
<img
238-
src="./icon.svg"
239-
alt={"Logo Digitalwarenkombinat!"}
240-
width={300}
241-
style={{
242-
width: "20vw",
243-
height: "auto",
244-
maxHeight: "100px",
245-
}}
246-
/>
247-
</Typography>
234+
<Link href="https://digitalwarenkombinat.de/">
235+
<Typography>
236+
<img
237+
src="./icon.svg"
238+
alt={"Logo Digitalwarenkombinat!"}
239+
width={300}
240+
style={{
241+
width: "20vw",
242+
height: "auto",
243+
maxHeight: "100px",
244+
}}
245+
/>
246+
</Typography>
247+
</Link>
248248
<Typography
249-
variant="h2"
249+
variant="h5"
250250
component="h1"
251251
color="white"
252-
sx={{ flexGrow: 1, ml: 4 }}
252+
sx={{ flexGrow: 1, ml: 2, fontSize: { xs: "1.5rem", md: "2rem" } }}
253253
>
254254
Grid Art Designer
255255
</Typography>
256256
</Toolbar>
257257
</AppBar>
258-
<Button
259-
variant="contained"
260-
size="large"
261-
sx={{ color: "#fff", backgroundColor: "#dd8d0e" }}
262-
onClick={generateNewGrid}
258+
<Container
259+
sx={{
260+
display: "flex",
261+
flexDirection: { xs: "column", md: "row" },
262+
alignItems: "center",
263+
justifyContent: "center",
264+
py: 4,
265+
gap: 2
266+
}}
263267
>
264-
Generate your own grid
265-
</Button>
266-
{init ? (
267-
<>
268-
<Container
269-
sx={{
270-
display: "flex",
271-
flexDirection: "column",
272-
justifyContent: "space-evenly",
273-
}}
268+
<Typography
269+
variant="h5"
270+
component="h1"
271+
sx={{ flexGrow: 1, textAlign: 'center', fontSize: { xs: "1.5rem", md: "2rem" } }}
274272
>
275-
<Stack direction="row" spacing={1} sx={{ justifyContent: "center" }}>
276-
{colors.map((color, index) => (
277-
<Chip
278-
key={index}
279-
label={color}
280-
sx={{
281-
backgroundColor: color,
282-
color: (theme) =>
283-
theme.palette.getContrastText(color || "#fff"),
284-
}}
273+
Create beautiful generative SVG grids with customizable designs—start designing and download your artwork in SVG or PNG with a single click!
274+
</Typography>
275+
<Button
276+
variant="contained"
277+
size="large"
278+
sx={{
279+
color: "#fff",
280+
backgroundColor: "#dd8d0e",
281+
mb: 2,
282+
width: { xs: "100%", sm: "auto" },
283+
}}
284+
onClick={generateNewGrid}
285+
>
286+
Generate Your Own Grid Art
287+
</Button>
288+
289+
{init ? (
290+
<>
291+
<Stack
292+
direction="column"
293+
spacing={2}
294+
sx={{
295+
justifyContent: "center",
296+
width: "100%",
297+
alignItems: "center",
298+
}}
299+
>
300+
<Stack direction="row" spacing={1} sx={{ justifyContent: "center" }}>
301+
{colors.map((color, index) => (
302+
<Chip
303+
key={index}
304+
label={color}
305+
sx={{
306+
backgroundColor: color,
307+
color: (theme) =>
308+
theme.palette.getContrastText(color || "#fff"),
309+
}}
310+
/>
311+
))}
312+
</Stack>
313+
<FormGroup sx={{ alignItems: "center" }}>
314+
<FormControlLabel
315+
control={
316+
<Switch
317+
color="warning"
318+
checked={diwakoStyle}
319+
onChange={() => setDiwakoStyle(!diwakoStyle)}
320+
inputProps={{ "aria-label": "controlled" }}
321+
/>
322+
}
323+
label="Set Digitalwarenkombinat Style"
285324
/>
286-
))}
325+
</FormGroup>
326+
<div className="container" ref={svgContainerRef} />
327+
<Button onClick={downloadSVG} sx={{ mt: 2 }} variant="outlined">
328+
Download SVG
329+
</Button>
330+
<Button onClick={downloadPNG} sx={{ mt: 1 }} variant="outlined">
331+
Download PNG
332+
</Button>
287333
</Stack>
288-
<FormGroup sx={{ alignItems: "center" }}>
289-
<FormControlLabel
290-
control={
291-
<Switch
292-
color="warning"
293-
checked={diwakoStyle}
294-
onChange={() => setDiwakoStyle(!diwakoStyle)}
295-
inputProps={{ "aria-label": "controlled" }}
296-
/>
297-
}
298-
label="Set Digitalwarenkombinat style"
299-
/>
300-
</FormGroup>
301-
<div className="container" ref={svgContainerRef} />
302-
<Button onClick={downloadSVG} sx={{ mt: 2 }} variant="outlined">
303-
Download SVG
304-
</Button>
305-
<Button onClick={downloadPNG} sx={{ mt: 1 }} variant="outlined">
306-
Download PNG
307-
</Button>
308-
</Container>
309-
</>
310-
) : (
311-
<img
312-
src="./about.svg"
313-
alt={"Logo Digitalwarenkombinat"}
314-
style={{
315-
width: "100vw",
316-
height: "auto",
317-
maxHeight: "800px",
318-
}}
319-
/>
320-
)}
334+
</>
335+
) : (
336+
<img
337+
src="./about.svg"
338+
alt={"Logo Digitalwarenkombinat"}
339+
style={{
340+
width: "100%",
341+
height: "auto",
342+
maxHeight: "800px",
343+
}}
344+
/>
345+
)}
346+
</Container>
321347
</div>
322348
);
323349
};

‎styles/globals.scss

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
:root {
2-
--bg-inner: white;
3-
--bg-outer: white;
4-
--bg-button: #1fb264;
5-
}
6-
71
@font-face {
82
font-family: "Fundamental Brigade";
93
fontdisplay: "swap";
@@ -15,31 +9,13 @@ body {
159
padding: 0;
1610
margin: 0;
1711
font-family: "Fundamental Brigade";
18-
background-color: #eee;
1912
}
2013

2114
* {
2215
box-sizing: border-box;
2316
}
2417

25-
.wrapper {
26-
display: grid;
27-
grid-template-rows: auto 1fr auto;
28-
place-items: center;
29-
gap: 1rem;
30-
}
31-
32-
.container {
33-
height: 70vh;
34-
background-image: radial-gradient(var(--bg-inner) 0%, var(--bg-outer) 100%);
35-
36-
svg {
37-
width: 100%;
38-
aspect-ratio: 1;
39-
}
40-
41-
svg * {
42-
// shape-rendering: crispEdges;
43-
shape-rendering: geometricprecision;
44-
}
18+
svg * {
19+
// shape-rendering: crispEdges;
20+
shape-rendering: geometricprecision;
4521
}

0 commit comments

Comments
 (0)