Updated logo

This commit is contained in:
squidfunk
2021-02-15 11:23:35 +01:00
parent bfddebba3e
commit bbddf56a73
2 changed files with 53 additions and 28 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -33,11 +33,6 @@
transition: box-shadow 1s; transition: box-shadow 1s;
} }
.logo:hover {
box-shadow: 0 0 0 4px red;
animation: logo 2s infinite ease-in-out;
}
.logo svg { .logo svg {
display: block; display: block;
margin: 20%; margin: 20%;
@@ -66,36 +61,66 @@
<div class="logo"> <div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<polygon <polygon>
points="3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387" <animate
> attributeName="points" calcMode="spline" fill="freeze"
dur="4s" begin="1s"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
values="
3.136 17.387, 3.136 60.319, 3.136 60.319, 3.136 60.319;
3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387
"
/>
</polygon>
<polygon style="fill-opacity: 0.5;">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="4s" begin="1s"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
values="
21.910 50.932, 21.910 50.932, 3.136 60.319, 3.136 60.319;
21.910 8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387
"
/>
</polygon> </polygon>
<clipPath id="clip"> <clipPath id="clip">
<polygon <polygon>
points="21.910 8.000, 64.843 72.398, 89 89, 89 0" <animate
style="fill: blue; fill-opacity: 0.25" attributeName="points" calcMode="spline" fill="freeze"
> dur="4s" begin="1s"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
values="
21.910 50.932, 21.910 50.932, 89 89, 89 0;
21.910 8.000, 64.843 72.398, 89 89, 89 0
"
/>
</polygon> </polygon>
</clipPath> </clipPath>
<polygon <polygon clip-path="url(#clip)">
points="21.910 8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387" <animate
style="fill-opacity: 0.5;" attributeName="points" calcMode="spline" fill="freeze"
> dur="4s" begin="1.125s"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
values="
67.535 71.052, 67.535 71.052, 62.151 68.361, 67.535 71.052;
67.535 17.387, 21.509 48.04, 62.151 68.361, 67.535 71.052
"
/>
</polygon> </polygon>
<polygon <polygon clip-path="url(#clip)" style="fill-opacity: 0.25;">
clip-path="url(#clip)" <animate
points="67.535 17.387, 21.509 48.04, 62.151 68.361, 67.535 71.052" attributeName="points" calcMode="spline" fill="freeze"
> dur="4s" begin="1.125s"
</polygon> keyTimes="0;1" keySplines="0.87 0 0.13 1"
values="
<polygon 67.535 71.053, 86.309 61.665, 86.309 61.665, 67.535 71.053;
clip-path="url(#clip)" 67.535 71.053, 86.309 61.665, 86.309 8.000, 67.535 17.387
points="67.535 71.053, 86.309 61.665, 86.309 8.000, 67.535 17.387" "
style="fill-opacity: 0.25;" />
>
</polygon> </polygon>
</svg> </svg>
</div> </div>

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB