Hyperbolic color demo

hyper.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.c0{fill:hwb(60 0% 0%)}
.c1{fill:hwb(240 0% 0%)}
</style>
<rect id="a" width="100" height="100" class="c0">
<set attributeName="class" to="c1" begin="a.click" dur="5s"/>
</rect>
<circle cx="50" cy="50" r="1"/></svg>

hypercolor.py

""" Hyperbolic color demo
    Written by PM 2Ring 2023.11.2
"""

txt = ''' <h3>Hyperbolic color demo</h3>
Stare at the black dot for ~30 seconds,
then click the colored square to change it
to the complementary color.
'''

@interact
def _(txt=HtmlBox(txt), hue=60):
    out = f'''\
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.c0{{fill:hwb({hue} 0% 0%)}}
.c1{{fill:hwb({(hue+180)%360} 0% 0%)}}
</style>
<rect id="a" width="100" height="100" class="c0">
<set attributeName="class" to="c1" begin="a.click" dur="5s"/>
</rect>
<circle cx="50" cy="50" r="1"/></svg>
'''
    with open("hyper.svg", "w") as f:
        f.write(out)
    #print(out)
    show(html(out))

Live demo on SageMathCell.