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:38:31 +01:00
parent 4e6344a848
commit 730e583d24
14 changed files with 138 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

27
website/theme/static/images/gfx-content-1-animation.svg Normal file
View File

@ -0,0 +1,27 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="704" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="448" y="64" width="64" height="64" fill="#4B1202"/>
<rect x="384" width="64" height="64" fill="#4B1202"/>
<rect x="256" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="96" cy="160" r="32" fill="#4B1202"/>
<circle cx="352" cy="96" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="22s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.26; 0.27; 0.36; 0.37; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="22s"
values="32; 32; 26; 26; 32; 32"
keyTimes="0; 0.26; 0.27; 0.36; 0.37; 1"
repeatCount="indefinite"/>
</circle>
<circle cx="224" cy="96" r="32" fill="#4B1202"/>
<circle cx="672" cy="96" r="32" fill="#4B1202"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

19
website/theme/static/images/gfx-content-1.svg
View File

@ -1,19 +0,0 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_80_246)">
<rect x="704" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="448" y="64" width="64" height="64" fill="#4B1202"/>
<rect x="384" width="64" height="64" fill="#4B1202"/>
<rect x="256" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="96" cy="160" r="32" fill="#4B1202"/>
<circle cx="352" cy="96" r="32" fill="#4B1202"/>
<circle cx="224" cy="96" r="32" fill="#4B1202"/>
<circle cx="672" cy="96" r="32" fill="#4B1202"/>
</g>
<defs>
<clipPath id="clip0_80_246">
<rect width="768" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 800 B

38
website/theme/static/images/gfx-content-2-animation.svg Normal file
View File

@ -0,0 +1,38 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="448" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="128" width="64" height="64" rx="2" fill="#4B1202">
<animate attributeName="opacity"
dur="14s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
repeatCount="indefinite"/>
<animate attributeName="width"
dur="14s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
repeatCount="indefinite"/>
<animate attributeName="height"
dur="14s"
values="64; 64; 50; 50; 64; 64"
keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
repeatCount="indefinite"/>
<animate attributeName="x"
dur="14s"
values="512; 512; 519; 519; 512; 512"
keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
repeatCount="indefinite"/>
<animate attributeName="y"
dur="14s"
values="128; 128; 135; 135; 128; 128"
keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
repeatCount="indefinite"/>
</rect>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="288" cy="32" r="32" fill="#4B1202"/>
<circle cx="352" cy="160" r="32" fill="#4B1202"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

8
website/theme/static/images/gfx-content-2.svg
View File

@ -1,8 +0,0 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="448" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="288" cy="32" r="32" fill="#4B1202"/>
<circle cx="352" cy="160" r="32" fill="#4B1202"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 440 B

67
website/theme/static/images/gfx-content-3-animation.svg Normal file
View File

@ -0,0 +1,67 @@
<svg width="768" height="128" viewBox="0 0 768 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="320" y="64" 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="320; 320; 327; 327; 320; 320"
keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
repeatCount="indefinite"/>
<animate attributeName="y"
dur="16s"
values="64; 64; 71; 71; 64; 64"
keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
repeatCount="indefinite"/>
</rect>
<circle cx="352" cy="96" 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>
<rect x="512" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="288" cy="32" r="32" fill="#4B1202"/>
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
<circle cx="480" cy="32" r="32" fill="#4B1202"/>
<circle cx="608" cy="32" r="32" fill="#4B1202"/>
<circle cx="672" cy="32" r="32" fill="#4B1202">
<animate attributeName="opacity"
dur="4s"
values="1; 1; 0; 0; 1; 1"
keyTimes="0; 0.26; 0.3; 0.36; 0.4; 1"
repeatCount="indefinite"/>
<animate attributeName="r"
dur="4s"
values="32; 32; 26; 26; 32; 32"
keyTimes="0; 0.26; 0.3; 0.36; 0.4; 1"
repeatCount="indefinite"/>
</circle>
<circle cx="736" cy="32" r="32" fill="#4B1202"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

20
website/theme/static/images/gfx-content-3.svg
View File

@ -1,20 +0,0 @@
<svg width="768" height="128" viewBox="0 0 768 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_90_2)">
<rect x="320" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="288" cy="32" r="32" fill="#4B1202"/>
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
<circle cx="480" cy="32" r="32" fill="#4B1202"/>
<circle cx="608" cy="32" r="32" fill="#4B1202"/>
<circle cx="672" cy="32" r="32" fill="#4B1202"/>
<circle cx="736" cy="32" r="32" fill="#4B1202"/>
</g>
<defs>
<clipPath id="clip0_90_2">
<rect width="768" height="128" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 832 B

10
website/theme/static/images/gfx-detail-1.svg
View File

@ -1,10 +0,0 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_85_316)">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
</g>
<defs>
<clipPath id="clip0_85_316">
<rect width="64" height="64" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 291 B

11
website/theme/static/images/gfx-detail-2.svg
View File

@ -1,11 +0,0 @@
<svg width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_86_327)">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
</g>
<defs>
<clipPath id="clip0_86_327">
<rect width="64" height="128" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 342 B

10
website/theme/static/images/gfx-detail-3.svg
View File

@ -1,10 +0,0 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_92_25)">
<rect width="64" height="64" rx="2" fill="#E9500A"/>
</g>
<defs>
<clipPath id="clip0_92_25">
<rect width="64" height="64" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 294 B

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

@ -1,4 +1,5 @@
<svg class="db" width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg 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 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"/>
@ -73,7 +74,7 @@
values="0; 0; 7; 7; 0; 0" values="0; 0; 7; 7; 0; 0"
keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1" keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
repeatCount="indefinite"/> repeatCount="indefinite"/>
</rect> </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"/>
@ -172,7 +173,6 @@
repeatCount="indefinite"/> repeatCount="indefinite"/>
</circle> </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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

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

@ -1,45 +0,0 @@
<svg width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_79_77)">
<rect width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect 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 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 x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="32" cy="96" r="32" fill="#4B1202"/>
<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 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 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"/>
</g>
<defs>
<clipPath id="clip0_79_77">
<rect width="768" height="448" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

5
website/theme/templates/base.html
View File

@ -25,7 +25,6 @@
<link rel="apple-touch-icon" sizes="180x180" href="{{ SITEURL }}/theme/images/site-apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="{{ SITEURL }}/theme/images/site-apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ SITEURL }}/theme/images/site-favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="{{ SITEURL }}/theme/images/site-favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ SITEURL }}/theme/images/site-favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="{{ SITEURL }}/theme/images/site-favicon-16x16.png">
{% assets filters="postcss", output="css/style.min.css", "css/tachyons.min.css", "css/styles.css", "css/fonts.css" %} {% assets filters="postcss", output="css/style.min.css", "css/tachyons.min.css", "css/styles.css", "css/fonts.css" %}
<link rel="stylesheet" href="/{{ ASSET_URL }}"> <link rel="stylesheet" href="/{{ ASSET_URL }}">
{% endassets %} {% endassets %}
@ -50,8 +49,6 @@
</div> </div>
{% endif %} {% endif %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
<div class="w-100 colorWine bgColorOrange"> <div class="w-100 colorWine bgColorOrange">
@ -89,7 +86,7 @@
<div class="w-100 bgColorOrange"> <div class="w-100 bgColorOrange">
<div class="mw7 center"> <div class="mw7 center">
<img src="/theme/images/gfx-content-3.svg" alt="pattern" width="768px" height="128px" class="db imageCrop"> <img src="/theme/images/gfx-content-3-animation.svg" alt="pattern" width="768px" height="128px" class="db imageCrop">
</div> </div>
</div> </div>

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

@ -33,7 +33,7 @@
<div class="w-100 bgColorOrange"> <div class="w-100 bgColorOrange">
<div class="mw7 center"> <div class="mw7 center">
<img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192px" class="db imageCrop"> <img src="/theme/images/gfx-content-1-animation.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
</div> </div>
</div> </div>
@ -50,7 +50,7 @@
<div class="w-100 bgColorOrange"> <div class="w-100 bgColorOrange">
<div class="mw7 center"> <div class="mw7 center">
<img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192px" class="db imageCrop"> <img src="/theme/images/gfx-content-2-animation.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
</div> </div>
</div> </div>