-
Notifications
You must be signed in to change notification settings - Fork 0
/
Resolutions.html
200 lines (173 loc) · 13.3 KB
/
Resolutions.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guide To Resolutions</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Droid Sans Mono', monospace;
font-size: 64px;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: center;">
<svg width="100%" viewBox="-2 -2 4000 4000" id="output">
</svg>
</div>
<script>
var outText = ``;
outText += `
<defs>
<radialGradient id="myGradient">
<stop offset="0%" stop-color="#90f09044" />
<stop offset="50%" stop-color="#ffffffff" />
</radialGradient>
</defs>`;
outText += `<circle cx="1920" cy="1440" r="640" fill="url('#myGradient')" />`;
outText += `<text x="0" y="0" dominant-baseline="center" font-size="60%" transform-origin="top left" transform="translate(1922 1442) rotate(-35)" fill="#007700" text-anchor="middle">Jesse's Ideal Zone</text>`;
for (let dim = 0; dim < 4000; dim += 240) {
outText += `<line x1="0" y1="${dim}" x2="200000" y2="${dim}" stroke="#090" opacity="0.4"/>`;
}
for (let dim = 0; dim < 4000; dim += 320) {
outText += `<line x1="${dim}" y1="" x2="${dim}" y2="200000" stroke="#090" opacity="0.4"/>`;
}
outText += `<line x1="0" y1="0" x2="16000" y2="9000" stroke="#204A87" />`;
outText += `<line x1="0" y1="0" x2="16000" y2="10000" stroke="#5C3566" />`;
outText += `<line x1="0" y1="0" x2="4000" y2="3000" stroke="#EF2929" />`;
outText += `<line x1="0" y1="0" x2="5000" y2="4000" stroke="#C4A000" />`;
outText += `<line x1="0" y1="0" x2="16000" y2="16000" stroke="#999" /> `;
var width = 2560;
var height = 1080;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#B03060" stroke-width="1" />`;
outText += ` <text x="92%" y="100%" dominant-baseline="auto" font-size="60%" transform="translate(0 -11)" fill="#B03060" text-anchor="middle">Ultrawide ${width}x${height}</text>`;
outText += `</svg>`;
width = 1600; height = 900;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">${width}x${height}</text>`;
outText += `</svg>`;
width = 960; height = 960;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#999" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#999" text-anchor="middle">${width}x${height}</text>`;
outText += `</svg>`;
width = 2560; height = 1080;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#B03060" stroke-width="1" />`;
outText += ` <text x="92%" y="100%" dominant-baseline="auto" font-size="60%" transform="translate(0 -11)" fill="#B03060" text-anchor="middle">Ultrawide ${width}x${height}</text>`;
outText += `</svg>`;
//outText += `<svg x="0" y="0" width="1136" height="640" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
//outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="40%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">iPhone 5 1136x640</text>`;
//outText += `</svg>`;
width = 1600; height = 900;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">${width}x${height}</text>`;
outText += `</svg>`;
width = 640; height = 480;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#EF2929" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="100%" transform="translate(0 -11)" fill="#EF2929" text-anchor="middle">PS2 ${width}x${height}</text>`;
outText += `</svg>`;
width = 320; height = 240;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#EF2929" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="70%" transform="translate(0 -11)" fill="#EF2929" text-anchor="middle">PS1 ${width}x${height}</text>`;
outText += `</svg>`;
width = 800; height = 600;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#EF2929" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="80%" transform="translate(0 -11)" fill="#EF2929" text-anchor="middle">${width}x${height}</text>`;
outText += `</svg>`;
width = 1024; height = 768;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#EF2929" stroke-width="1" />`;
outText += ` <text x="60%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#EF2929" text-anchor="middle">${width}x${height}</text>`;
outText += `</svg>`;
//outText += `<svg x="0" y="0" width="1366" height="768" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
//outText += ` <text x="88%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">Netbook 1366x768</text>`;
//outText += `</svg>`;
width = 1280; height = 1024;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#C4A000" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#C4A000" text-anchor="middle">${width}x${height}</text>`;
outText += `</svg>`;
width = 480; height = 272;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="80%" y="100%" dominant-baseline="auto" font-size="40%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">PSP ${width}x${height}</text>`;
outText += `</svg>`;
//outText += `<svg x="0" y="0" width="1536" height="864" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
//outText += ` <text x="53%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">HD 1920x1080, with 1.25 display scaling to effectivly 1536x864</text>`;
//outText += `</svg>`;
width = 1920; height = 1080;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="93%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">HD ${width}x${height}</text>`;
outText += `</svg>`;
width = 1080; height = 1920;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="70%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">Sideways HD ${width}x${height}</text>`;
outText += `</svg>`;
//outText += `<svg x="0" y="0" width="2208" height="1242" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
//outText += ` <text x="93%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">iPhone 6s Plus internal resolution 2208x1242</text>`;
//outText += `</svg>`;
width = 1280; height = 720;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="91%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">${width}x${height}</text>`;
outText += `</svg>`;
width = 2560; height = 1440;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">QHD ${width}x${height}</text>`;
outText += `</svg>`;
width = 1440; height = 2560;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">Sideways QHD ${width}x${height}</text>`;
outText += `</svg>`;
width = 3840; height = 2160;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="90%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">4k ${width}x${height}</text>`;
outText += `</svg>`;
width = 2160; height = 3840;
outText += `<svg x="0" y="0" width="${width}" height="${height}" overflow="visible">`;
outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
outText += ` <text x="50%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">Sideways 4k ${width}x${height}</text>`;
outText += `</svg>`;
//outText += `<svg x="0" y="0" width="1920" height="1200" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#5C3566" stroke-width="1" />`;
//outText += ` <text x="50%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#5C3566" text-anchor="middle">1920x1200</text>`;
//outText += `</svg>`;
//outText += `<svg x="0" y="0" width="960" height="544" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#204A87" stroke-width="1" />`;
//outText += ` <text x="50%" y="100%" dominant-baseline="auto" font-size="50%" transform="translate(0 -11)" fill="#204A87" text-anchor="middle">PS Vita 960x544</text>`;
//outText += `</svg>`;
//outText += `<svg x="0" y="0" width="1680" height="1050" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#5C3566" stroke-width="1" />`;
//outText += ` <text x="90%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#5C3566" text-anchor="middle">1680x1050</text>`;
//outText += `</svg>`;
//outText += `<svg x="0" y="0" width="2560" height="1600" overflow="visible">`;
//outText += ` <rect width="100%" height="100%" fill="none" stroke="#5C3566" stroke-width="1" />`;
//outText += ` <text x="90%" y="100%" dominant-baseline="auto" transform="translate(0 -11)" fill="#5C3566" text-anchor="middle">2560x1600</text>`;
//outText += `</svg>`;
document.getElementById("output").innerHTML = outText;
</script>
<a href="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vector_Video_Standards8.svg">WIKIPEDIA CHART</a>
<a href="index.html">MY OTHER STUFF</a>
</body>
</html>