Skip to content

Instantly share code, notes, and snippets.

@PM2Ring
Created November 1, 2023 23:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PM2Ring/502594e72f2a167ddff955794c7f678f to your computer and use it in GitHub Desktop.
Save PM2Ring/502594e72f2a167ddff955794c7f678f to your computer and use it in GitHub Desktop.
Hyperbolic color demo
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
""" 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))
@PM2Ring
Copy link
Author

PM2Ring commented Nov 1, 2023

Live demo on SageMathCell.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment