animate inside svg
This commit is contained in:
parent
a4ef140e75
commit
4e6344a848
@ -2,34 +2,136 @@
|
||||
<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="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="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="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="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"/>
|
||||
<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 id="my-circle" cx="32" cy="96" r="32" fill="#4B1202">
|
||||
<circle cx="32" cy="96" r="32" fill="#4B1202">
|
||||
<animate attributeName="opacity"
|
||||
dur="10s"
|
||||
dur="22s"
|
||||
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"/>
|
||||
<animate attributeName="r"
|
||||
dur="10s"
|
||||
dur="22s"
|
||||
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"/>
|
||||
</circle>
|
||||
|
||||
@ -40,16 +142,53 @@
|
||||
<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="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="160" 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="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="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="160" cy="96" r="32" fill="#4B1202"/>
|
||||
@ -59,8 +198,4 @@
|
||||
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
|
||||
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 6.7 KiB |
Loading…
Reference in New Issue
Block a user