I add an SVG file to a website. But when I render the website, It's working just one time and then stops forever. How to show this SVG with an infinite loop?
In addition, it doesn't seem like a gif. I mean the boxes don't start and end at the same location, so it seems broken. Do you know how to fix it either?
Here is how I used SVG inside Header.jsx:
import React from 'react';
import './header.css';
import Animation from "../../assets/animation.svg";
function Header() {
return (
<div className='app__header section__padding' id='home'>
<div className='app__header-image'>
<img src={Animation} alt="Animation" />
</div>
</div>
)
}
export default Headeranimation.svg file:
<svg id="eT2u0JYakvH1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 781 575" shapeRendering="geometricPrecision" textRendering="geometricPrecision">
<style>
<![CDATA[#eT2u0JYakvH45_to {animation: eT2u0JYakvH45_to__to 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH45_to__to { 0% {transform: translate(270.145996px,154.070499px)} 13.333333% {transform: translate(270.145996px,219.070499px)} 63.333333% {transform: translate(270.145996px,219.070499px)} 76.666667% {transform: translate(270.145996px,152.070499px)} 100% {transform: translate(270.145996px,152.070499px)}} #eT2u0JYakvH49_to {animation: eT2u0JYakvH49_to__to 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH49_to__to { 0% {transform: translate(378.928009px,152.350502px)} 26.666667% {transform: translate(378.928009px,152.350502px)} 40% {transform: translate(378.928009px,219.350502px)} 100% {transform: translate(378.928009px,219.350502px)}} #eT2u0JYakvH61_to {animation: eT2u0JYakvH61_to__to 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH61_to__to { 0% {transform: translate(433.318009px,182.931px)} 36.666667% {transform: translate(433.318009px,182.931px)} 50% {transform: translate(433.318009px,247.931px)} 100% {transform: translate(433.318009px,247.931px)}} #eT2u0JYakvH65_to {animation: eT2u0JYakvH65_to__to 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH65_to__to { 0% {transform: translate(378.928009px,281.113998px)} 10% {transform: translate(378.928009px,281.113998px)} 23.333333% {transform: translate(378.928009px,344.113998px)} 53.333333% {transform: translate(378.928009px,344.113998px)} 66.666667% {transform: translate(378.928009px,279.113998px)} 100% {transform: translate(378.928009px,279.113998px)}} #eT2u0JYakvH87 {animation: eT2u0JYakvH87_c_o 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH87_c_o { 0% {opacity: 0.4} 30% {opacity: 0.4} 53.333333% {opacity: 0.2} 100% {opacity: 0.2}} #eT2u0JYakvH88_to {animation: eT2u0JYakvH88_to__to 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH88_to__to { 0% {transform: translate(551.671997px,318.220993px)} 26.666667% {transform: translate(551.671997px,318.220993px)} 33.333333% {transform: translate(551.671997px,310.220993px)} 53.333333% {transform: translate(551.671997px,294.220993px)} 80% {transform: translate(551.671997px,300.220993px)} 100% {transform: translate(551.671997px,295.220993px)}} #eT2u0JYakvH93_to {animation: eT2u0JYakvH93_to__to 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH93_to__to { 0% {transform: translate(102.530353px,108.928604px)} 36.666667% {transform: translate(102.530353px,108.928604px)} 70% {transform: translate(102.530353px,101.928604px)} 100% {transform: translate(102.530353px,107.928604px)}} #eT2u0JYakvH99 {animation: eT2u0JYakvH99_c_o 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH99_c_o { 0% {opacity: 0.4} 36.666667% {opacity: 0.15} 100% {opacity: 0.15}} #eT2u0JYakvH100_to {animation: eT2u0JYakvH100_to__to 3000ms linear 2 normal forwards}@keyframes eT2u0JYakvH100_to__to { 0% {transform: translate(102.931px,354.871506px)} 3.333333% {transform: translate(102.931px,344.871506px)} 36.666667% {transform: translate(102.931px,308.871506px)} 63.333333% {transform: translate(102.931px,319.871506px)} 100% {transform: translate(102.931px,310.871506px)}}]]>
</style>
<g transform="matrix(1.422977 0 0 1.422977-82.481599-33.126624)">
<path d="M324.165,250.161l-42.181-24.18v48.343l42.181,24.179l42.181-24.179v-48.343l-42.181,24.18Z" fill="#42e8e0" />
<path d="M324.165,298.503l-42.181-24.179v-48.343l42.181,24.18v48.342Z" fill="#e8deff" />
<path d="M366.347,274.324l-42.181,24.179v-48.342l42.181-24.18v48.343Z" fill="#996bfe" />
<path d="M324.165,249.662l-42.181-24.42l42.181-24.421l42.181,24.421-42.181,24.42Z" fill="#fbfbfb" />
<g transform="translate(0 65.574497)">
<path d="M378.928,265.203L336.747,241.04v-48.811l42.181,24.069v48.905Z" fill="#e8deff" />
<path d="M421.108,241.04l-42.181,24.163v-48.857l42.181-23.665v48.359Z" fill="#996bfe" />
<path d="M378.928,216.362l-42.181-24.051l42.181-24.05l42.181,24.05-42.181,24.051Z" fill="#fbfbfb" />
</g>
<path d="M432.947,359.925l-41.441-24.18v-49.245l41.441,23.789v49.636Z" fill="#fff" />
<path d="M433.317,310.564L391.506001,286.5L433.317,261.723l41.811,24.429-41.811,24.412Z" fill="#fbfbfb" />
<path d="M475.181,335.342L433,359.521v-49.112l42.181-24.291v49.224Z" fill="#ebebeb" />
<path d="M270.146,331.064l-42.181-24.18v-48.342l42.181,24.179v48.343Z" fill="#e8deff" />
<path d="M312.326,306.884l-42.181,24.18v-48.343l42.181-24.179v48.342Z" fill="#996bfe" />
<path d="M270.146,282.962l-42.181-24.05l42.181-24.051l42.181,24.051-42.181,24.05Z" fill="#fbfbfb" />
<path d="M324.165,314.537l-42.181-24.174v48.348l42.181,24.174l42.181-24.174v-48.348l-42.181,24.174Z" fill="#42e8e0" />
<path d="M324.165,362.885l-42.181-24.174v-48.348l42.181,24.174v48.348Z" fill="#42e8e0" />
<path d="M366.347,338.711l-42.181,24.174v-48.348l42.181-24.174v48.348Z" fill="#2fd3c7" />
<path d="M324.165,314.044l-42.181-24.421l42.181-24.42l42.181,24.42-42.181,24.421Z" fill="#42e8e0" />
<path d="M378.928,393.966l-42.181-24.18v-48.563l42.181,23.903v48.84Z" fill="#fff" />
<path d="M421.108,369.786l-42.181,24.18v-48.856l42.181-24.018v48.694Z" fill="#ebebeb" />
<path d="M378.928,345.125l-42.181-24.042l42.181-24.059l42.181,24.059-42.181,24.042Z" fill="#fbfbfb" />
<path d="M215.382,364.365l-42.181-24.179v-48.949l42.181,24.028v49.1Z" fill="#e8deff" />
<path d="M257.565,339.5l-42.181,24.179v-48.421l42.181-24.1v48.342Z" fill="#996bfe" />
<path d="M215.374,315.264l-42.173-24.043l42.173-24.058l42.189,24.058-42.189,24.043Z" fill="#fbfbfb" />
<path d="M270.146,394.674L227.965,370.5v-48.23l42.181,24.056v48.348Z" fill="#e8deff" />
<path d="M312.326,371.272l-42.181,24.174v-49.096l42.181-23.726v48.648Z" fill="#996bfe" />
<path d="M270.146,346.345l-42.181-24.051l42.181-24.05l42.181,24.05-42.181,24.051Z" fill="#fbfbfb" />
<path d="M324.165,234.122l-42.181-24.174v-48.347l42.181,24.173v48.348Z" fill="#e8deff" />
<path d="M366.347,209.948l-42.181,24.174v-48.348l42.181-24.173v48.347Z" fill="#996bfe" />
<path d="M324.165,186.281l-42.181-24.42l42.181-24.421l42.181,24.421-42.181,24.42Z" fill="#fbfbfb" />
<g transform="translate(0 3)">
<path d="M378.928,265.203L336.747,241.04v-48.811l42.181,24.069v48.905Z" fill="#e8deff" />
<path d="M421.108,241.04l-42.181,24.163v-48.857l42.181-23.665v48.359Z" fill="#996bfe" />
<path d="M378.928,216.362l-42.181-24.051l42.181-24.05l42.181,24.05-42.181,24.051Z" fill="#fbfbfb" />
</g>
<g>
<path d="M324.165,169.741l-42.181-24.174v-48.713l42.181,23.957v48.93Z" fill="#e8deff" />
<path d="M366.347,145.567l-42.181,24.174v-48.83l42.181-24.0619v48.7179Z" fill="#996bfe" />
<path d="M324.165,120.899L281.984,96.8484l42.181-24.0505l42.181,24.0505-42.181,24.0506Z" fill="#d1bcff" />
</g>
<g transform="translate(0 0.000001)">
<path d="M270.146,266.682l-42.181-24.174v-48.347l42.181,24.174v48.347Z" fill="#e8deff" />
<path d="M312.326,242.508l-42.181,24.174v-48.347l42.181-24.174v48.347Z" fill="#996bfe" />
<path d="M270.146,218.582l-42.181-24.059l42.181-24.043l42.181,24.043-42.181,24.059Z" fill="#fbfbfb" />
</g>
<g id="eT2u0JYakvH45_to" transform="translate(270.145996,154.070499)">
<g transform="translate(-270.145996,-154.070499)">
<path d="M270.146,203.041l-42.181-24.409v-49.132l42.181,24.437v49.104Z" fill="#e8deff" />
<path d="M312.326,178.632l-42.181,24.409v-49.107L312.326,129.5v49.132Z" fill="#996bfe" />
<path d="M270.146,153.941L227.965,129.52l42.181-24.42l42.181,24.42-42.181,24.421Z" fill="#d1bcff" />
</g>
</g>
<g id="eT2u0JYakvH49_to" transform="translate(378.928009,152.350502)">
<g transform="translate(-378.928009,-152.350502)">
<path d="M378.928,200.822l-42.181-24.174v-48.348l42.181,24.174v48.348Z" fill="#e8deff" />
<path d="M421.108,176.648l-42.181,24.174v-48.348L421.108,128.3v48.348Z" fill="#996bfe" />
<path d="M378.928,152.72l-42.181-24.429l42.181-24.412l42.181,24.429-42.181,24.412Z" fill="#d1bcff" />
</g>
</g>
<g transform="translate(0 0.000001)">
<path d="M215.382,300.724l-42.181-24.421v-49.463l42.181,23.966v49.918Z" fill="#e8deff" />
<path d="M257.565,276.303l-42.181,24.421v-49.918l42.181-23.967v49.464Z" fill="#996bfe" />
<path d="M215.374,250.882l-42.173-24.05l42.173-24.051l42.189,24.051-42.189,24.05Z" fill="#fbfbfb" />
</g>
<g>
<path d="M475.181,271.348L433,295.522v-48.348L475,223.5l.181,47.848Z" fill="#ebebeb" />
<path d="M433.317,248.182l-41.811-24.421l41.811-24.42l41.811,24.42-41.811,24.421Z" fill="#fbfbfb" />
<path d="M433.441,296.522L392,272.348l-.5-48.848l41.941,24.674v48.348Z" fill="#fff" />
</g>
<g id="eT2u0JYakvH61_to" transform="translate(433.318009,182.931)">
<g transform="translate(-433.318008,-182.931)">
<path d="M432.947,231.902l-41.441-24.41v-49.115l41.441,24.205v49.32Z" fill="#e8deff" />
<path d="M433.317,182.801l-41.811-24.42l41.811-24.421l41.811,24.421-41.811,24.42Z" fill="#d1bcff" />
<path d="M475.13,207.493l-42.181,24.409v-49.273l42.181-24.245v49.109Z" fill="#996bfe" />
</g>
</g>
<g id="eT2u0JYakvH65_to" transform="translate(378.928009,281.113998)">
<g transform="translate(-378.928009,-281.113998)">
<path d="M378.928,329.557l-42.181-24.174v-48.739l42.181,24.09v48.823Z" fill="#fff" />
<path d="M421.108,305.411l-42.181,24.174v-48.839l42.181-24.05v48.715Z" fill="#ebebeb" />
<path d="M378.928,280.744l-42.181-24.051l42.181-24.05l42.181,24.05-42.181,24.051Z" fill="#fbfbfb" />
</g>
</g>
<g transform="translate(0 0.000001)">
<path d="M324.165,427.267l-42.181-24.18v-49.087l42.181,24.4v48.867Z" fill="#fff" />
<path d="M366.347,403.087l-42.181,24.18v-48.885L366.347,354v49.087Z" fill="#ebebeb" />
<path d="M324.165,378.426L281.984,354l42.181-24.416l42.181,24.429-42.181,24.413Z" fill="#fbfbfb" />
</g>
<g>
<path d="M324.165,362.885l-42.181-24.174v-49.211L324.165,314v48.885Z" fill="#fff" />
<path d="M366.347,338.711l-42.181,24.174v-48.885l42.181-24.36v49.071Z" fill="#ebebeb" />
<path d="M324.165,314.043l-42.181-24.42l42.181-24.421l42.181,24.421-42.181,24.42Z" fill="#fbfbfb" />
</g>
<g>
<path d="M324.165,298.503l-42.181-24.179v-49.324l42.181,24.5v49.003Z" fill="#e8deff" />
<path d="M366.347,274.324l-42.181,24.179v-49.003l42.181-24.231v49.055Z" fill="#996bfe" />
<path d="M324.165,249.662l-42.181-24.42l42.181-24.421l42.181,24.421-42.181,24.42Z" fill="#fbfbfb" />
</g>
<g transform="translate(0 0.000001)">
<path d="M213.181,236.942L171,212.516v-49.465L213.181,187v49.942Z" fill="#e8deff" />
<path d="M255.364,211.5l-42.181,24.426v-48.836l42.181-24.039v48.449Z" fill="#996bfe" />
<path d="M213.173,187.101L171,163.051L213.173,139l42.189,24.051-42.189,24.05Z" fill="#d1bcff" />
</g>
<g opacity="0.1">
<path d="M561.174,345.305L528.65,326.537l-1.481.864l34.005,19.617l34.004-19.617-1.464-.848-32.54,18.752Z" opacity="0.1" fill="#fff" />
</g>
<path id="eT2u0JYakvH87" d="M551.361,384.532L517.69,364.56l33.671-19.989l33.671,19.989-33.671,19.972Z" opacity="0.4" fill="#03002d" />
<g id="eT2u0JYakvH88_to" transform="translate(551.671997,318.220993)">
<g transform="translate(-551.671997,-318.220993)">
<path d="M551.301,357.442L518,337.954v-39.343L551.301,318v39.442Z" fill="#e8deff" />
<path d="M551.671,318.221L518,298.619L551.671,279l33.671,19.619-33.671,19.602Z" fill="#d1bcff" />
<path d="M585.344,337.597l-34.041,19.487v-38.974l34.041-19.487v38.974Z" fill="#996bfe" />
</g>
</g>
<path d="M102.521,181.581L79.2192,168.26l23.3018-13.32l23.319,13.32-23.319,13.321Z" opacity="0.4" fill="#03002d" />
<g id="eT2u0JYakvH93_to" transform="translate(102.530353,108.928604)">
<g transform="translate(-102.530353,-108.928604)">
<path d="M102.16,135.699L79.2197,122.626v-27.126l22.9403,13v27.199Z" fill="#e8deff" />
<path d="M102.522,108.799L79.2197,95.4785L102.522,82.1582l23.319,13.3203-23.319,13.3205Z" fill="#d1bcff" />
<path d="M125.841,122.626L102.16,135.699v-27.073L125.841,95.5v27.126Z" fill="#996bfe" />
</g>
</g>
<g opacity="0.1">
<path d="M102.679,426.996L71.3198,408.909l-1.414.815l32.7732,18.918l32.79-18.918-1.414-.815-31.376,18.087Z" opacity="0.1" fill="#fff" />
</g>
<path id="eT2u0JYakvH99" d="M102.522,414.686L69.5996,395.824l32.9224-18.879l32.939,18.879-32.939,18.862Z" opacity="0.4" fill="#03002d" />
<g id="eT2u0JYakvH100_to" transform="translate(102.931,354.871506)">
<g transform="translate(-102.931,-354.871505)">
<path d="M102.561,392.743L70,373.743v-38.243l32.561,18.289v38.954Z" fill="#e8deff" />
<path d="M102.922,354.001L70,335.5L102.922,317l32.94,18.5-32.94,18.501Z" fill="#d1bcff" />
<path d="M135.861,373.743l-33.3,19v-38.948l33.3-18.295v38.243Z" fill="#996bfe" />
</g>
</g>
<g transform="translate(0 0.000001)">
<path d="M216.181,119.202L174,95.0284L174,46l42.181,23.9999v49.2021Z" fill="#e8deff" />
<path d="M258.364,95.0283L216.183,119.202v-49.202l42.181-24v49.0283Z" fill="#996bfe" />
<path d="M216.173,70.1011L174,46.0423L216.173,22l42.189,24.0423-42.189,24.0588Z" fill="#fbfbfb" />
</g>
</g>
</svg>