mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-05-17 13:24:49 -07:00
58 lines
2.2 KiB
XML
58 lines
2.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 173.2 200" role="img" aria-label="bitview">
|
|
<title>bitview</title>
|
|
<style>
|
|
svg {
|
|
--fill: 0.5;
|
|
--face-top: oklch(67.64% 0.191 44.41);
|
|
--face-left: oklch(64.34% 0.191 44.41);
|
|
--face-right: oklch(61.04% 0.191 44.41);
|
|
--face-bottom: oklch(57.74% 0.191 44.41);
|
|
}
|
|
svg[data-theme="light"] {
|
|
--face-top: oklch(90% 0 0);
|
|
--face-left: oklch(86.7% 0 0);
|
|
--face-right: oklch(83.4% 0 0);
|
|
--face-bottom: oklch(80.1% 0 0);
|
|
}
|
|
svg[data-theme="dark"] {
|
|
--face-top: oklch(26.6% 0 0);
|
|
--face-left: oklch(23.3% 0 0);
|
|
--face-right: oklch(20% 0 0);
|
|
--face-bottom: oklch(10.1% 0 0);
|
|
}
|
|
.glass { fill-opacity: 0.4; }
|
|
.glass-top, .liquid-top { fill: var(--face-top); }
|
|
.glass-right, .liquid-right { fill: var(--face-right); }
|
|
.glass-left, .liquid-left { fill: var(--face-left); }
|
|
.glass-bottom { fill: var(--face-bottom); }
|
|
.glass-rear-left { fill: var(--face-top); }
|
|
.glass-rear-right { fill: var(--face-left); }
|
|
.liquid {
|
|
transform-box: view-box;
|
|
transform: translateY(calc((1 - var(--fill)) * 50%));
|
|
opacity: ceil(var(--fill));
|
|
}
|
|
</style>
|
|
<defs>
|
|
<clipPath id="hex" clipPathUnits="userSpaceOnUse">
|
|
<polygon points="86.6,0 173.2,50 173.2,150 86.6,200 0,150 0,50"/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<polygon class="glass glass-bottom" points="86.6,100 173.2,150 86.6,200 0,150"/>
|
|
<polygon class="glass glass-rear-left" points="86.6,100 0,150 0,50 86.6,0"/>
|
|
<polygon class="glass glass-rear-right" points="86.6,100 173.2,150 173.2,50 86.6,0"/>
|
|
|
|
<g clip-path="url(#hex)">
|
|
<g class="liquid">
|
|
<polygon class="liquid-top" points="86.6,0 173.2,50 86.6,100 0,50"/>
|
|
<polygon class="liquid-right" points="173.2,50 173.2,150 86.6,200 86.6,100"/>
|
|
<polygon class="liquid-left" points="0,50 0,150 86.6,200 86.6,100"/>
|
|
</g>
|
|
</g>
|
|
|
|
<polygon class="glass glass-top" points="0,50 86.6,0 173.2,50 86.6,100"/>
|
|
<polygon class="glass glass-right" points="173.2,50 173.2,150 86.6,200 86.6,100"/>
|
|
<polygon class="glass glass-left" points="0,50 0,150 86.6,200 86.6,100"/>
|
|
</svg>
|