rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

history, reduced-motion, editable name box, an easter egg

Browse source
This commit is contained in:
Rhiannon Morris 2024-12-13 03:14:37 +01:00
parent d52151e787
commit 0a59aa66f6
14 changed files with 782 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

43
rainbow-quox/history.svg Normal file
View file

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="30" height="30" viewBox="0 0 100 100">
<defs>
<linearGradient id="arrow-color-fade" y1="100%" y2="0%">
<stop offset="20%" stop-color="hsl(60 90% 95%)" />
<stop offset="100%" stop-color="hsl(60 80% 90%)" />
</linearGradient>
<linearGradient id="arrow-alpha-fade" y1="100%" y2="0%">
<stop offset="25%" stop-color="white" />
<stop offset="75%" stop-color="black" />
</linearGradient>
<path id="arrow-path"
d="M 50,10 a 40,40 0 1 0 28.28,68.28
v15 h10 v-32.07 h-32.07 v10 h15
a 30,30 0 1 1 -21.21,-51.21 z" />
<mask id="arrow-mask">
<rect width="100" height="100" fill="black" />
<use href="#arrow-path" fill="white" />
</mask>
<mask id="fade-mask">
<rect width="100" height="100" fill="white" />
<rect width="55" height="55" fill="url(#arrow-alpha-fade)" />
</mask>
</defs>
<g id="arrow" mask="url(#fade-mask)">
<use href="#arrow-path" fill="none" />
<g id="arrow-fill" mask="url(#arrow-mask)">
<rect width="100" height="100" fill="hsl(60 90% 95%)" />
<rect x="40" y="40" width="60" height="60" fill="url(#arrow-color-fade)" />
</g>
</g>
<path id="hands" fill="url(#arrow-color-fade)" stroke="#123"
d="M 46,28 v 28 h 28 v -8 h -20 v -20 h -8 z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB