<!-- Edit --TW to adjust spacing.
Edit --AD to adjust scroll speed. -->
<section>
<!-- Begin Actual Code For Marquee-->
<a href="https://isotropic.co/blog"><div class="marquee marquee--long isotropic-cool-bg" style="--tw: 30.5ch; --ad: 4s;">
	<span>Read our WordPress blog  -</span>
</div>
</a>
<!-- End Actual Code For Marquee-->
<section>
.marquee {
   margin:0;
   font-size: 8vw;
   overflow: hidden;
  background:#f57c00;
  text-transform:uppercase;
  padding:15px 0;
}

.marquee--long { 
   font-size: 14px; 
}

.marquee span {   
    display: inline-block;
    white-space: nowrap;
    color: white;
    width: var(--tw);
    text-shadow: var(--tw) 0 currentColor, 
                 calc(var(--tw) * 2) 0 currentColor, 
                 calc(var(--tw) * 3) 0 currentColor,
                 calc(var(--tw) * 4) 0 currentColor,
                 calc(var(--tw) * 5) 0 currentColor,
                 calc(var(--tw) * 6) 0 currentColor,
                 calc(var(--tw) * 7) 0 currentColor,
                 calc(var(--tw) * 8) 0 currentColor;
   
    will-change: transform;
    animation: marquee var(--ad) linear infinite;
    animation-play-state: running;
}


@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/*  
 * on MacOs: System Preferences > 
 *           Accessibility > 
 *           Display > Reduce motion
 */

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation: none;
    text-shadow: none;
    width: auto;
    display: block;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }
}

/*Delete this to use a solid color bg*/

.isotropic-cool-bg {
      background-color: #F57C00;
  background-size:cover;
      background-image: url("data:image/svg+xml;utf8, %3Csvg width='1200' height='200' viewBox='0 0 1200.00 200.00' xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' %3E %3Crect width='1200.00' height='200.00' fill='%23F57C00' /%3E %3Cg transform='translate(125.00, 25.00)'%3E %3Cg transformOrigin='center' transform='scale(0.50, 0.50)'%3E %3Cg transformOrigin='center' transform='rotate(143.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cpath d='M0 4.37114e-06L100 0L50 50L0 4.37114e-06Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M0 50L100 50L50 100L0 50Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0'%3E %3Crect width='100' height='100' fill='white'%3E%3C/rect%3E %3C/clipPath%3E %3C/defs%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(223.50, 23.50)'%3E %3Cg transformOrigin='center' transform='scale(0.53, 0.53)'%3E %3Cg transformOrigin='center' transform='rotate(123.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M0 100V0L50 50L0 100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 100V0L100 50L50 100Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(428.50, 28.50)'%3E %3Cg transformOrigin='center' transform='scale(0.43, 0.43)'%3E %3Cg transformOrigin='center' transform='rotate(116.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M50 100L100 50V100H50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M0 50L50 0V50H0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M25 75L75 25V75H25Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(524.00, 24.00)'%3E %3Cg transformOrigin='center' transform='scale(0.52, 0.52)'%3E %3Cg transformOrigin='center' transform='rotate(292.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M100 50H50L100 100V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M100 0H50L100 50V0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 50H0L50 100V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 0H0L50 50V0Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(620.50, 20.50)'%3E %3Cg transformOrigin='center' transform='scale(0.59, 0.59)'%3E %3Cg transformOrigin='center' transform='rotate(332.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M100 50H50L100 100V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M100 0H50L100 50V0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 50H0L50 100V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 0H0L50 50V0Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(717.00, 17.00)'%3E %3Cg transformOrigin='center' transform='scale(0.66, 0.66)'%3E %3Cg transformOrigin='center' transform='rotate(128.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cpath d='M0 100L100 100L50 50L0 100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M0 4.37114e-06L100 0L50 50L0 4.37114e-06Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0'%3E %3Crect width='100' height='100' fill='white'%3E%3C/rect%3E %3C/clipPath%3E %3C/defs%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(821.50, 21.50)'%3E %3Cg transformOrigin='center' transform='scale(0.57, 0.57)'%3E %3Cg transformOrigin='center' transform='rotate(68.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M0 100V0L50 50L0 100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 100V0L100 50L50 100Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(928.50, 28.50)'%3E %3Cg transformOrigin='center' transform='scale(0.43, 0.43)'%3E %3Cg transformOrigin='center' transform='rotate(114.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cpath d='M0 4.37114e-06L100 0L50 50L0 4.37114e-06Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M0 50L100 50L50 100L0 50Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0'%3E %3Crect width='100' height='100' fill='white'%3E%3C/rect%3E %3C/clipPath%3E %3C/defs%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(1120.50, 20.50)'%3E %3Cg transformOrigin='center' transform='scale(0.59, 0.59)'%3E %3Cg transformOrigin='center' transform='rotate(80.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cpath d='M0 4.37114e-06L100 0L50 50L0 4.37114e-06Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M0 50L100 50L50 100L0 50Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0'%3E %3Crect width='100' height='100' fill='white'%3E%3C/rect%3E %3C/clipPath%3E %3C/defs%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(19.00, 119.00)'%3E %3Cg transformOrigin='center' transform='scale(0.62, 0.62)'%3E %3Cg transformOrigin='center' transform='rotate(308.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M50 100L0 50V100H50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M100 50L50 0V50H100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M75 75L25 25V75H75Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(120.00, 120.00)'%3E %3Cg transformOrigin='center' transform='scale(0.60, 0.60)'%3E %3Cg transformOrigin='center' transform='rotate(105.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M100 0V100L50 50L100 0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 0V100L0 50L50 0Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(220.50, 120.50)'%3E %3Cg transformOrigin='center' transform='scale(0.59, 0.59)'%3E %3Cg transformOrigin='center' transform='rotate(225.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M100 0V100L50 50L100 0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 0V100L0 50L50 0Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(317.00, 117.00)'%3E %3Cg transformOrigin='center' transform='scale(0.66, 0.66)'%3E %3Cg transformOrigin='center' transform='rotate(81.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cpath d='M100 100L0 100L50 50L100 100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M100 50L0 50L50 -2.18557e-06L100 50Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0'%3E %3Crect width='100' height='100' fill='white'%3E%3C/rect%3E %3C/clipPath%3E %3C/defs%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(518.50, 118.50)'%3E %3Cg transformOrigin='center' transform='scale(0.63, 0.63)'%3E %3Cg transformOrigin='center' transform='rotate(213.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M50 100L0 50V100H50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M100 50L50 0V50H100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M75 75L25 25V75H75Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(623.00, 123.00)'%3E %3Cg transformOrigin='center' transform='scale(0.54, 0.54)'%3E %3Cg transformOrigin='center' transform='rotate(170.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M25 0L50 50H0L25 0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M25 50L50 100H0L25 50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M75 0L100 50H50L75 0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M75 50L100 100H50L75 50Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(716.00, 116.00)'%3E %3Cg transformOrigin='center' transform='scale(0.68, 0.68)'%3E %3Cg transformOrigin='center' transform='rotate(252.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M100 50H50L100 0V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M100 100H50L100 50V100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 50H0L50 0V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 100H0L50 50V100Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(822.00, 122.00)'%3E %3Cg transformOrigin='center' transform='scale(0.56, 0.56)'%3E %3Cg transformOrigin='center' transform='rotate(307.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M0 100V0L50 50L0 100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 100V0L100 50L50 100Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(922.50, 122.50)'%3E %3Cg transformOrigin='center' transform='scale(0.55, 0.55)'%3E %3Cg transformOrigin='center' transform='rotate(302.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cpath d='M0 4.37114e-06L100 0L50 50L0 4.37114e-06Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M0 50L100 50L50 100L0 50Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0'%3E %3Crect width='100' height='100' fill='white'%3E%3C/rect%3E %3C/clipPath%3E %3C/defs%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(1015.50, 115.50)'%3E %3Cg transformOrigin='center' transform='scale(0.69, 0.69)'%3E %3Cg transformOrigin='center' transform='rotate(106.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M100 50H50L100 100V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M100 0H50L100 50V0Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 50H0L50 100V50Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 0H0L50 50V0Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cg transform='translate(1126.00, 126.00)'%3E %3Cg transformOrigin='center' transform='scale(0.48, 0.48)'%3E %3Cg transformOrigin='center' transform='rotate(88.00, 50, 50)'%3E %3Cg opacity='1'%3E %3Cpath d='M0 100V0L50 50L0 100Z' fill='%23E65100'%3E%3C/path%3E %3Cpath d='M50 100V0L100 50L50 100Z' fill='%23E65100'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
      
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.