<div class="marquee">
  <ul class="marquee__content">
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M21.0018 3.11679C21.0018 2.23783 20.0177 2.23782 19.5803 2.34769C20.1926 1.86426 20.9107 1.98147 21.1658 2.12796L27.0791 5.02747C27.6426 5.30375 28 5.8786 28 6.50857V25.5831C28 26.2215 27.6331 26.8025 27.0582 27.0743L21.4938 29.7054C21.1111 29.8701 20.2801 30.2767 19.5803 29.7053C20.455 29.8702 20.9289 29.2476 21.0018 28.8264V3.11679Z" fill="url(#paint0_linear_1_13646)" />
        <path d="M19.6512 2.3318C20.1154 2.24006 21.0018 2.2826 21.0018 3.11675V9.68243L3.07359 23.2452C2.76022 23.4823 2.3192 23.4429 2.05229 23.1541L0.204532 21.1547C-0.0849358 20.8415 -0.0646824 20.3512 0.249624 20.0632L19.5802 2.34764L19.6512 2.3318Z" fill="url(#paint1_linear_1_13646)" />
        <path d="M21.0018 22.3706L3.07359 8.8078C2.76022 8.57073 2.3192 8.61006 2.05229 8.89888L0.204532 10.8983C-0.0849358 11.2115 -0.0646824 11.7018 0.249624 11.9898L19.5802 29.7054C20.455 29.8702 20.9289 29.2476 21.0018 28.8264V22.3706Z" fill="url(#paint2_linear_1_13646)" />
        <defs>
          <linearGradient id="paint0_linear_1_13646" x1="23.7901" y1="2" x2="23.7901" y2="30" gradientUnits="userSpaceOnUse">
            <stop stop-color="#32B5F1" />
            <stop offset="1" stop-color="#2B9FED" />
          </linearGradient>
          <linearGradient id="paint1_linear_1_13646" x1="21.0018" y1="5.53387" x2="1.0217" y2="22.305" gradientUnits="userSpaceOnUse">
            <stop stop-color="#0F6FB3" />
            <stop offset="0.270551" stop-color="#1279B7" />
            <stop offset="0.421376" stop-color="#1176B5" />
            <stop offset="0.618197" stop-color="#0E69AC" />
            <stop offset="0.855344" stop-color="#0F70AF" />
            <stop offset="1" stop-color="#0F6DAD" />
          </linearGradient>
          <linearGradient id="paint2_linear_1_13646" x1="1.15522" y1="9.98367" x2="21.0791" y2="26.4806" gradientUnits="userSpaceOnUse">
            <stop stop-color="#1791D2" />
            <stop offset="1" stop-color="#1173C5" />
          </linearGradient>
        </defs>
      </svg>

    </li>
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_1_13561)">
          <path d="M16 32.076L30 24.065V8.05701L16 16.067V32.076Z" fill="#000001" />
          <path d="M19 24.5556V27L25 23.4444V21L19 24.5556Z" fill="white" />
          <path d="M16 0.076004L2 8.057V24.065L16 32.076V16.067L30 8.057L16 0.076004Z" fill="url(#paint0_linear_1_13561)" />
        </g>
        <defs>
          <linearGradient id="paint0_linear_1_13561" x1="2.18" y1="23.255" x2="30.041" y2="8.782" gradientUnits="userSpaceOnUse">
            <stop offset="0.043" stop-color="#FF8618" />
            <stop offset="0.382" stop-color="#FF246E" />
            <stop offset="0.989" stop-color="#AF1DF5" />
          </linearGradient>
          <clipPath id="clip0_1_13561">
            <rect width="32" height="32" fill="white" />
          </clipPath>
        </defs>
      </svg>
    </li>
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.716 29.2178L2.27664 24.9331C1.44913 23.9023 1 22.6346 1 21.3299V5.81499C1 3.86064 2.56359 2.23897 4.58071 2.10125L20.5321 1.01218C21.691 0.933062 22.8428 1.24109 23.7948 1.8847L29.3992 5.67391C30.4025 6.35219 31 7.46099 31 8.64426V26.2832C31 28.1958 29.4626 29.7793 27.4876 29.9009L9.78333 30.9907C8.20733 31.0877 6.68399 30.4237 5.716 29.2178Z" fill="white" />
        <path d="M11.2481 13.5787V13.3756C11.2481 12.8607 11.6605 12.4337 12.192 12.3982L16.0634 12.1397L21.4171 20.0235V13.1041L20.0391 12.9204V12.824C20.0391 12.303 20.4609 11.8732 20.9991 11.8456L24.5216 11.6652V12.1721C24.5216 12.41 24.3447 12.6136 24.1022 12.6546L23.2545 12.798V24.0037L22.1906 24.3695C21.3019 24.6752 20.3124 24.348 19.8037 23.5803L14.6061 15.7372V23.223L16.2059 23.5291L16.1836 23.6775C16.1138 24.1423 15.7125 24.4939 15.227 24.5155L11.2481 24.6926C11.1956 24.1927 11.5702 23.7456 12.087 23.6913L12.6103 23.6363V13.6552L11.2481 13.5787Z" fill="black" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M20.6749 2.96678L4.72353 4.05585C3.76805 4.12109 3.0274 4.88925 3.0274 5.81499V21.3299C3.0274 22.1997 3.32682 23.0448 3.8785 23.7321L7.31786 28.0167C7.87394 28.7094 8.74905 29.0909 9.65441 29.0352L27.3587 27.9454C28.2661 27.8895 28.9725 27.1619 28.9725 26.2832V8.64426C28.9725 8.10059 28.6979 7.59115 28.237 7.27951L22.6325 3.49029C22.0614 3.10413 21.3703 2.91931 20.6749 2.96678ZM5.51453 6.057C5.29267 5.89274 5.39826 5.55055 5.67696 5.53056L20.7822 4.44711C21.2635 4.41259 21.7418 4.54512 22.131 4.82088L25.1617 6.96813C25.2768 7.04965 25.2228 7.22563 25.0804 7.23338L9.08393 8.10336C8.59983 8.12969 8.12199 7.98747 7.73707 7.7025L5.51453 6.057ZM8.33363 10.8307C8.33363 10.311 8.75347 9.88177 9.29033 9.85253L26.2031 8.93145C26.7263 8.90296 27.1668 9.30534 27.1668 9.81182V25.0853C27.1668 25.604 26.7484 26.0328 26.2126 26.0633L9.40694 27.0195C8.82466 27.0527 8.33363 26.6052 8.33363 26.0415V10.8307Z" fill="black" />
      </svg>

    </li>
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 4L16 28L30 4H24.5L16 18.5L7.5 4H2Z" fill="#41B883" />
        <path d="M7.5 4L16 18.5L24.5 4H19.5L16.0653 10.0126L12.5 4H7.5Z" fill="#35495E" />
      </svg>

    </li>
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M18.1177 14.0445C17.7408 14.1499 17.3586 14.2568 16.9162 14.3771C16.7001 14.4383 16.6509 14.4521 16.4498 14.2077C16.2086 13.9197 16.0317 13.7333 15.6939 13.5639C14.6807 13.0387 13.6996 13.1912 12.7829 13.818C11.6893 14.5635 11.1264 15.6647 11.1425 17.037C11.1585 18.3923 12.0431 19.5105 13.3137 19.6969C14.4073 19.8494 15.324 19.4427 16.0477 18.5787C16.1924 18.3924 16.3212 18.1889 16.482 17.9519H13.378C13.0402 17.9519 12.9598 17.7316 13.0724 17.4436C13.2815 16.9184 13.6675 16.0374 13.8926 15.5969C13.9409 15.4953 14.0535 15.3258 14.2947 15.3258H19.4702C19.7027 14.5498 20.0799 13.8166 20.5831 13.1228C21.7572 11.4964 23.1725 10.6493 25.0863 10.2935C26.7268 9.98855 28.2707 10.158 29.6699 11.1575C30.9405 12.0724 31.7285 13.3092 31.9376 14.9356C32.211 17.2228 31.5838 19.0864 30.0881 20.6789C29.0266 21.8141 27.7239 22.5256 26.2282 22.8475C25.9429 22.9032 25.6576 22.9296 25.3768 22.9556C25.2303 22.9691 25.085 22.9826 24.9416 23C23.478 22.9661 22.1432 22.5256 21.0173 21.5091C20.2256 20.7882 19.6803 19.9022 19.4092 18.8707C19.2211 19.2709 18.9962 19.6542 18.7336 20.0188C17.5756 21.6283 16.0638 22.6278 14.15 22.8989C12.5738 23.1192 11.1103 22.7973 9.82366 21.7807C8.63353 20.832 7.95805 19.5783 7.78114 18.0196C7.57206 16.1729 8.08671 14.5126 9.14818 13.0556C10.2901 11.48 11.8019 10.4804 13.6514 10.1247C15.1632 9.83664 16.6106 10.023 17.9134 10.9548C18.7657 11.5478 19.3769 12.361 19.779 13.3436C19.8755 13.4961 19.8111 13.5808 19.6181 13.6316C19.0545 13.7824 18.5903 13.9123 18.1177 14.0445ZM28.7581 15.9742C28.7613 16.0311 28.7646 16.0911 28.7693 16.1554C28.6889 17.6124 27.9973 18.6967 26.7268 19.3914C25.8744 19.8488 24.9898 19.8996 24.1053 19.493C22.9473 18.9509 22.3361 17.6124 22.6256 16.291C22.9795 14.6984 23.9444 13.6988 25.4401 13.3431C26.968 12.9703 28.4316 13.9191 28.7211 15.5963C28.7438 15.7163 28.7505 15.8362 28.7581 15.9742Z" fill="#00ACD7" />
        <path d="M2.44461 13.852C2.41244 13.9028 2.42852 13.9367 2.49285 13.9367L7.2826 13.9536C7.33085 13.9536 7.41126 13.9028 7.44343 13.852L7.71684 13.4115C7.749 13.3606 7.73292 13.3098 7.66859 13.3098H2.95926C2.89493 13.3098 2.81451 13.3437 2.78235 13.3945L2.44461 13.852Z" fill="#00ACD7" />
        <path d="M0.0160829 15.4105C-0.0160829 15.4614 7.45058e-09 15.4953 0.0643316 15.4953L6.63928 15.4783C6.70361 15.4783 6.76794 15.4444 6.78402 15.3767L6.91269 14.9701C6.92877 14.9192 6.8966 14.8684 6.83227 14.8684H0.530735C0.466404 14.8684 0.385989 14.9023 0.353823 14.9531L0.0160829 15.4105Z" fill="#00ACD7" />
        <path d="M3.90813 16.9523C3.87596 17.0032 3.89204 17.054 3.95638 17.054L6.43019 17.0709C6.47843 17.0709 6.54277 17.0201 6.54277 16.9523L6.57493 16.5457C6.57493 16.478 6.54277 16.4271 6.47843 16.4271H4.29412C4.22978 16.4271 4.16545 16.478 4.13329 16.5288L3.90813 16.9523Z" fill="#00ACD7" />
      </svg>

    </li>
  </ul>
  <ul class="marquee__content" aria-hidden="true">
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M21.0018 3.11679C21.0018 2.23783 20.0177 2.23782 19.5803 2.34769C20.1926 1.86426 20.9107 1.98147 21.1658 2.12796L27.0791 5.02747C27.6426 5.30375 28 5.8786 28 6.50857V25.5831C28 26.2215 27.6331 26.8025 27.0582 27.0743L21.4938 29.7054C21.1111 29.8701 20.2801 30.2767 19.5803 29.7053C20.455 29.8702 20.9289 29.2476 21.0018 28.8264V3.11679Z" fill="url(#paint0_linear_1_13646)" />
        <path d="M19.6512 2.3318C20.1154 2.24006 21.0018 2.2826 21.0018 3.11675V9.68243L3.07359 23.2452C2.76022 23.4823 2.3192 23.4429 2.05229 23.1541L0.204532 21.1547C-0.0849358 20.8415 -0.0646824 20.3512 0.249624 20.0632L19.5802 2.34764L19.6512 2.3318Z" fill="url(#paint1_linear_1_13646)" />
        <path d="M21.0018 22.3706L3.07359 8.8078C2.76022 8.57073 2.3192 8.61006 2.05229 8.89888L0.204532 10.8983C-0.0849358 11.2115 -0.0646824 11.7018 0.249624 11.9898L19.5802 29.7054C20.455 29.8702 20.9289 29.2476 21.0018 28.8264V22.3706Z" fill="url(#paint2_linear_1_13646)" />
        <defs>
          <linearGradient id="paint0_linear_1_13646" x1="23.7901" y1="2" x2="23.7901" y2="30" gradientUnits="userSpaceOnUse">
            <stop stop-color="#32B5F1" />
            <stop offset="1" stop-color="#2B9FED" />
          </linearGradient>
          <linearGradient id="paint1_linear_1_13646" x1="21.0018" y1="5.53387" x2="1.0217" y2="22.305" gradientUnits="userSpaceOnUse">
            <stop stop-color="#0F6FB3" />
            <stop offset="0.270551" stop-color="#1279B7" />
            <stop offset="0.421376" stop-color="#1176B5" />
            <stop offset="0.618197" stop-color="#0E69AC" />
            <stop offset="0.855344" stop-color="#0F70AF" />
            <stop offset="1" stop-color="#0F6DAD" />
          </linearGradient>
          <linearGradient id="paint2_linear_1_13646" x1="1.15522" y1="9.98367" x2="21.0791" y2="26.4806" gradientUnits="userSpaceOnUse">
            <stop stop-color="#1791D2" />
            <stop offset="1" stop-color="#1173C5" />
          </linearGradient>
        </defs>
      </svg>

    </li>
    <li><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_1_13561)">
          <path d="M16 32.076L30 24.065V8.05701L16 16.067V32.076Z" fill="#000001" />
          <path d="M19 24.5556V27L25 23.4444V21L19 24.5556Z" fill="white" />
          <path d="M16 0.076004L2 8.057V24.065L16 32.076V16.067L30 8.057L16 0.076004Z" fill="url(#paint0_linear_1_13561)" />
        </g>
        <defs>
          <linearGradient id="paint0_linear_1_13561" x1="2.18" y1="23.255" x2="30.041" y2="8.782" gradientUnits="userSpaceOnUse">
            <stop offset="0.043" stop-color="#FF8618" />
            <stop offset="0.382" stop-color="#FF246E" />
            <stop offset="0.989" stop-color="#AF1DF5" />
          </linearGradient>
          <clipPath id="clip0_1_13561">
            <rect width="32" height="32" fill="white" />
          </clipPath>
        </defs>
      </svg></li>
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.716 29.2178L2.27664 24.9331C1.44913 23.9023 1 22.6346 1 21.3299V5.81499C1 3.86064 2.56359 2.23897 4.58071 2.10125L20.5321 1.01218C21.691 0.933062 22.8428 1.24109 23.7948 1.8847L29.3992 5.67391C30.4025 6.35219 31 7.46099 31 8.64426V26.2832C31 28.1958 29.4626 29.7793 27.4876 29.9009L9.78333 30.9907C8.20733 31.0877 6.68399 30.4237 5.716 29.2178Z" fill="white" />
        <path d="M11.2481 13.5787V13.3756C11.2481 12.8607 11.6605 12.4337 12.192 12.3982L16.0634 12.1397L21.4171 20.0235V13.1041L20.0391 12.9204V12.824C20.0391 12.303 20.4609 11.8732 20.9991 11.8456L24.5216 11.6652V12.1721C24.5216 12.41 24.3447 12.6136 24.1022 12.6546L23.2545 12.798V24.0037L22.1906 24.3695C21.3019 24.6752 20.3124 24.348 19.8037 23.5803L14.6061 15.7372V23.223L16.2059 23.5291L16.1836 23.6775C16.1138 24.1423 15.7125 24.4939 15.227 24.5155L11.2481 24.6926C11.1956 24.1927 11.5702 23.7456 12.087 23.6913L12.6103 23.6363V13.6552L11.2481 13.5787Z" fill="black" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M20.6749 2.96678L4.72353 4.05585C3.76805 4.12109 3.0274 4.88925 3.0274 5.81499V21.3299C3.0274 22.1997 3.32682 23.0448 3.8785 23.7321L7.31786 28.0167C7.87394 28.7094 8.74905 29.0909 9.65441 29.0352L27.3587 27.9454C28.2661 27.8895 28.9725 27.1619 28.9725 26.2832V8.64426C28.9725 8.10059 28.6979 7.59115 28.237 7.27951L22.6325 3.49029C22.0614 3.10413 21.3703 2.91931 20.6749 2.96678ZM5.51453 6.057C5.29267 5.89274 5.39826 5.55055 5.67696 5.53056L20.7822 4.44711C21.2635 4.41259 21.7418 4.54512 22.131 4.82088L25.1617 6.96813C25.2768 7.04965 25.2228 7.22563 25.0804 7.23338L9.08393 8.10336C8.59983 8.12969 8.12199 7.98747 7.73707 7.7025L5.51453 6.057ZM8.33363 10.8307C8.33363 10.311 8.75347 9.88177 9.29033 9.85253L26.2031 8.93145C26.7263 8.90296 27.1668 9.30534 27.1668 9.81182V25.0853C27.1668 25.604 26.7484 26.0328 26.2126 26.0633L9.40694 27.0195C8.82466 27.0527 8.33363 26.6052 8.33363 26.0415V10.8307Z" fill="black" />
      </svg>

    </li>
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 4L16 28L30 4H24.5L16 18.5L7.5 4H2Z" fill="#41B883" />
        <path d="M7.5 4L16 18.5L24.5 4H19.5L16.0653 10.0126L12.5 4H7.5Z" fill="#35495E" />
      </svg>

    </li>
    <li>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M18.1177 14.0445C17.7408 14.1499 17.3586 14.2568 16.9162 14.3771C16.7001 14.4383 16.6509 14.4521 16.4498 14.2077C16.2086 13.9197 16.0317 13.7333 15.6939 13.5639C14.6807 13.0387 13.6996 13.1912 12.7829 13.818C11.6893 14.5635 11.1264 15.6647 11.1425 17.037C11.1585 18.3923 12.0431 19.5105 13.3137 19.6969C14.4073 19.8494 15.324 19.4427 16.0477 18.5787C16.1924 18.3924 16.3212 18.1889 16.482 17.9519H13.378C13.0402 17.9519 12.9598 17.7316 13.0724 17.4436C13.2815 16.9184 13.6675 16.0374 13.8926 15.5969C13.9409 15.4953 14.0535 15.3258 14.2947 15.3258H19.4702C19.7027 14.5498 20.0799 13.8166 20.5831 13.1228C21.7572 11.4964 23.1725 10.6493 25.0863 10.2935C26.7268 9.98855 28.2707 10.158 29.6699 11.1575C30.9405 12.0724 31.7285 13.3092 31.9376 14.9356C32.211 17.2228 31.5838 19.0864 30.0881 20.6789C29.0266 21.8141 27.7239 22.5256 26.2282 22.8475C25.9429 22.9032 25.6576 22.9296 25.3768 22.9556C25.2303 22.9691 25.085 22.9826 24.9416 23C23.478 22.9661 22.1432 22.5256 21.0173 21.5091C20.2256 20.7882 19.6803 19.9022 19.4092 18.8707C19.2211 19.2709 18.9962 19.6542 18.7336 20.0188C17.5756 21.6283 16.0638 22.6278 14.15 22.8989C12.5738 23.1192 11.1103 22.7973 9.82366 21.7807C8.63353 20.832 7.95805 19.5783 7.78114 18.0196C7.57206 16.1729 8.08671 14.5126 9.14818 13.0556C10.2901 11.48 11.8019 10.4804 13.6514 10.1247C15.1632 9.83664 16.6106 10.023 17.9134 10.9548C18.7657 11.5478 19.3769 12.361 19.779 13.3436C19.8755 13.4961 19.8111 13.5808 19.6181 13.6316C19.0545 13.7824 18.5903 13.9123 18.1177 14.0445ZM28.7581 15.9742C28.7613 16.0311 28.7646 16.0911 28.7693 16.1554C28.6889 17.6124 27.9973 18.6967 26.7268 19.3914C25.8744 19.8488 24.9898 19.8996 24.1053 19.493C22.9473 18.9509 22.3361 17.6124 22.6256 16.291C22.9795 14.6984 23.9444 13.6988 25.4401 13.3431C26.968 12.9703 28.4316 13.9191 28.7211 15.5963C28.7438 15.7163 28.7505 15.8362 28.7581 15.9742Z" fill="#00ACD7" />
        <path d="M2.44461 13.852C2.41244 13.9028 2.42852 13.9367 2.49285 13.9367L7.2826 13.9536C7.33085 13.9536 7.41126 13.9028 7.44343 13.852L7.71684 13.4115C7.749 13.3606 7.73292 13.3098 7.66859 13.3098H2.95926C2.89493 13.3098 2.81451 13.3437 2.78235 13.3945L2.44461 13.852Z" fill="#00ACD7" />
        <path d="M0.0160829 15.4105C-0.0160829 15.4614 7.45058e-09 15.4953 0.0643316 15.4953L6.63928 15.4783C6.70361 15.4783 6.76794 15.4444 6.78402 15.3767L6.91269 14.9701C6.92877 14.9192 6.8966 14.8684 6.83227 14.8684H0.530735C0.466404 14.8684 0.385989 14.9023 0.353823 14.9531L0.0160829 15.4105Z" fill="#00ACD7" />
        <path d="M3.90813 16.9523C3.87596 17.0032 3.89204 17.054 3.95638 17.054L6.43019 17.0709C6.47843 17.0709 6.54277 17.0201 6.54277 16.9523L6.57493 16.5457C6.57493 16.478 6.54277 16.4271 6.47843 16.4271H4.29412C4.22978 16.4271 4.16545 16.478 4.13329 16.5288L3.90813 16.9523Z" fill="#00ACD7" />
      </svg>
    </li>
  </ul>
</div>
* {
  margin: 0;
  padding: 0;
}

body {
  background: #151515;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.marquee {
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  min-width: 100%;
}

.marquee__content {
  list-style: none;
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  justify-content: space-around;
  animation: scroll 10s infinite linear;

  svg {
    width: 80px;
    height: 80px;
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.