offen.software/website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animate inside svg

Browse Source
This commit is contained in:
Hendrik Niefeld 2024-01-20 21:03:28 +01:00
parent a4ef140e75
commit 4e6344a848
1 changed files with 149 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
website/theme/static/images/gfx-index-animation.svg
View File

@ -2,34 +2,136 @@
<rect width="64" height="64" rx="2" fill="#4B1202"/> <rect width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect id="a-010-040" x="192" y="192" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="192" y="192" width="64" height="64" rx="2" fill="#4B1202">
<animate attributeName="opacity"
dur="14s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
repeatCount="indefinite"/>
<animate attributeName="width"
dur="14s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
repeatCount="indefinite"/>
<animate attributeName="height"
dur="14s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
repeatCount="indefinite"/>
<animate attributeName="x"
dur="14s"
values="192; 192; 200; 200; 192; 192"
keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
repeatCount="indefinite"/>
<animate attributeName="y"
dur="14s"
values="192; 192; 200; 200; 192; 192"
keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
repeatCount="indefinite"/>
</rect>
<circle cx="224" cy="224" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="14s"
values="0; 0; 1; 1; 0; 0"
keyTimes="0; 0.1; 0.12; 0.46; 0.48; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="14s"
values="26; 26; 32; 32; 26; 26"
keyTimes="0; 0.1; 0.12; 0.46; 0.48; 1"
repeatCount="indefinite"/>
</circle>
<rect x="384" y="192" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="384" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="256" y="256" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="256" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="320" y="320" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="320" y="320" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="384" y="384" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="384" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
<rect id="a-010-020" x="320" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="320" width="64" height="64" rx="2" fill="#4B1202">
<animate attributeName="opacity"
dur="20s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
repeatCount="indefinite"/>
<animate attributeName="width"
dur="20s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
repeatCount="indefinite"/>
<animate attributeName="height"
dur="20s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
repeatCount="indefinite"/>
<animate attributeName="x"
dur="20s"
values="320; 320; 327; 327; 320; 320"
keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
repeatCount="indefinite"/>
<animate attributeName="y"
dur="20s"
values="0; 0; 7; 7; 0; 0"
keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
repeatCount="indefinite"/>
</rect>
<rect x="192" y="64" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="192" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="448" y="128" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="448" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="192" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="512" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="576" y="256" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="576" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
<rect id="a-010-060" x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/> <rect x="704" y="384" width="64" height="64" rx="2" fill="#4B1202">
<animate attributeName="opacity"
dur="16s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
repeatCount="indefinite"/>
<animate attributeName="width"
dur="16s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
repeatCount="indefinite"/>
<animate attributeName="height"
dur="16s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
repeatCount="indefinite"/>
<animate attributeName="x"
dur="16s"
values="704; 704; 710; 710; 704; 704"
keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
repeatCount="indefinite"/>
<animate attributeName="y"
dur="16s"
values="384; 384; 390; 390; 384; 384"
keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
repeatCount="indefinite"/>
</rect>
<circle cx="736" cy="416" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="16s"
values="0; 0; 1; 1; 0; 0"
keyTimes="0; 0.2; 0.21; 0.68; 0.69; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="16s"
values="26; 26; 32; 32; 26; 26"
keyTimes="0; 0.2; 0.21; 0.68; 0.69; 1"
repeatCount="indefinite"/>
</circle>
<circle cx="96" cy="32" r="32" fill="#4B1202"/> <circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle id="my-circle" cx="32" cy="96" r="32" fill="#4B1202"> <circle cx="32" cy="96" r="32" fill="#4B1202">
<animate attributeName="opacity" <animate attributeName="opacity"
dur="10s" dur="22s"
values="1; 1; 0; 0; 1; 1" values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1" keyTimes="0; 0.19; 0.2; 0.39; 0.4; 1"
repeatCount="indefinite"/> repeatCount="indefinite"/>
<animate attributeName="r" <animate attributeName="r"
dur="10s" dur="22s"
values="32; 32; 26; 26; 32; 32" values="32; 32; 26; 26; 32; 32"
keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1" keyTimes="0; 0.19; 0.2; 0.39; 0.4; 1"
repeatCount="indefinite"/> repeatCount="indefinite"/>
</circle> </circle>
@ -40,16 +142,53 @@
<circle cx="224" cy="352" r="32" fill="#4B1202"/> <circle cx="224" cy="352" r="32" fill="#4B1202"/>
<circle cx="416" cy="352" r="32" fill="#4B1202"/> <circle cx="416" cy="352" r="32" fill="#4B1202"/>
<circle id="a-010-050" cx="608" cy="352" r="32" fill="#4B1202"/> <circle cx="608" cy="352" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="13s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.08; 0.1; 0.38; 0.4; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="13s"
values="32; 32; 26; 26; 32; 32"
keyTimes="0; 0.08; 0.1; 0.38; 0.4; 1"
repeatCount="indefinite"/>
</circle>
<circle cx="96" cy="288" r="32" fill="#4B1202"/> <circle cx="96" cy="288" r="32" fill="#4B1202"/>
<circle cx="160" cy="288" r="32" fill="#4B1202"/> <circle cx="160" cy="288" r="32" fill="#4B1202"/>
<circle cx="416" cy="288" r="32" fill="#4B1202"/> <circle cx="416" cy="288" r="32" fill="#4B1202"/>
<circle cx="480" cy="288" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="8s"
values="0; 0; 1; 1; 0; 0"
keyTimes="0; 0.7; 0.73; 0.97; 1; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="8s"
values="26; 26; 32; 32; 26; 26"
keyTimes="0; 0.7; 0.73; 0.97; 1; 1"
repeatCount="indefinite"/>
</circle>
<circle cx="352" cy="224" r="32" fill="#4B1202"/> <circle cx="352" cy="224" r="32" fill="#4B1202"/>
<circle cx="672" cy="224" r="32" fill="#4B1202"/> <circle cx="672" cy="224" r="32" fill="#4B1202"/>
<circle cx="224" cy="160" r="32" fill="#4B1202"/> <circle cx="224" cy="160" r="32" fill="#4B1202"/>
<circle id="a-010-030" cx="416" cy="160" r="32" fill="#4B1202"/> <circle cx="416" cy="160" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="10s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.05; 0.07; 0.18; 0.2; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="10s"
values="32; 32; 26; 26; 32; 32"
keyTimes="0; 0.05; 0.07; 0.18; 0.2; 1"
repeatCount="indefinite"/>
</circle>
<circle cx="672" cy="160" r="32" fill="#4B1202"/> <circle cx="672" cy="160" r="32" fill="#4B1202"/>
<circle cx="160" cy="96" r="32" fill="#4B1202"/> <circle cx="160" cy="96" r="32" fill="#4B1202"/>
@ -59,8 +198,4 @@
<circle cx="224" cy="32" r="32" fill="#4B1202"/> <circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="416" cy="32" r="32" fill="#4B1202"/> <circle cx="416" cy="32" r="32" fill="#4B1202"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB