<!-- 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 ");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.