I'm just starting to play around with SVGs and animating them. I created a vector design in Adobe Illustrator, exported as an SVG, and then animated it. The inspiration was based off Chris Gannon's SVG Diamond. Difference is I am attempting to create it just using html and inline styles.
I am calling the SVG as a background-image dependent upon some elements that are displayed on the page. The SVG runs kind of choppy any time you scroll or if you interact with other elements on the page. My best guess is that my SVG is put together inefficiently as this is my first attempt.
Please critique and suggest ways that I might improve it for better efficiency.
Or is the answer to render the SVG via JS and control the animation in the script?
Link https://codepen.io/nmballa/pen/LYdQVEm.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 625 625">
<g id="container">
<rect width="00" height="625" style="fill: none"/>
</g>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g transform="translate(0,12.5)">
<g transform="rotate(180 300 300)">
<g id="lowerBackFacet1" filter="url(#glow)"><line x1="300" y1="0" x2="200" y2="425" style="fill:none;stroke:#b3d8fc;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="-25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerBackFacet2" filter="url(#glow)">
<line x1="300" y1="0" x2="400" y2="425" style="fill:none;stroke:#b3d8fc;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="-25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerBackFacet3" filter="url(#glow)">
<line x1="300" y1="0" x2="600" y2="425" style="fill:none;stroke:#b3d8fc;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="-25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerFrontFacet1" filter="url(#glow)">
<line x1="300" y1="0" x2="0" y2="425" style="fill:none;stroke:#54a9ff;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerFrontFacet2" filter="url(#glow)">
<line x1="300" y1="0" x2="200" y2="425" style="fill:none;stroke:#54a9ff;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="25.5"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 300 300)">
<g id="lowerFrontFacet3" filter="url(#glow)">
<line x1="300" y1="0" x2="400" y2="425" style="fill:none;stroke:#54a9ff;stroke-width:8"/>
<animateTransform attributeName="transform"
attributeType="XML"
begin="0s"
dur="2s"
calcMode="paced"
type="skewX"
from="0"
to="25"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 0 0 300 300)">
<g id="upperBackFacet1" filter="url(#glow)">
<line x1="350" y1="0" x2="400" y2="175" style="stroke:#b3d8fc;stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 0 0 300 300)" >
<g id="upperBackFacet2" filter="url(#glow)">
<line x1="250" y1="0" x2="198" y2="175" style="stroke:#b3d8fc; stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
<g transform="rotate(180 0 0 300 300)">
<g id="upperBackFacet3" filter="url(#glow)">
<line x1="150" y1="0" x2="0" y2="175" style="stroke:#b3d8fc; stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
<g id="upperFrontFacet1" filter="url(#glow)">
<line x1="250" y1="0" x2="200" y2="175" style="stroke:#54a9ff; filter=url(#glow); stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 -100 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
<g id="upperFrontFacet2" filter="url(#glow)">
<line x1="350" y1="0" x2="400" y2="175" style="stroke:#54a9ff;stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 -100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
<g id="upperFrontFacet3" filter="url(#glow)">
<line x1="452" y1="0" x2="602" y2="175" style="stroke:#54a9ff;stroke-width:8"/>
<animateMotion dur="2s" repeatCount="indefinite" path="M1, 0 -100, 0 0" />
<animateTransform attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-30"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
<g id="Center">
<line x1="5" y1="175" x2="595" y2="175" style="stroke: #54a9ff; stroke-width: 10px;"/>
</g>
<g transform="translate(300,300)" filter="url(#glow)">
<g id="Outside">
<line x1="300" y1="600" x2="600" y2="173" style="fill: none;"/>
<polygon points="300 0 450 0 450 0 600 175 300 600 0 175 150 0 300 0" transform="translate( -300 -300)" style="fill: none; stroke: #54a9ff; stroke-miterlimit: 10; stroke-width:8; "/>
<animateTransform attributeName="transform"
type="scaleX"
from="1 1"
to=".98 1"
begin="2s"
dur="2s"
calcMode="paced"
repeatCount="indefinite"/>
</g>
</g>
</g>
</svg>CodePudding user response：
Filters are a major factor for animation performance. In the following variant, I have replaced it with a much simpler setup: two lines on top of each other, the lower with stroke-width:16;opacity:0.3, and the upper with stroke-width:8;opacity:1. For me, the animation is much smoother.
I've also choosen a spline animation to give a better illusion of "rotating". This has almost no impact on performance. The rest of the changes are only cosmetic in nature to make the code more readable.
.front {
fill: none;
stroke: #54a9ff;
stroke-width: 8;
}
.back {
fill: none;
stroke: #b3d8fc;
stroke-width: 8;
}
.upper {
transform: translate(12.5px, -162.5px);
}
.lower {
transform: translate(12.5px, 612.5px);
}
.blur {
stroke-width: 16;
opacity: 0.3;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 625 625">
<g >
<g>
<line x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="40.126"
to="-40.126"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="40.126"
to="-40.126"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="40.126"
to="-40.126"
repeatCount="indefinite"/>
</g>
</g>
<g >
<g>
<line x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="-40.126"
to="40.126"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="-40.126"
to="40.126"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="175" x2="300" y2="350"/>
<line x1="300" y1="175" x2="300" y2="350"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".43 0 .57 1"
type="skewX"
from="-40.126"
to="40.126"
repeatCount="indefinite"/>
</g>
</g>
<g >
<g>
<line x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="-34.765"
to="34.765"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="-34.765"
to="34.765"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="-34.765"
to="34.765"
repeatCount="indefinite"/>
</g>
</g>
<g >
<g>
<line x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="0s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="34.765"
to="-34.765"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-2s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="34.765"
to="-34.765"
repeatCount="indefinite"/>
</g>
<g>
<line x1="300" y1="-425" x2="300" y2="0"/>
<line x1="300" y1="-425" x2="300" y2="0"/>
<animateTransform attributeName="transform"
begin="-4s"
dur="6s"
calcMode="spline"
keySplines=".4 0 .6 1"
type="skewX"
from="34.765"
to="-34.765"
repeatCount="indefinite"/>
</g>
</g>
<path transform="translate(312.5,12.5)" d="M 147.5,0 295,175 0,600 -295,175 -147.5,0z M 295,175 -295,175" />
<path transform="translate(312.5,12.5)" d="M 147.5,0 295,175 0,600 -295,175 -147.5,0z M 295,175 -295,175" />
</svg>