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-17 23:42:40 +01:00
parent f85ac66e3c
commit a4ef140e75
3 changed files with 72 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
website/theme/static/css/styles.css
View File

@ -120,6 +120,9 @@ IMAGES
/* ---------------------------------------------------
ANIMATION
----------------------------------------------------*/
/* --- 040 ------------------ */
.a-040-010 circle {
animation: show-hide-14 14s ease infinite;
transform-origin: center;

66
website/theme/static/images/gfx-index-animation.svg Normal file
View File

@ -0,0 +1,66 @@
<svg class="db" width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect 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="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="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 id="a-010-020" x="320" 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="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 id="a-010-060" x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle id="my-circle" cx="32" cy="96" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="10s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="10s"
values="32; 32; 26; 26; 32; 32"
keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
repeatCount="indefinite"/>
</circle>
<circle cx="96" cy="160" r="32" fill="#4B1202"/>
<circle cx="160" cy="416" r="32" fill="#4B1202"/>
<circle cx="480" cy="416" r="32" fill="#4B1202"/>
<circle cx="672" cy="416" r="32" fill="#4B1202"/>
<circle cx="224" 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="96" 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="352" 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 id="a-010-030" cx="416" 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="288" cy="96" r="32" fill="#4B1202"/>
<circle cx="544" cy="96" r="32" fill="#4B1202"/>
<circle cx="672" cy="96" r="32" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

4
website/theme/templates/index.html
View File

@ -7,7 +7,9 @@
<div class="w-100 bgColorOrange">
<div class="mw7 center">
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCropSplash">
<img src="/theme/images/gfx-index-animation.svg" alt="pattern" width="768px" height="448px" class="db imageCropSplash">
</div>
</div>