intercal/colorhash
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Javascript implementation

Browse Source 
Add a simple JS port of colorhash for easier demonstration purposes. You
don't need to open a command line to create a colorhash, you can just
use the webpage.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>
This commit is contained in:
Alek Ratzloff
2024-06-03 11:16:07 -07:00
parent 6091170ed4
commit c416c24a9c
3 changed files with 565 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
examples/commithash.svg
View File

@@ -1,42 +1,42 @@
<svg width="256" height="160" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="32" height="32" fill="hsl(0.00,100.00%,83.33%)" />
<rect x="32" y="0" width="32" height="32" fill="hsl(0.00,100.00%,96.67%)" />
<rect x="64" y="0" width="32" height="32" fill="hsl(0.00,100.00%,56.67%)" />
<rect x="96" y="0" width="32" height="32" fill="hsl(0.00,100.00%,76.67%)" />
<rect x="128" y="0" width="32" height="32" fill="hsl(0.00,100.00%,76.67%)" />
<rect x="160" y="0" width="32" height="32" fill="hsl(0.00,100.00%,86.67%)" />
<rect x="192" y="0" width="32" height="32" fill="hsl(0.00,100.00%,50.00%)" />
<rect x="224" y="0" width="32" height="32" fill="hsl(0.00,100.00%,70.00%)" />
<rect x="0" y="32" width="32" height="32" fill="hsl(0.00,100.00%,93.33%)" />
<rect x="32" y="32" width="32" height="32" fill="hsl(0.00,100.00%,100.00%)" />
<rect x="64" y="32" width="32" height="32" fill="hsl(0.00,100.00%,63.33%)" />
<rect x="96" y="32" width="32" height="32" fill="hsl(0.00,100.00%,83.33%)" />
<rect x="128" y="32" width="32" height="32" fill="hsl(0.00,100.00%,63.33%)" />
<rect x="160" y="32" width="32" height="32" fill="hsl(0.00,100.00%,70.00%)" />
<rect x="192" y="32" width="32" height="32" fill="hsl(0.00,100.00%,50.00%)" />
<rect x="224" y="32" width="32" height="32" fill="hsl(0.00,100.00%,90.00%)" />
<rect x="0" y="64" width="32" height="32" fill="hsl(0.00,100.00%,60.00%)" />
<rect x="32" y="64" width="32" height="32" fill="hsl(0.00,100.00%,73.33%)" />
<rect x="64" y="64" width="32" height="32" fill="hsl(0.00,100.00%,90.00%)" />
<rect x="96" y="64" width="32" height="32" fill="hsl(0.00,100.00%,76.67%)" />
<rect x="128" y="64" width="32" height="32" fill="hsl(0.00,100.00%,60.00%)" />
<rect x="160" y="64" width="32" height="32" fill="hsl(0.00,100.00%,70.00%)" />
<rect x="192" y="64" width="32" height="32" fill="hsl(0.00,100.00%,96.67%)" />
<rect x="224" y="64" width="32" height="32" fill="hsl(0.00,100.00%,56.67%)" />
<rect x="0" y="96" width="32" height="32" fill="hsl(0.00,100.00%,73.33%)" />
<rect x="32" y="96" width="32" height="32" fill="hsl(0.00,100.00%,50.00%)" />
<rect x="64" y="96" width="32" height="32" fill="hsl(0.00,100.00%,100.00%)" />
<rect x="96" y="96" width="32" height="32" fill="hsl(0.00,100.00%,80.00%)" />
<rect x="128" y="96" width="32" height="32" fill="hsl(0.00,100.00%,96.67%)" />
<rect x="160" y="96" width="32" height="32" fill="hsl(0.00,100.00%,93.33%)" />
<rect x="192" y="96" width="32" height="32" fill="hsl(0.00,100.00%,83.33%)" />
<rect x="224" y="96" width="32" height="32" fill="hsl(0.00,100.00%,83.33%)" />
<rect x="0" y="128" width="32" height="32" fill="hsl(0.00,100.00%,86.67%)" />
<rect x="32" y="128" width="32" height="32" fill="hsl(0.00,100.00%,100.00%)" />
<rect x="64" y="128" width="32" height="32" fill="hsl(0.00,100.00%,100.00%)" />
<rect x="96" y="128" width="32" height="32" fill="hsl(0.00,100.00%,86.67%)" />
<rect x="128" y="128" width="32" height="32" fill="hsl(0.00,100.00%,73.33%)" />
<rect x="160" y="128" width="32" height="32" fill="hsl(0.00,100.00%,93.33%)" />
<rect x="192" y="128" width="32" height="32" fill="hsl(0.00,100.00%,70.00%)" />
<rect x="224" y="128" width="32" height="32" fill="hsl(0.00,100.00%,93.33%)" />
<rect x="0" y="0" width="32" height="32" fill="hsl(180.00,100.00%,20.00%)" />
<rect x="32" y="0" width="32" height="32" fill="hsl(180.00,100.00%,0.00%)" />
<rect x="64" y="0" width="32" height="32" fill="hsl(180.00,100.00%,30.00%)" />
<rect x="96" y="0" width="32" height="32" fill="hsl(180.00,100.00%,3.33%)" />
<rect x="128" y="0" width="32" height="32" fill="hsl(180.00,100.00%,3.33%)" />
<rect x="160" y="0" width="32" height="32" fill="hsl(180.00,100.00%,23.33%)" />
<rect x="192" y="0" width="32" height="32" fill="hsl(180.00,100.00%,0.00%)" />
<rect x="224" y="0" width="32" height="32" fill="hsl(180.00,100.00%,46.67%)" />
<rect x="0" y="32" width="32" height="32" fill="hsl(180.00,100.00%,43.33%)" />
<rect x="32" y="32" width="32" height="32" fill="hsl(180.00,100.00%,13.33%)" />
<rect x="64" y="32" width="32" height="32" fill="hsl(180.00,100.00%,46.67%)" />
<rect x="96" y="32" width="32" height="32" fill="hsl(180.00,100.00%,10.00%)" />
<rect x="128" y="32" width="32" height="32" fill="hsl(180.00,100.00%,40.00%)" />
<rect x="160" y="32" width="32" height="32" fill="hsl(180.00,100.00%,43.33%)" />
<rect x="192" y="32" width="32" height="32" fill="hsl(180.00,100.00%,46.67%)" />
<rect x="224" y="32" width="32" height="32" fill="hsl(180.00,100.00%,10.00%)" />
<rect x="0" y="64" width="32" height="32" fill="hsl(180.00,100.00%,36.67%)" />
<rect x="32" y="64" width="32" height="32" fill="hsl(180.00,100.00%,6.67%)" />
<rect x="64" y="64" width="32" height="32" fill="hsl(180.00,100.00%,40.00%)" />
<rect x="96" y="64" width="32" height="32" fill="hsl(180.00,100.00%,30.00%)" />
<rect x="128" y="64" width="32" height="32" fill="hsl(180.00,100.00%,26.67%)" />
<rect x="160" y="64" width="32" height="32" fill="hsl(180.00,100.00%,10.00%)" />
<rect x="192" y="64" width="32" height="32" fill="hsl(180.00,100.00%,36.67%)" />
<rect x="224" y="64" width="32" height="32" fill="hsl(180.00,100.00%,6.67%)" />
<rect x="0" y="96" width="32" height="32" fill="hsl(180.00,100.00%,46.67%)" />
<rect x="32" y="96" width="32" height="32" fill="hsl(180.00,100.00%,13.33%)" />
<rect x="64" y="96" width="32" height="32" fill="hsl(180.00,100.00%,20.00%)" />
<rect x="96" y="96" width="32" height="32" fill="hsl(180.00,100.00%,26.67%)" />
<rect x="128" y="96" width="32" height="32" fill="hsl(180.00,100.00%,26.67%)" />
<rect x="160" y="96" width="32" height="32" fill="hsl(180.00,100.00%,3.33%)" />
<rect x="192" y="96" width="32" height="32" fill="hsl(180.00,100.00%,0.00%)" />
<rect x="224" y="96" width="32" height="32" fill="hsl(180.00,100.00%,20.00%)" />
<rect x="0" y="128" width="32" height="32" fill="hsl(180.00,100.00%,43.33%)" />
<rect x="32" y="128" width="32" height="32" fill="hsl(180.00,100.00%,6.67%)" />
<rect x="64" y="128" width="32" height="32" fill="hsl(180.00,100.00%,26.67%)" />
<rect x="96" y="128" width="32" height="32" fill="hsl(180.00,100.00%,30.00%)" />
<rect x="128" y="128" width="32" height="32" fill="hsl(180.00,100.00%,33.33%)" />
<rect x="160" y="128" width="32" height="32" fill="hsl(180.00,100.00%,3.33%)" />
<rect x="192" y="128" width="32" height="32" fill="hsl(180.00,100.00%,36.67%)" />
<rect x="224" y="128" width="32" height="32" fill="hsl(180.00,100.00%,10.00%)" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB