Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="root"></div>
              
            
!

CSS

              
                .app {
  padding-top: 60px;
  background: white;
}

.logo {
  svg {
    height: 3.75rem;
  }
}

              
            
!

JS

              
                gsap.config({ trialWarn: false });

const LogoMercedes = () => (
  <svg viewBox="0 0 66 65" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M0.992188 32.4214C0.992188 50.3267 15.5079 64.8428 33.4136 64.8428C51.3197 64.8428 65.835 50.3267 65.835 32.4214C65.835 14.5157 51.3197 0 33.4136 0C15.5079 0 0.992188 14.5157 0.992188 32.4214ZM7.09953 48.2137L33.4222 37.3189L59.8569 48.0451C54.3673 57.3914 44.345 63.1349 33.5343 63.163C22.6959 63.2191 12.6456 57.5327 7.09953 48.2137ZM33.0573 1.83807L28.8626 29.6243L6.70697 47.5293C1.38592 38.0981 1.44237 26.5558 6.87558 17.181C12.2807 7.80626 22.2466 1.97864 33.0573 1.83807ZM60.2506 47.3345L37.8419 29.9929L33.8439 1.84028C39.1392 1.92127 44.3233 3.37178 48.8917 6.05065C53.4602 8.72952 57.2572 12.5455 59.9134 17.1271C65.3462 26.4454 65.4591 37.9037 60.2506 47.3345Z"
      fill="#171D26"
    />
  </svg>
);

const LogoSamsung = () => (
  <svg viewBox="0 0 162 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M88.7388 10.8795C88.7388 10.8795 87.182 9.91683 86.2193 9.54435C86.2193 9.54435 83.2395 8.16328 82.6483 7.5062C82.6483 7.5062 81.4869 6.41173 82.167 5.14051C82.167 5.14051 82.4516 4.30867 83.6789 4.30867C83.6789 4.30867 85.2766 4.39655 85.2766 5.70971V7.56212H91.0026L90.9926 4.83394C90.9926 4.83394 91.433 0.366186 84.2481 0.169461C84.2481 0.169461 78.597 -0.202024 76.9762 2.84172C76.9762 2.84172 76.3401 3.52077 76.3401 5.88547V7.59408C76.3401 7.59408 76.2752 9.56532 77.2818 10.8355C77.2818 10.8355 77.851 11.6684 79.2531 12.5871C79.2531 12.5871 82.1001 14.12 83.8087 14.9977C83.8087 14.9977 85.5333 15.9823 85.3066 17.5492C85.3066 17.5492 85.1658 19.1579 83.5001 19.092C83.5001 19.092 81.9772 19.0241 81.9772 17.4463V15.5949H75.8758V18.2841C75.8758 18.2841 75.705 23.4269 83.5451 23.4269C83.5451 23.4269 91.0366 23.5787 91.3861 18.1493V15.9594C91.3851 15.9594 91.6507 12.632 88.7388 10.8795ZM59.4238 0.809565L57.5065 12.8248H57.0581L55.2267 0.917416H45.662L45.1827 22.676H50.8458L50.9137 6.28192H51.3591L54.3609 22.673H60.3185L63.2834 6.2879H63.6778L63.8146 22.676H69.5077L68.8945 0.809565H59.4238ZM25.7129 0.900441L21.9452 22.651H28.0417L30.2735 5.78661H30.7748L33.0057 22.651H39.1012L35.3345 0.900441H25.7129ZM153.636 10.5799V13.7884H155.2V17.2326C155.2 18.9162 153.761 18.9472 153.761 18.9472C152.011 18.9472 152.077 17.3474 152.077 17.3474V5.43409C152.077 4.20681 153.63 4.1409 153.63 4.1409C155.12 4.1409 155.13 5.60486 155.13 5.60486V7.41632H160.87C161.058 3.88027 160.353 3.02447 160.353 3.02447C158.929 -0.173058 153.542 0.00169675 153.542 0.00169675C145.265 0.00169675 146.183 6.35282 146.183 6.35282V17.8717C146.361 23.8284 154.518 23.2232 154.656 23.2182C158.284 22.8168 159.379 21.6634 159.379 21.6634C160.388 20.9145 160.647 19.8769 160.647 19.8769C160.936 19.2727 161.008 17.3474 161.008 17.3474V10.5799H153.636ZM134.61 14.12H134.36L128.535 0.815553H121.566V22.678H127.238L126.898 9.37559H127.152L133.187 22.678H139.944V0.813557H134.2L134.61 14.12ZM107.72 17.2306C107.72 17.2306 107.802 19.0251 106.138 19.0251C106.138 19.0251 104.389 19.119 104.389 17.2755L104.371 0.828536H98.1496V17.1447C98.1496 17.1447 97.5115 23.3201 106.226 23.3201C106.226 23.3201 113.8 23.41 113.8 17.4283V0.829534H107.72V17.2306ZM13.8525 10.8795C13.8525 10.8795 12.2977 9.91683 11.334 9.54535C11.334 9.54535 8.35619 8.16528 7.76502 7.5072C7.76502 7.5072 6.60364 6.41073 7.28469 5.1425C7.28469 5.1425 7.56829 4.31067 8.79458 4.31067C8.79458 4.31067 10.3933 4.39754 10.3933 5.71071V7.56312H16.1213L16.1103 4.83394C16.1103 4.83394 16.5477 0.366186 9.36578 0.170459C9.36578 0.170459 8.82453 0.135506 8.03064 0.17545C8.03064 0.17545 3.67973 0.409123 2.1239 2.79579C2.11492 2.81376 2.10193 2.82675 2.09295 2.84273C2.09295 2.84273 1.45784 3.52077 1.45784 5.88647V7.59507C1.45784 7.59507 1.39193 9.56632 2.39952 10.8365C2.39952 10.8365 2.96872 11.6694 4.37076 12.5881C4.37076 12.5881 7.21678 14.1209 8.92539 14.9987C8.92539 14.9987 10.652 15.9813 10.4233 17.5502C10.4233 17.5502 10.2825 19.1589 8.61782 19.093C8.61782 19.093 7.09495 19.0251 7.09495 17.4473V15.5949H0.992485V18.2861C0.992485 18.2861 0.821724 23.4289 8.66176 23.4289C8.66176 23.4289 16.1513 23.5807 16.5038 18.1513V15.9634C16.5038 15.9614 16.7654 12.632 13.8525 10.8795Z"
      fill="#171D26"
    />
  </svg>
);

const LogoStaples = () => (
  <svg viewBox="0 0 153 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
      <path
        d="M140.663 0.657227C137.135 0.663862 134.432 1.58448 132.633 3.3942C130.546 5.49836 130.246 8.19635 130.253 9.61875C130.267 16.0424 134.414 17.0716 138.806 18.1631L141.731 18.878C144.687 19.6286 146.486 20.2316 146.498 22.3051C146.494 25.2767 143.591 25.9029 141.155 25.9029H140.909C136.266 25.9029 135.511 23.0689 135.473 21.3786L135.467 21.2542H129.861V21.4242C129.866 24.337 131.003 31.1173 141.403 31.1173H141.458C143.236 31.1123 152.118 30.6338 152.107 21.586C152.098 16.3185 148.512 14.6846 145.006 13.7814L138.46 12.0646C137.139 11.732 135.729 11.207 135.717 9.17918C135.729 6.74078 138.059 5.87158 140.256 5.87158C143.551 5.88236 145.344 7.289 145.596 10.0592L145.604 10.1753L151.234 10.1728L151.231 10.0434C151.162 5.714 148.357 0.657227 140.662 0.657227H140.663ZM93.419 0.754265C90.3892 0.753435 87.9401 3.13461 87.9367 6.04658V27.1984C87.9334 28.771 89.2472 30.4604 90.8628 30.4687C91.1597 30.4355 91.4359 30.4687 91.4359 30.4687H106.624V25.0677H93.4414V6.05239L93.662 6.04244L95.6268 16.0647L100.558 14.8812L99.0248 5.94871C98.8316 2.95712 96.4786 0.761729 93.4182 0.755094L93.419 0.754265ZM11.7734 0.794905C8.27752 0.794905 5.59362 1.70723 3.79717 3.51032C1.69053 5.62111 1.38366 8.33486 1.3878 9.76389C1.41186 16.1833 5.59113 17.2035 10.0134 18.2883L12.8881 19.0257C15.747 19.7265 17.6222 20.3444 17.6239 22.4643C17.6272 23.3874 17.3419 24.143 16.7787 24.7111C15.9079 25.5869 14.3213 26.0531 12.1881 26.0572C7.24078 26.039 6.65026 22.8856 6.62704 21.5312L6.62372 21.4052L0.992188 21.3969V21.5246C1.01624 24.449 2.19231 31.2508 12.6003 31.2616C14.3835 31.2525 23.277 30.7474 23.2687 21.7419C23.2479 16.4645 19.8375 14.8497 16.1542 13.8901L9.61615 12.1567C8.52716 11.8913 6.87751 11.489 6.86092 9.30939C6.86922 6.88095 9.1774 6.01424 11.3371 6.01424H11.3919C16.2877 6.01755 16.6344 9.15761 16.7621 10.2955H22.3796C22.3671 9.33759 21.9732 0.794905 11.8331 0.794905H11.775H11.7734ZM22.7395 1.43934L22.7254 6.86104H30.8177V30.4679H36.6998V6.86104H44.7531L44.7299 1.43934H22.7395ZM48.7018 1.43934L39.1423 30.4679H45.3046L47.1757 24.5195H56.863L58.5657 30.4679H64.9254L55.3958 1.43934H48.701H48.7018ZM65.9373 1.43934V30.4679H71.8259V20.1063L78.1251 20.0856C80.59 20.079 82.5955 19.3118 84.0851 17.8098C86.0789 15.801 86.7723 12.7729 86.7623 10.7907C86.7408 5.05629 83.4995 1.44017 78.2926 1.44017H65.9373V1.43934ZM107.733 1.43934V30.4679H128.355V25.0495H113.493V17.8894H126.545V12.544L113.493 12.5573V6.76815H127.683L127.679 1.43934H107.731H107.733ZM71.8259 6.7076H76.1702C79.5409 6.7076 80.916 7.81566 80.9201 10.5336C80.9276 11.2717 80.9483 12.8119 79.9307 13.8412C79.2589 14.5213 78.2354 14.8671 76.8785 14.8671L71.8259 14.8729V6.70677V6.7076ZM51.9961 8.44683L55.2141 19.3367H48.7192L51.9961 8.44683Z"
        fill="#171D26"
      />
    </g>
    <defs>
      <clipPath id="clip0">
        <rect
          width="151.126"
          height="31.9178"
          fill="white"
          transform="translate(0.992188)"
        />
      </clipPath>
    </defs>
  </svg>
);

function App() {
  const [logoArray, setLogoArray] = React.useState([
    LogoMercedes,
    LogoSamsung,
    LogoStaples
  ]);

  // Randomise the logos by shuffling the array
  const randomArrayShuffle = (array) => {
    let currentIndex = array.length,
      temporaryValue,
      randomIndex;

    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };

  React.useEffect(() => {
    const animation = gsap.timeline({ repeat: -1 });
    animation.fromTo(".logo", { opacity: 0 }, { opacity: 1, duration: 2.5 });
    animation.to(".logo", { opacity: 0, duration: 2.5 });
    // Fade the logos in and out over 5 seconds

    const timer = setInterval(() => {
      const newArray = randomArrayShuffle(logoArray);
      setLogoArray([...newArray]);
    }, 5000); // every 5 seconds shuffle he array

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="w-full h-screen app">
      <div className="container mx-auto">
        <div className="opacity-50 grid grid-cols-3 gap-9 mb-29">
          {logoArray.map((Item, key) => (
            <div className="flex items-center justify-center logo" key={key}>
              <Item />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

              
            
!
999px

Console