blob: 96b4eabe587f9fbc1f01a25283d1cd12f8bd4ad1 (
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
|
<svg width='100' height='100' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<style>
:root {
--dark-stroke: 1;
--stroke-lightness: calc(100% - calc(var(--dark-stroke) * 100%));
--x-color: hsl(300, 100%, 50%);
--o-color: hsl(180, 100%, 50%);
--stroke-color: hsl(0, 0%, var(--stroke-lightness));
--stroke-width: 6;
}
.board {
stroke-width: var(--stroke-width);
stroke: var(--stroke-color);
}
.x {
stroke-width: var(--stroke-width);
stroke: var(--x-color);
}
.o {
stroke-width: var(--stroke-width);
stroke: var(--o-color);
fill-opacity: 0;
}
</style>
<path class='board' d='M33 0, 33 100'/>
<path class='board' d='M66 0, 66 100'/>
<path class='board' d='M0 33, 100 33'/>
<path class='board' d='M0 66, 100 66'/>
<path class='x' d='M3 3, 27 27'/>
<path class='x' d='M27 3, 3 27'/>
<circle class='o' cx='85' cy='85' r='12'/>
</svg>
|
