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

Fix rotation on safari

Browse source
This commit is contained in:
schmelczerandras 2020-09-21 14:57:52 +02:00
parent d7d6e096bb
commit 64d306e682
2 changed files with 21 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

9
static/logo-colored.svg
View file

@ -24,7 +24,7 @@
</defs> </defs>
<mask fill="white" id="mask"> <mask fill="white" id="mask">
<g transform-origin="50 50"> <g>
<circle cx="50" cy="50" r="14" /> <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(0 0 0)" />
<use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" /> <use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
@ -37,15 +37,12 @@
<animateTransform <animateTransform
attributeName="transform" attributeName="transform"
type="rotate" type="rotate"
values="0;90" values="0 50 50;90 50 50"
dur="6s" dur="6s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</g> </g>
</mask> </mask>
<rect width="100%" height="100%" fill="url(#bg)" mask="url(#mask)"> <rect width="100%" height="100%" fill="url(#bg)" mask="url(#mask)" />
</rect>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

37
static/logo-white.svg
View file

@ -19,25 +19,24 @@
</defs> </defs>
<mask fill="white" id="mask"> <mask fill="white" id="mask">
<g transform-origin="50% 50%"> <circle cx="50" cy="50" r="14" />
<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(0 0 0)" /> <use href="#ray-a" transform="translate(50 50) rotate(90 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(180 0 0)" /> <use href="#ray-a" transform="translate(50 50) rotate(270 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(45 0 0)" /> <use href="#ray-b" transform="translate(50 50) rotate(135 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(225 0 0) " /> <use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
<use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
<animateTransform
attributeName="transform"
type="rotate"
values="0;90"
dur="10s"
repeatCount="indefinite"
/>
</g>
</mask> </mask>
<rect width="100%" height="100%" fill="white" mask="url(#mask)"/> <rect width="100" height="100" fill="white" mask="url(#mask)">
<animateTransform
attributeName="transform"
type="rotate"
values="0 50 50;90 50 50"
dur="10s"
repeatCount="indefinite"
/>
</rect>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After