andras/sdf-2d-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add logos

Browse source
This commit is contained in:
schmelczerandras 2020-09-19 20:09:39 +02:00
parent 496521dc9b
commit 984a22e4be
2 changed files with 97 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

46
static/logo-white.svg Normal file
View file

@ -0,0 +1,46 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="ray-a">
<rect x="18" y="-3" height="6" rx="3">
<animate attributeName="width" values="20;25;20" dur="3s" repeatCount="indefinite" />
</rect>
<circle cy="0" r="3">
<animate attributeName="cx" values="45;40;45" dur="3s" repeatCount="indefinite" />
</circle>
</g>
<g id="ray-b">
<rect x="18" y="-3" height="6" rx="3">
<animate attributeName="width" values="25;20;25" dur="3s" repeatCount="indefinite" />
</rect>
<circle cy="0" r="3">
<animate attributeName="cx" values="40;45;40" dur="3s" repeatCount="indefinite" />
</circle>
</g>
</defs>
<mask fill="white" id="mask">
<g transform-origin="50% 50%">
<circle cx="50" cy="50" r="14" />
<use href="#ray-a" transform="translate(50 50) rotate(0 0 0)" />
<use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
<use href="#ray-a" transform="translate(50 50) rotate(180 0 0)" />
<use href="#ray-a" transform="translate(50 50) rotate(270 0 0)" />
<use href="#ray-b" transform="translate(50 50) rotate(45 0 0)" />
<use href="#ray-b" transform="translate(50 50) rotate(135 0 0)" />
<use href="#ray-b" transform="translate(50 50) rotate(225 0 0) " />
<use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
<animateTransform
attributeName="transform"
type="rotate"
values="0;90"
dur="6s"
repeatCount="indefinite"
/>
</g>
</mask>
<rect width="100%" height="100%" fill="white" mask="url(#mask)">
</rect>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

51
static/logo.svg Normal file
View file

@ -0,0 +1,51 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg">
<stop offset="0%" stop-color="#103783" />
<stop offset="100%" stop-color="#9bafd9" />
</linearGradient>
<g id="ray-a">
<rect x="18" y="-3" height="6" rx="3">
<animate attributeName="width" values="20;25;20" dur="3s" repeatCount="indefinite" />
</rect>
<circle cy="0" r="3">
<animate attributeName="cx" values="45;40;45" dur="3s" repeatCount="indefinite" />
</circle>
</g>
<g id="ray-b">
<rect x="18" y="-3" height="6" rx="3">
<animate attributeName="width" values="25;20;25" dur="3s" repeatCount="indefinite" />
</rect>
<circle cy="0" r="3">
<animate attributeName="cx" values="40;45;40" dur="3s" repeatCount="indefinite" />
</circle>
</g>
</defs>
<mask fill="white" id="mask">
<g transform-origin="50 50">
<circle cx="50" cy="50" r="14" />
<use href="#ray-a" transform="translate(50 50) rotate(0 0 0)" />
<use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
<use href="#ray-a" transform="translate(50 50) rotate(180 0 0)" />
<use href="#ray-a" transform="translate(50 50) rotate(270 0 0)" />
<use href="#ray-b" transform="translate(50 50) rotate(45 0 0)" />
<use href="#ray-b" transform="translate(50 50) rotate(135 0 0)" />
<use href="#ray-b" transform="translate(50 50) rotate(225 0 0) " />
<use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
<animateTransform
attributeName="transform"
type="rotate"
values="0;90"
dur="6s"
repeatCount="indefinite"
/>
</g>
</mask>
<rect width="100%" height="100%" fill="url(#bg)" mask="url(#mask)">
</rect>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB