-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
119 lines (97 loc) · 10 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
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RNLYNEKPQ4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RNLYNEKPQ4');
</script>
<title>Gradientor</title>
<meta name="description" content="Gradientor is a free-to-use tool for drawing with gradients in a little bit silly way. Draw, adjust and save results as JPGs in up to 4k resolution. Have fun!">
<meta name="keywords" content="gradient design tool, free drawing tool, 4k image creator, online image editor, gradient, gradientor, creative tool, freehand drawing tool">
<meta charset="utf-8">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./variables.css">
<script src="./lib/p5.min.js"></script>
<script src="./controls.js"></script>
<script src="./svg_import.js"></script>
<script src="./sketch.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<link rel="icon" href="./afterimage.ico" sizes="any">
<link rel="icon" href="./afterimage.svg" type="image/svg+xml">
<link rel="shortcut icon" href="./afterimage.svg" type="image/x-icon">
</head>
<body>
<div id="settings_div">
<div id="logo_container">
<svg id="logo" width="215" height="42" viewBox="0 0 215 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.446 38.648C4.99403 38.648 0.728027 33.248 0.728027 19.64C0.728027 6.08602 5.58803 0.632019 12.608 0.632019C16.172 0.632019 18.818 2.19802 20.762 3.71002L18.062 14.24H17.198L16.874 10.406C16.388 4.41202 14.984 2.52202 12.554 2.52202C9.20603 2.52202 6.39803 6.78802 6.39803 19.64C6.39803 32.492 8.66603 36.758 12.338 36.758C14.228 36.758 15.362 35.624 15.632 33.194C15.794 31.142 15.74 26.876 15.578 24.5C15.362 22.232 14.552 20.99 11.582 20.342V19.424H20.762C20.546 24.014 20.438 29.738 20.546 32.978C20.6 34.976 20.978 35.786 21.842 36.272V36.866C18.98 38 15.254 38.648 12.446 38.648Z" fill="black"/>
<path d="M23.5856 37.082C24.4496 36.704 24.9896 36.002 25.0976 33.842C25.3136 29.198 25.4216 24.23 25.4216 19.64C25.4216 15.05 25.3136 10.082 25.0976 5.43802C24.9896 3.27802 24.4496 2.57602 23.5856 2.19802V1.28002H32.5496C39.8396 1.28002 44.1596 3.92602 44.1596 10.46C44.1596 14.402 42.1616 17.534 38.5976 19.64C40.2716 29.198 43.1876 36.65 45.4016 40.646L44.8616 41.132C40.1096 37.73 35.6816 30.656 33.2516 21.746C32.3336 21.962 31.3076 22.124 30.2816 22.286C30.3356 26.12 30.4436 30.062 30.6056 33.842C30.7136 36.002 31.2536 36.704 32.4416 37.082V38H23.5856V37.082ZM30.2816 20.396C35.5736 19.1 38.5976 14.672 38.5976 10.028C38.5976 5.22202 35.8976 2.90002 32.9276 2.90002C31.3076 2.90002 30.6596 3.92602 30.5516 6.24802C30.3356 10.19 30.2816 15.05 30.2816 19.64V20.396Z" fill="black"/>
<path d="M59.3142 37.082C60.2862 36.596 61.0422 35.624 60.4482 32.762L58.8822 25.742H50.6742L49.4322 31.25C48.6222 34.868 49.0002 36.542 50.2962 37.028V38H43.7082V37.028C44.7882 36.38 45.9222 34.868 46.8402 31.034L53.4282 3.44002C53.1042 2.79202 52.6722 2.52202 51.9702 2.25202L52.0782 1.28002H58.1802C60.5022 11.324 63.5262 24.23 65.6862 32.384C66.5502 35.624 67.0362 36.596 68.0082 37.082V38H59.3142V37.082ZM51.1062 23.744H58.4502C57.2082 18.398 55.8582 12.512 54.6702 7.65202L51.1062 23.744Z" fill="black"/>
<path d="M68.5048 37.082C69.3688 36.704 69.9088 36.002 70.0168 33.842C70.2328 29.198 70.3408 24.23 70.3408 19.64C70.3408 15.05 70.2328 10.082 70.0168 5.43802C69.9088 3.27802 69.3688 2.57602 68.5048 2.19802V1.28002H77.1448C85.9468 1.28002 90.3208 8.24602 90.3208 20.18C90.3208 31.844 85.4068 38 77.6848 38H68.5048V37.082ZM75.2008 19.64C75.2008 24.23 75.2548 29.09 75.4168 33.032C75.5248 35.354 76.3348 36.38 77.9548 36.38C81.4648 36.38 84.9748 31.412 84.9748 20.18C84.9748 8.67802 81.4648 2.90002 77.5228 2.90002C76.0108 2.90002 75.4168 3.92602 75.3628 6.24802C75.2548 10.19 75.2008 15.05 75.2008 19.64Z" fill="black"/>
<path d="M92.52 37.082C93.384 36.704 93.924 36.002 94.032 33.842C94.248 29.198 94.356 24.23 94.356 19.64C94.356 15.05 94.248 10.082 94.032 5.43802C93.924 3.27802 93.384 2.57602 92.52 2.19802V1.28002H101.052V2.19802C100.188 2.57602 99.648 3.27802 99.54 5.43802C99.324 10.082 99.216 15.05 99.216 19.64C99.216 24.23 99.324 29.198 99.54 33.842C99.648 36.002 100.188 36.704 101.052 37.082V38H92.52V37.082Z" fill="black"/>
<path d="M103.352 37.082C104.216 36.704 104.756 36.002 104.864 33.842C105.08 29.198 105.188 24.23 105.188 19.64C105.188 15.05 105.08 10.082 104.864 5.43802C104.756 3.27802 104.216 2.57602 103.352 2.19802V1.28002H121.496L122.792 12.404H121.874L119.768 8.30002C118.04 4.89802 116.096 2.90002 112.91 2.90002C111.02 2.90002 110.426 3.92602 110.318 6.24802C110.102 9.81202 110.048 14.186 110.048 18.344C115.34 18.02 115.988 15.536 116.096 12.404H116.96L118.634 24.716H117.716C116.636 21.746 115.772 20.126 110.048 20.018C110.048 24.5 110.102 29.198 110.318 33.032C110.426 35.354 111.02 36.38 112.91 36.38C116.582 36.38 119.012 34.598 121.01 29.684L122.522 25.958H123.44L122.144 38H103.352V37.082Z" fill="black"/>
<path d="M141.898 38C137.362 27.578 132.61 16.292 129.046 8.40802C128.992 18.29 128.992 25.85 129.154 32.384C129.262 35.408 129.856 36.596 131.26 37.028V38H124.672V37.028C125.752 36.596 126.4 35.408 126.508 32.384C126.724 24.392 126.832 14.294 126.67 5.49202C126.616 3.44002 125.968 2.57602 124.942 2.19802V1.28002H131.26C134.662 9.16402 138.604 18.668 142.222 26.984C142.276 19.424 142.276 12.296 142.114 6.89602C142.006 3.87202 141.412 2.68402 140.008 2.25202V1.28002H146.596V2.25202C145.516 2.68402 144.868 3.87202 144.76 6.89602C144.544 14.888 144.49 26.498 144.598 38H141.898Z" fill="black"/>
<path d="M153.553 37.082C154.417 36.704 154.957 36.002 155.065 33.842C155.281 29.198 155.389 24.23 155.389 19.64C155.389 15.05 155.335 10.082 155.119 5.43802C155.011 3.38602 154.417 2.90002 153.553 2.90002C152.311 2.90002 151.501 4.03402 150.151 7.86802L148.531 12.404H147.613L147.721 1.28002H167.917L168.025 12.404H167.107L165.487 7.86802C164.137 4.03402 163.327 2.90002 162.085 2.90002C161.221 2.90002 160.627 3.38602 160.519 5.43802C160.303 10.082 160.249 15.05 160.249 19.64C160.249 24.23 160.357 29.198 160.573 33.842C160.681 36.002 161.221 36.704 162.085 37.082V38H153.553V37.082Z" fill="black"/>
<path d="M179.87 38.648C173.282 38.648 168.908 32.654 168.908 19.64C168.908 6.62602 173.282 0.632019 179.87 0.632019C186.458 0.632019 190.833 6.62602 190.833 19.64C190.833 32.654 186.458 38.648 179.87 38.648ZM174.578 19.64C174.578 30.872 176.09 36.758 179.87 36.758C183.65 36.758 185.162 30.872 185.162 19.64C185.162 8.40802 183.65 2.52202 179.87 2.52202C176.09 2.52202 174.578 8.40802 174.578 19.64Z" fill="black"/>
<path d="M193.032 37.082C193.896 36.704 194.436 36.002 194.544 33.842C194.76 29.198 194.868 24.23 194.868 19.64C194.868 15.05 194.76 10.082 194.544 5.43802C194.436 3.27802 193.896 2.57602 193.032 2.19802V1.28002H201.996C209.286 1.28002 213.606 3.92602 213.606 10.46C213.606 14.402 211.608 17.534 208.044 19.64C209.718 29.198 212.634 36.65 214.848 40.646L214.308 41.132C209.556 37.73 205.128 30.656 202.698 21.746C201.78 21.962 200.754 22.124 199.728 22.286C199.782 26.12 199.89 30.062 200.052 33.842C200.16 36.002 200.7 36.704 201.888 37.082V38H193.032V37.082ZM199.728 20.396C205.02 19.1 208.044 14.672 208.044 10.028C208.044 5.22202 205.344 2.90002 202.374 2.90002C200.754 2.90002 200.106 3.92602 199.998 6.24802C199.782 10.19 199.728 15.05 199.728 19.64V20.396Z" fill="black"/>
</svg>
</div>
<div class="cnv_size" id="cnv_size">
<div class="left_col">Canvas size</div>
<div class="right_col">
<input type="number" id="width" value="1920">
<span>x</span>
<input type="number" id="height" value="1080">
</div>
</div>
<div id="colors">
<p>Colors</p>
<div id="colopickers">
<div id="top-box">
<input type="color" id="topColor" value="#ff0000">
<input type="text" id="topColorTxt" value="#ff0000">
<p>Top</p>
</div>
<div id="middle-box">
<input type="color" id="midColor" value="#ffff00">
<input type="text" id="midColorTxt" value="#ffff00">
<input type="checkbox" id="mid_check" checked>
<label for="mid_check">Middle</label>
</div>
<div id="bottom-box">
<input type="color" id="botColor" value="#0000ff">
<input type="text" id="botColorTxt" value="#0000ff">
<p>Bottom</p>
</div>
</div>
</div>
<input id="midPos" class="slider" type="range" min="0" max="1" step="0.01" value="0.5">
<div class="checkbox_div">
<input type="checkbox" id="grain_check">
<label for="grain_check">Add grain</label>
</div>
<div id="undo_clear_div">
<button id="undo_btn" disabled>Undo</button>
<button id="clear_btn">Reset canvas</button>
</div>
<div class="file-upload-wrapper">
<input type="file" id="svgInput" accept=".svg" hidden />
<label for="svgInput" class="file-upload-button">Upload SVG File</label>
</div>
<button id="save_btn">Download PNG</button>
<p id="info">
v.1.4 ©<a href="https://agrshch.com/" target="_blank">Anatoly Grashchenko</a>, <a href="https://afterimage.cc/" target="_blank">Afterimage</a>, <br>2023-2024. <br>
You can <a href="https://www.buymeacoffee.com/afterimage.cc" target="_blank"> Buy me a coffee</a> to support developing of Gradientor and other future tools. <br>
For any inquiries or to commission a custom tool, please contact us via <a href="mailto: [email protected]">[email protected]</a>.
</p>
</div>
<div id="canvas_div"></div>
</body>
</html>