Skip to content

Website: static logo with fixed pictogram colors #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tuanphungcz merged 2 commits into from
Oct 12, 2026
Merged

Website: static logo with fixed pictogram colors #113

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe6acdf
Website: static logo with fixed pictogram colors
thesvbd Oct 11, 2026
3965cbd
Merge branch 'main' into website-static-logo
tuanphungcz Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions website/src/components/Logo.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,32 @@
---
// The original useAnimations logo (useanimations.com): two faint rounded shapes and the wordmark,
// all in the text color. public/logo.svg is the same logo as a white file.
// The useAnimations logo: two rounded shapes (#1A1A1A small, #333333 large, in both themes) and the
// wordmark (#1A1A1A in light mode, white in dark mode). Static, no animation.
interface Props {
class?: string;
wordmark?: boolean;
}
const { class: className = '', wordmark = true } = Astro.props;
---

<span class:list={['group/logo inline-flex items-center text-fg', className]}>
<span class:list={['inline-flex items-center', className]}>
<svg
viewBox={wordmark ? '0 0 149 34' : '0 0 35 34'}
class="h-7 w-auto shrink-0"
fill="currentColor"
fill-rule="evenodd"
aria-hidden="true"
>
<path
class="origin-bottom-left transition-transform duration-500 ease-out group-hover/logo:-translate-y-0.5 group-hover/logo:rotate-[-6deg]"
fill-opacity="0.1"
fill="#1A1A1A"
d="M11.29 33.89c.28 0 1.3.18 1.3-1.1V14.96a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v7.97c0 6.05 5.05 10.96 11.29 10.96"
></path>
<path
class="origin-bottom transition-transform duration-500 ease-out group-hover/logo:translate-y-[-1.5px]"
fill-opacity="0.2"
fill="#333333"
d="M32.61.01c.43 0 2.02-.27 2.02 1.71V31a3 3 0 0 1-3 3H18.11a3 3 0 0 1-3-3V17c0-9.38 7.84-16.99 17.5-16.99"
></path>
{
wordmark && (
<path
class="fill-[#1A1A1A] dark:fill-white"
fill-rule="nonzero"
d="M54.25 21.73q-.44.12-1.17.27-.75.15-1.8.15-.88 0-1.46-.25-.58-.26-.95-.72a3 3 0 0 1-.51-1.13q-.15-.66-.16-1.46v-4.35h.97v4.04q0 .82.13 1.4.11.56.39.92.26.35.7.5.42.16 1.03.16a8 8 0 0 0 1.85-.2v-6.81h.97zm4.16-.42q.85 0 1.4-.28.54-.27.54-.94 0-.3-.1-.54a1 1 0 0 0-.32-.4 3 3 0 0 0-.6-.34q-.36-.17-.9-.4l-.83-.36a3 3 0 0 1-.69-.44 2 2 0 0 1-.47-.59 2 2 0 0 1-.18-.84q0-.95.7-1.53a3 3 0 0 1 1.96-.59 5 5 0 0 1 2.05.38l-.23.87-.6-.24a4 4 0 0 0-1.88-.08q-.3.06-.52.2t-.36.37a1 1 0 0 0-.14.53q0 .32.13.54.12.22.35.4a3 3 0 0 0 .57.32 33 33 0 0 0 1.63.7q.42.18.73.45.31.25.51.63.2.36.2.92 0 1.05-.8 1.59-.77.54-2.15.54a5.4 5.4 0 0 1-2.27-.43l.25-.89.2.1a4 4 0 0 0 1 .29q.36.06.82.06m4.37-3.2q0-1.02.3-1.77.28-.75.76-1.27.46-.52 1.08-.76.6-.25 1.25-.25 1.42 0 2.27.93t.85 2.87l-.03.46h-5.45q.06 1.43.71 2.2.66.75 2.1.76a4 4 0 0 0 1.94-.4l.17.84q-.21.12-.78.28t-1.36.16q-1.02 0-1.74-.3a3.1 3.1 0 0 1-1.86-2.12 6 6 0 0 1-.21-1.62m5.5-.61a3 3 0 0 0-.56-1.89 1.9 1.9 0 0 0-1.53-.67q-.54 0-.94.2-.42.22-.72.57t-.48.81q-.17.48-.2.98zM78.32 22l-.43-1.21q-.23-.6-.44-1.23h-4.38a59 59 0 0 1-.85 2.44h-1.97a177 177 0 0 1 2.14-5.75 86 86 0 0 1 2.02-4.64h1.78a77 77 0 0 1 2.02 4.64A156 156 0 0 1 80.36 22zm-3.06-8.38q-.35.8-.79 1.93-.44 1.14-.92 2.47h3.42a101 101 0 0 0-1.71-4.4m6.33.79a12 12 0 0 1 3.22-.42q.97 0 1.61.26a2.5 2.5 0 0 1 1.57 1.88q.16.66.16 1.46V22h-1.82v-4.12q0-.64-.08-1.08a2 2 0 0 0-.27-.72q-.2-.28-.51-.4a2 2 0 0 0-.79-.13 6 6 0 0 0-1.28.12V22H81.6zM92.19 22h-1.81v-7.85h1.81zm.2-10.14q0 .51-.33.81t-.78.3-.8-.3q-.33-.3-.33-.81 0-.52.33-.82.34-.3.8-.3.45 0 .78.3t.33.82m6.58 6.02q0-1.24-.3-1.78-.3-.55-1.15-.55a5 5 0 0 0-1.2.12V22h-1.81v-7.59a12 12 0 0 1 3.16-.42q.8 0 1.33.21.51.2.86.56a4 4 0 0 1 .99-.5 5 5 0 0 1 1.38-.27q.91 0 1.5.26.6.27.94.74t.46 1.14q.13.66.13 1.46V22h-1.82v-4.12q0-1.24-.3-1.78-.3-.55-1.15-.55-.43 0-.82.14-.4.15-.59.28a4 4 0 0 1 .17.8q.04.41.04.9V22h-1.82zm11.27 2.85q.83 0 1.28-.1v-2a4 4 0 0 0-1.07-.14q-.3 0-.6.05-.32.04-.56.16a1 1 0 0 0-.4.34 1 1 0 0 0-.15.55q0 .64.4.89.42.24 1.1.25m-.15-6.77q.9 0 1.52.22.6.23.98.63.37.41.52.99.16.57.16 1.27v4.75q-.42.09-1.27.22-.84.12-1.91.13-.7 0-1.29-.14a3 3 0 0 1-1-.44q-.41-.3-.64-.77a3 3 0 0 1-.23-1.19q0-.67.26-1.14t.71-.76q.45-.3 1.04-.42a6 6 0 0 1 2.58.04v-.3q0-.32-.08-.6a1 1 0 0 0-.26-.5 1 1 0 0 0-.5-.34q-.3-.12-.77-.12a7 7 0 0 0-2.01.3l-.23-1.47q.35-.12 1.01-.24t1.41-.12m5.31-1.87 1.81-.3v2.37h2.8v1.51h-2.8v3.2q0 .94.3 1.34t1.02.41q.5 0 .88-.1.39-.11.61-.2l.3 1.44a4.49 4.49 0 0 1-2.02.42 4 4 0 0 1-1.4-.23 2 2 0 0 1-.9-.65 3 3 0 0 1-.47-1.03q-.13-.6-.13-1.39zm8.19 9.91h-1.81v-7.85h1.81zm.2-10.14q0 .51-.34.81-.32.3-.78.3-.45 0-.79-.3-.33-.3-.33-.81 0-.52.33-.82.32-.3.8-.3.44 0 .77.3.34.3.33.82m9.2 6.21q0 .93-.27 1.7t-.76 1.3-1.2.84-1.53.3a4 4 0 0 1-1.53-.3q-.68-.3-1.19-.84-.49-.54-.77-1.3a5 5 0 0 1-.27-1.7q0-.93.27-1.69.28-.75.78-1.3.5-.54 1.2-.83.69-.3 1.51-.29.83 0 1.52.3.7.28 1.2.83.49.54.77 1.3.28.75.28 1.68m-1.86 0q0-1.17-.5-1.85t-1.4-.68-1.4.68-.5 1.85q0 1.18.5 1.88.5.69 1.4.69t1.4-.7.5-1.87m3.74-3.66a12 12 0 0 1 3.22-.42q.97 0 1.61.26a2.5 2.5 0 0 1 1.57 1.88q.16.66.16 1.46V22h-1.82v-4.12q0-.64-.08-1.08a2 2 0 0 0-.27-.72q-.2-.28-.51-.4a2 2 0 0 0-.79-.13 6 6 0 0 0-1.28.12V22h-1.81zm10.74 6.29q.72 0 1.05-.18t.33-.59a.8.8 0 0 0-.35-.64 5 5 0 0 0-1.16-.56 9 9 0 0 1-.91-.38 3 3 0 0 1-.72-.48q-.3-.27-.47-.65a2 2 0 0 1-.17-.93q0-1.1.8-1.7a3.4 3.4 0 0 1 2.16-.63 7 7 0 0 1 2.26.38l-.33 1.47a4.5 4.5 0 0 0-1.84-.37q-.56 0-.9.2a.6.6 0 0 0-.35.57q0 .2.07.34.06.16.23.28.16.13.44.26.27.12.66.26.64.24 1.09.47t.74.53q.3.3.43.66.14.38.14.9 0 1.14-.84 1.7-.83.6-2.37.59a7 7 0 0 1-2.56-.45l.32-1.52q.41.16.97.32.56.15 1.28.14"
/>
Expand Down
Loading