nomad/alaskar.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Logo: Animation

Browse source
This commit is contained in:
nomadics9 2025-01-09 22:46:39 +03:00
parent 15f2348b0f
commit 5567ee8d4c
3 changed files with 43 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/lib/components/atoms/Logo.svelte
View file

@ -4,13 +4,12 @@
</script> </script>
<div class="logo" class:animated> <div class="logo" class:animated>
<LogoIcon style="logo-glow" stroke="7px" size="72" /> <LogoIcon style="logo-glow" size="60" stroke="7" />
<svg <svg
id="logo-text" id="logo-text"
width="760" width="760"
height="121" height="121"
viewBox="0 0 723.84009 116.720269" viewBox="0 0 723.84009 116.720269"
fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
/> />
@ -60,22 +59,6 @@
@media screen and (prefers-reduced-motion: no-preference) { @media screen and (prefers-reduced-motion: no-preference) {
.animated { .animated {
// #icon {
// > path {
// --text-color: var(--color--text-shade);
// stroke-width: 2;
// animation: svg-text-stroke 3s;
// }
//
// #darker {
// > path {
// --text-color: var(--color--text);
// stroke-width: 2;
// animation: svg-text-stroke 3s;
// }
// }
// }
#text { #text {
animation: svg-text-stroke 3s; animation: svg-text-stroke 3s;
stroke-width: 2; stroke-width: 2;

24
src/lib/icons/logo.svelte
View file

File diff suppressed because one or more lines are too long

37
src/lib/scss/_animations.scss
View file

@ -24,6 +24,43 @@
} }
} }
@keyframes svg-logo-stroke {
0% {
fill: transparent;
stroke: var(--text-color);
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 0;
}
60% {
fill: transparent;
stroke: var(--text-color);
stroke-width: 4;
}
70% {
fill: transparent;
stroke: var(--text-color);
stroke-width: 5;
}
80% {
fill: transparent;
stroke: var(--text-color);
stroke-width: 6;
}
90% {
stroke: var(--text-color);
stroke-width: 7;
}
100% {
fill: var(--logo-color);
stroke: var(--text-color);
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 7;
}
}
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0turn); transform: rotate(0turn);