Home
/ source / content / articles / turing_complete_css / v1.j2
Download Direct linkSettings
Aa
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
Copy 
{%- set w, h = 10, 10 -%}

<!DOCTYPE html>
<html>

<head>
    <style>
        body, div {
            line-height: 0;
        }

        :root {
            {%- for wi in range(w) -%}
                --v{{wi}}: 0;
            {%- endfor -%}
        }

        div.v {
            {%- for wi in range(w) -%}
                {%- macro b(shift) -%}
                    var(--b{{(shift + wi) % w}})
                {%- endmacro -%}
                {%- set p, q, r = b(-1), b(0), b(1) -%}

                --v{{wi}}: calc(
                    (1 - (1 - {{q}}) * (1 - {{r}})) * (1 - {{p}} * {{q}} * {{r}})
                );
            {%- endfor -%}
        }

        div.b {
            {%- for wi in range(w) -%}
                --b{{wi}}: var(--v{{wi}});
            {%- endfor -%}
        }

        [class^="c"] {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid gray;
        }

        {%- for wi in range(w) -%}
            .c{{wi}} {
                background-color: hsl(0, 0%, calc(100% - 100% * var(--v{{wi}})));
            }

            input#i{{wi}}:checked~div {
                --v{{wi}}: 1;
            }
        {%- endfor -%}

        label {
            border: 1px solid gray;
            display: inline-block;
            height: 20px;
            width: 20px;
            background-color: white;
        }
          
        input {
            display: none;
        }
          
        input:checked + label {
            background-color: black;
        }
    </style>
</head>

<body>
    {%- for wi in range(w) -%}
        <input id="i{{wi}}" type="checkbox"><label for="i{{wi}}"></label>
    {%- endfor -%}

    <div class="b">
        {%- for i in range(h - 1) -%}
            <div class="v"><div class="b">
            {%- for wi in range(w) -%}
                <span class="c{{wi}}"></span>
            {%- endfor -%}
        {%- endfor -%}

        {%- for i in range(h - 1) -%}
            </div></div>
        {%- endfor -%}
    </div>
</body>

</html>