Skip to content

Commit

Permalink
fix: Wrap SVG Mandala to reduce CPU usage (#8622)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Synvox
Synvox committed May 9, 2023
1 parent 6796db2 commit 35c9ae9
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 174 deletions.
2 changes: 1 addition & 1 deletion client/src/ui/molecules/mandala/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
display: flex;
justify-content: center;

.mandala-rotate > svg {
.mandala-rotate > .mandala-svg-container {
animation: rotation 500s linear infinite;
}

Expand Down
354 changes: 181 additions & 173 deletions client/src/ui/molecules/mandala/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,180 +23,188 @@ function Mandala({
rotate && !animate ? "mandala-rotate" : ""
}`}
>
<svg
width="675"
height="675"
viewBox="0 0 675 675"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="mandala"
>
<title>Mandala</title>
<defs>
<path
d="M337.5,337.5 m-320,0 a320,320 0 1,1 640,0 a320,320 0 1,1 -640,0"
id="circle1"
>
{/*<!--<animateMotion dur="20s" repeatCount="indefinite" rotate="auto"
<div className="mandala-svg-container">
<svg
width="675"
height="675"
viewBox="0 0 675 675"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="mandala"
>
<title>Mandala</title>
<defs>
<path
d="M337.5,337.5 m-320,0 a320,320 0 1,1 640,0 a320,320 0 1,1 -640,0"
id="circle1"
>
{/*<!--<animateMotion dur="20s" repeatCount="indefinite" rotate="auto"
path="M1,1 a1,1 0 1,0 2,0 a1,1 0 1,0 -2,0" />-->*/}
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="0 337.5 337.5"
to="360 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-280,0 a280,280 0 1,1 560,0 a280,280 0 1,1 -560,0"
id="circle2"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="360 337.5 337.5"
to="0 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-240,0 a240,240 0 1,1 480,0 a240,240 0 1,1 -480,0"
id="circle3"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="0 337.5 337.5"
to="360 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-200,0 a200,200 0 1,1 400,0 a200,200 0 1,1 -400,0"
id="circle4"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="360 337.5 337.5"
to="0 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-160,0 a160,160 0 1,1 320,0 a160,160 0 1,1 -320,0"
id="circle5"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="0 337.5 337.5"
to="360 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
</defs>
<text className="mandala-accent-1" dy="70" textLength="2010">
<textPath textLength="2010" href="#circle1">
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
</textPath>
</text>
<text className="mandala-accent-2" dy="70" textLength="1760">
<textPath textLength="1760" href="#circle2">
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
</textPath>
</text>
<text className="mandala-accent-3" dy="70" textLength="1507">
<textPath textLength="1507" href="#circle3">
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>&#125;&nbsp;&nbsp;
</textPath>
</text>
<text className="mandala-accent-4" dy="70" textLength="1257">
<textPath textLength="1257" href="#circle4">
&nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
&nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
&nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
&nbsp;&nbsp;&nbsp;../../
</textPath>
</text>
<text className="mandala-accent-5" dy="70" textLength="1005">
<textPath textLength="1005" href="#circle5">
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
</textPath>
</text>
</svg>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="0 337.5 337.5"
to="360 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-280,0 a280,280 0 1,1 560,0 a280,280 0 1,1 -560,0"
id="circle2"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="360 337.5 337.5"
to="0 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-240,0 a240,240 0 1,1 480,0 a240,240 0 1,1 -480,0"
id="circle3"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="0 337.5 337.5"
to="360 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-200,0 a200,200 0 1,1 400,0 a200,200 0 1,1 -400,0"
id="circle4"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="360 337.5 337.5"
to="0 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
<path
d="M337.5,337.5 m-160,0 a160,160 0 1,1 320,0 a160,160 0 1,1 -320,0"
id="circle5"
>
{animate && (
<animateTransform
attributeName="transform"
begin="0s"
dur="500s"
type="rotate"
from="0 337.5 337.5"
to="360 337.5 337.5"
repeatCount="indefinite"
/>
)}
</path>
</defs>
<text className="mandala-accent-1" dy="70" textLength="2010">
<textPath textLength="2010" href="#circle1">
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/
<tspan>/</tspan>
</textPath>
</text>
<text className="mandala-accent-2" dy="70" textLength="1760">
<textPath textLength="1760" href="#circle2">
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
</textPath>
</text>
<text className="mandala-accent-3" dy="70" textLength="1507">
<textPath textLength="1507" href="#circle3">
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>
&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>
&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>
&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>
&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>
&#125;&nbsp;&nbsp;
<tspan>&#123;</tspan>&#123;<tspan>&#123;</tspan>&#123;&nbsp;
<tspan>&#125;</tspan>&#125;<tspan>&#125;</tspan>
&#125;&nbsp;&nbsp;
</textPath>
</text>
<text className="mandala-accent-4" dy="70" textLength="1257">
<textPath textLength="1257" href="#circle4">
&nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
&nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
&nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
&nbsp;&nbsp;&nbsp;../../
</textPath>
</text>
<text className="mandala-accent-5" dy="70" textLength="1005">
<textPath textLength="1005" href="#circle5">
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
<tspan>&lt;&gt;</tspan>&lt;/&gt;
</textPath>
</text>
</svg>
</div>
</div>
</div>
);
Expand Down

0 comments on commit 35c9ae9

Please sign in to comment.