blob: 9434129c860f319180129d90cb1da3fe695feed4 (
plain)
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
|
<svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" font-family="Helvetica, system-ui, sans-serif" font-size="13" viewBox="0 0 1149 662">
<path stroke="#ccc" d="M717 33v570"/>
<text fill="#aaa" font-weight="bold"><tspan x="681.4" y="10">Breakpoint:</tspan> <tspan x="703" y="29">1200</tspan></text>
<path stroke="#ccc" d="M296 33v570"/>
<text fill="#aaa" font-weight="bold"><tspan x="283" y="28">360</tspan></text>
<path stroke="#ccc" d="M500 33v570"/>
<text fill="#aaa" font-weight="bold"><tspan x="488" y="28">768</tspan></text>
<path stroke="#000" d="M117 43v550m0 0h1000"/>
<text font-size="20"><tspan x="73" y="33">value (px)</tspan></text>
<text font-size="20"><tspan x="543.3" y="653">viewport width (px)</tspan></text>
<path stroke="#000" d="M107 493h20"/>
<text font-size="20"><tspan x="82" y="499">10</tspan></text>
<path stroke="#000" d="M107 393h20"/>
<text font-size="20"><tspan x="80" y="399">20</tspan></text>
<path stroke="#000" d="M107 293h20"/>
<text font-size="20"><tspan x="80" y="299">30</tspan></text>
<path stroke="#000" d="M107 193h20"/>
<text font-size="20"><tspan x="80" y="199">40</tspan></text>
<path stroke="#000" d="M107 93h20"/>
<text font-size="20"><tspan x="80" y="99">50</tspan></text>
<path stroke="#000" d="M217 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="199" y="622">200</tspan></text>
<path stroke="#000" d="M317 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="299" y="622">400</tspan></text>
<path stroke="#000" d="M417 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="399" y="622">600</tspan></text>
<path stroke="#000" d="M517 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="499" y="622">800</tspan></text>
<path stroke="#000" d="M617 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="594" y="622">1000</tspan></text>
<path stroke="#000" d="M717 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="694" y="622">1200</tspan></text>
<path stroke="#000" d="M818 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="796" y="622">1400</tspan></text>
<path stroke="#000" d="M917 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="894" y="622">1600</tspan></text>
<path stroke="#000" d="M1017 583v20"/>
<text font-size="20" transform="translate(0 -3)"><tspan x="994" y="622">1800</tspan></text>
<path stroke="#9633ff" d="M117 393h1010"/>
<text fill="#9633ff" font-weight="bold" transform="translate(0 -3)"><tspan x="1135" y="401">20</tspan></text>
<text fill="#9633ff" font-weight="bold" transform="translate(0 -3)"><tspan x="277" y="391">20</tspan></text>
<text fill="#9633ff" font-weight="bold" transform="translate(0 -3)"><tspan x="481" y="391">20</tspan></text>
<text fill="#9633ff" font-weight="bold"><tspan x="697" y="388">20</tspan></text>
<path stroke="#f36" d="M117 433h1010"/>
<text fill="#f36" font-weight="bold"><tspan x="1134" y="438">16</tspan></text>
<text fill="#aaa" font-weight="bold"><tspan x="2" y="396">Base value:</tspan></text>
<text fill="#f36" font-weight="bold" transform="translate(0 -3)"><tspan x="277" y="432">16</tspan></text>
<text fill="#f36" font-weight="bold" transform="translate(0 -3)"><tspan x="481" y="432">16</tspan></text>
<text fill="#f36" font-weight="bold" transform="translate(0 -3)"><tspan x="697" y="432">16</tspan></text>
<text fill="#83c14c" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="321">~27</tspan></text>
<text fill="#83c14c" font-weight="bold" transform="translate(0 -3)"><tspan x="472" y="260">~34</tspan></text>
<text fill="#83c14c" font-weight="bold" transform="translate(0 -3)"><tspan x="694" y="194">40</tspan></text>
<text fill="#28b3ee" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="356">~24</tspan></text>
<text fill="#28b3ee" font-weight="bold" transform="translate(0 -3)"><tspan x="473" y="326">~27</tspan></text>
<text fill="#28b3ee" font-weight="bold" transform="translate(0 -3)"><tspan x="696" y="293">30</tspan></text>
<text fill="#313b45" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="284">~31</tspan></text>
<text fill="#313b45" font-weight="bold" transform="translate(0 -3)"><tspan x="473" y="191">~40</tspan></text>
<text fill="#313b45" font-weight="bold" transform="translate(0 -3)"><tspan x="694" y="93">50</tspan></text>
<path stroke="#28b3ee" d="M717 293h410M117 383l600-90"/>
<text fill="#28b3ee" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="301">30</tspan></text>
<path stroke="#83c14c" d="M717 193h410M117 373l600-180"/>
<text fill="#83c14c" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="201">40</tspan></text>
<path stroke="#313b45" d="M717 91h410M117 363 717 91"/>
<text fill="#313b45" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="99">50</tspan></text>
</svg>
|
