Try it yourself in our playground

Follow along with the tutorial, or just play around with the code. PRO members can fork this code and save it to their account.

Go Pro

Jeroen Reumkens pro

CSS Only Logo Marquee

1
import {
2
  ReactLogo,
3
  AstroLogo,
4
  TailwindLogo,
5
  JSLogo,
6
  NextjsLogo,
7
  RemixLogo,
8
  TSLogo,
9
  SvelteLogo,
10
  VueLogo,
11
} from "./logos";
12

13
export const App = () => {
14
  return (
15
    <div className="wrapper">
16
      <div className="marquee fadeout-horizontal" style={{ "--numItems": "9" }}>
17
        <div className="marquee-track">
18
          <div className="marquee-item" style={{ "--item-position": "1" }}>
19
            <ReactLogo />
20
          </div>
21
          <div className="marquee-item" style={{ "--item-position": "2" }}>
22
            <AstroLogo />
23
          </div>
24
          <div className="marquee-item" style={{ "--item-position": "3" }}>
25
            <TailwindLogo />
26
          </div>
27
          <div className="marquee-item" style={{ "--item-position": "4" }}>
28
            <VueLogo />
29
          </div>
30
          <div className="marquee-item" style={{ "--item-position": "5" }}>
31
            <NextjsLogo />
32
          </div>
33
          <div className="marquee-item" style={{ "--item-position": "6" }}>
34
            <RemixLogo />
35
          </div>
36
          <div className="marquee-item" style={{ "--item-position": "7" }}>
37
            <JSLogo />
38
          </div>
39
          <div className="marquee-item" style={{ "--item-position": "8" }}>
40
            <TSLogo />
41
          </div>
42
          <div className="marquee-item" style={{ "--item-position": "9" }}>
43
            <SvelteLogo />
44
          </div>
45
        </div>
46
      </div>
47

48
      <div
49
        className="marquee fadeout-horizontal"
50
        style={{ "--numItems": "9", "--direction": "reverse" }}
51
      >
52
        <div className="marquee-track">
53
          <div className="marquee-item" style={{ "--item-position": "1" }}>
54
            <ReactLogo />
55
          </div>
56
          <div className="marquee-item" style={{ "--item-position": "2" }}>
57
            <AstroLogo />
58
          </div>
59
          <div className="marquee-item" style={{ "--item-position": "3" }}>
60
            <TailwindLogo />
61
          </div>
62
          <div className="marquee-item" style={{ "--item-position": "4" }}>
63
            <JSLogo />
64
          </div>
65
          <div className="marquee-item" style={{ "--item-position": "5" }}>
66
            <NextjsLogo />
67
          </div>
68
          <div className="marquee-item" style={{ "--item-position": "6" }}>
69
            <RemixLogo />
70
          </div>
71
          <div className="marquee-item" style={{ "--item-position": "7" }}>
72
            <JSLogo />
73
          </div>
74
          <div className="marquee-item" style={{ "--item-position": "8" }}>
75
            <TSLogo />
76
          </div>
77
          <div className="marquee-item" style={{ "--item-position": "9" }}>
78
            <SvelteLogo />
79
          </div>
80
        </div>
81
      </div>
82
    </div>
83
  );
84
};

1
:root {
2
  font-size: 62.5%;
3
  font-family: monospace;
4
}
5

6
.marquee {
7
  max-width: 1800px;
8
  overflow: hidden;
9
  --speed: 25s;
10
  --single-slide-speed: calc(var(--speed) / var(--numItems));
11
  --item-width: 120px;
12
  --item-gap: 25px;
13
  --item-width-plus-gap: calc(var(--item-width) + var(--item-gap));
14
  --track-width: calc(var(--item-width-plus-gap) * calc(var(--numItems) - 1));
15
}
16

17
.marquee-track {
18
  container-type: inline-size;
19
  display: grid;
20
  grid-template-columns: var(--track-width) [track] 0px [resting];
21
  width: max-content;
22
}
23

24
.marquee-item {
25
  grid-area: resting;
26
  animation: marquee-move var(--speed) linear infinite
27
    var(--direction, forwards);
28
  animation-delay: calc(var(--single-slide-speed) * var(--item-position) * -1);
29

30
  width: var(--item-width);
31
  aspect-ratio: 1/1.2;
32
  display: flex;
33
  justify-content: center;
34
  align-items: center;
35
  border: 1px solid black;
36
  border-radius: 2rem;
37
  background-color: rgba(255, 255, 255, 0.1);
38
  color: #fff;
39
}
40

41
.marquee-item svg {
42
  height: auto;
43
  width: 60%;
44
}
45

46
@keyframes marquee-move {
47
  to {
48
    transform: translateX(calc(-100cqw - 100%));
49
  }
50
}
51

52
.fadeout-horizontal {
53
  mask-image: linear-gradient(
54
    to right,
55
    transparent,
56
    black 5rem,
57
    black calc(100% - 5rem),
58
    transparent
59
  );
60
}
61

62
.wrapper > div {
63
  margin: 24px 0;
64
}

1
export const ReactLogo = () => (
2
  <svg viewBox="175.7 78 490.6 436.9" xmlns="http://www.w3.org/2000/svg">
3
    <g fill="currentColor">
4
      <path d="m666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9v-22.3c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6v-22.3c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zm-101.4 106.7c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24s9.5 15.8 14.4 23.4zm73.9-208.1c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8 142.9c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6z"></path>
5
      <circle cx="420.9" cy="296.5" r="45.7"></circle>
6
    </g>
7
  </svg>
8
);
9

10
export const AstroLogo = () => (
11
  <svg viewBox="0 0 63 79" fill="none" xmlns="http://www.w3.org/2000/svg">
12
    <path
13
      d="M19.4924 65.9282C15.6165 62.432 14.4851 55.0859 16.0999 49.7638C18.8998 53.1193 22.7793 54.1822 26.7977 54.7822C33.0013 55.7081 39.0937 55.3618 44.8565 52.5637C45.5158 52.2434 46.125 51.8174 46.8454 51.386C47.3861 52.9341 47.5268 54.497 47.338 56.0877C46.8787 59.9617 44.9251 62.9542 41.8177 65.2227C40.5752 66.13 39.2604 66.9411 37.9771 67.7967C34.0346 70.4262 32.9679 73.5095 34.4494 77.9946C34.4846 78.1038 34.5161 78.2131 34.5957 78.4797C32.5828 77.5909 31.1124 76.2965 29.9921 74.5946C28.8088 72.7984 28.2458 70.8114 28.2162 68.6615C28.2014 67.6152 28.2014 66.5597 28.0588 65.5282C27.7107 63.0135 26.5144 61.8876 24.2608 61.8227C21.9479 61.7561 20.1183 63.1672 19.6331 65.3893C19.5961 65.5597 19.5424 65.7282 19.4887 65.9263L19.4924 65.9282Z"
14
      fill="currentColor"
15
    ></path>
16
    <path
17
      d="M0 51.3932C0 51.3932 10.5979 46.2433 21.2254 46.2433L29.2382 21.5069C29.5381 20.3106 30.4141 19.4977 31.4029 19.4977C32.3918 19.4977 33.2677 20.3106 33.5677 21.5069L41.5804 46.2433C54.1672 46.2433 62.8058 51.3932 62.8058 51.3932C62.8058 51.3932 44.8044 2.47586 44.7692 2.37772C44.2526 0.931458 43.3804 0 42.2045 0H20.6032C19.4273 0 18.5903 0.931458 18.0384 2.37772C17.9995 2.47401 0 51.3932 0 51.3932Z"
18
      fill="currentColor"
19
    ></path>
20
  </svg>
21
);
22

23
export const TailwindLogo = () => (
24
  <svg viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
25
    <path
26
      d="M489.5 226.499C328 231.632 280 346.999 269 409.499C283.333 386.332 328.5 335.5 395 335.5C472.5 335.5 531.5 422 567.5 449C611.237 481.803 699.123 525.115 814.5 490C906.5 462 949.167 364.332 958.5 317.999C914 378.499 846.5 414.838 763 371.999C705.5 342.499 662.5 221 489.5 226.499Z"
27
      fill="currentColor"
28
    ></path>
29
    <path
30
      d="M261 500.999C99.5 506.132 51.5 621.499 40.5 683.999C54.8333 660.832 100 610 166.5 610C244 610 303 696.5 339 723.5C382.737 756.303 470.623 799.615 586 764.5C678 736.5 720.667 638.832 730 592.499C685.5 652.999 618 689.338 534.5 646.499C477 616.999 434 495.5 261 500.999Z"
31
      fill="currentColor"
32
    ></path>
33
  </svg>
34
);
35

36
export const JSLogo = () => (
37
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
38
    <rect x="5.5" y="5.5" fill="rgba(0,0,0,.1)" width="489" height="489"></rect>
39
    <path
40
      fill="currentColor"
41
      d="M454.478 377.875c-3.58-22.312-18.128-41.045-61.218-58.522-14.967-6.88-31.654-11.806-36.628-23.147-1.767-6.602-1.999-10.319-.883-14.318 3.208-12.968 18.686-17.012 30.958-13.293 7.902 2.648 15.386 8.739 19.895 18.453 21.104-13.666 21.056-13.572 35.792-22.963-5.393-8.366-8.275-12.225-11.807-15.804-12.69-14.177-29.981-21.475-57.639-20.917-4.788.604-9.622 1.255-14.41 1.86-13.805 3.486-26.96 10.737-34.676 20.452-23.149 26.264-16.547 72.234 11.621 91.153 27.75 20.824 68.517 25.565 73.722 45.042 5.067 23.845-17.524 31.561-39.975 28.819-16.548-3.439-25.752-11.854-35.7-27.146-18.313 10.598-18.313 10.598-37.139 21.428 4.462 9.762 9.157 14.178 16.641 22.637 35.42 35.931 124.063 34.166 139.959-20.22.651-1.859 4.927-14.317 1.487-33.514zm-183.142-147.63h-45.74l-.186 118.252c0 25.147 1.302 48.203-2.789 55.27-6.694 13.897-24.032 12.178-31.935 9.481-8.042-3.951-12.132-9.575-16.873-17.523-1.301-2.278-2.278-4.044-2.604-4.184-12.411 7.576-24.775 15.2-37.187 22.776 6.182 12.69 15.293 23.707 26.96 30.864 17.432 10.458 40.858 13.666 65.355 8.041 15.943-4.647 29.703-14.27 36.907-28.911 10.412-19.198 8.181-42.439 8.088-68.145.236-41.927.004-83.854.004-125.921z"
42
    ></path>
43
  </svg>
44
);
45

46
export const NextjsLogo = () => (
47
  <svg
48
    viewBox="0 -101.5 512 512"
49
    xmlns="http://www.w3.org/2000/svg"
50
    preserveAspectRatio="xMidYMid"
51
  >
52
    <g>
53
      <path
54
        d="M120.81043,80.5613102 L217.378325,80.5613102 L217.378325,88.2366589 L129.662487,88.2366589 L129.662487,146.003758 L212.147564,146.003758 L212.147564,153.679106 L129.662487,153.679106 L129.662487,217.101725 L218.384241,217.101725 L218.384241,224.777073 L120.81043,224.777073 L120.81043,80.5613102 Z M226.0292,80.5613102 L236.289538,80.5613102 L281.756922,143.983929 L328.230222,80.5613102 L391.441486,0 L287.591232,150.649363 L341.105941,224.777073 L330.443237,224.777073 L281.756922,157.314798 L232.869425,224.777073 L222.407904,224.777073 L276.324978,150.649363 L226.0292,80.5613102 Z M344.928421,88.2366588 L344.928421,80.5613102 L454.975585,80.5613102 L454.975585,88.2366589 L404.27744,88.2366589 L404.27744,224.777073 L395.425382,224.777073 L395.425382,88.2366589 L344.928421,88.2366588 Z M1.42108547e-14,80.5613102 L11.0650714,80.5613102 L163.64593,308.884007 L100.591558,224.777073 L9.25442331,91.4683847 L8.85205708,224.777073 L1.42108547e-14,224.777073 L1.42108547e-14,80.5613102 Z M454.083705,214.785469 C452.275167,214.785469 450.918762,213.38418 450.918762,211.573285 C450.918762,209.762388 452.275167,208.361099 454.083705,208.361099 C455.913774,208.361099 457.248648,209.762388 457.248648,211.573285 C457.248648,213.38418 455.913774,214.785469 454.083705,214.785469 Z M462.781915,206.334618 L467.518563,206.334618 C467.583153,208.900055 469.456284,210.624719 472.212151,210.624719 C475.290972,210.624719 477.03492,208.770705 477.03492,205.29982 L477.03492,183.310363 L481.85769,183.310363 L481.85769,205.321379 C481.85769,211.573285 478.240613,215.173518 472.255212,215.173518 C466.635824,215.173518 462.781915,211.681076 462.781915,206.334618 Z M488.166045,206.054362 L492.945754,206.054362 C493.354828,209.007848 496.239878,210.883419 500.395211,210.883419 C504.270652,210.883419 507.11264,208.878498 507.11264,206.119036 C507.11264,203.747625 505.304102,202.324777 501.191828,201.354653 L497.187209,200.384531 C491.56782,199.069474 489.005723,196.353129 489.005723,191.782772 C489.005723,186.24229 493.527071,182.555823 500.30909,182.555823 C506.617445,182.555823 511.224912,186.24229 511.504805,191.480955 L506.811217,191.480955 C506.359083,188.613703 503.861576,186.824365 500.244499,186.824365 C496.43365,186.824365 493.893085,188.656819 493.893085,191.459398 C493.893085,193.679901 495.52938,194.95184 499.577063,195.900406 L503.000368,196.741178 C509.373314,198.228702 512,200.815695 512,205.493846 C512,211.443935 507.392533,215.173518 500.029197,215.173518 C493.139526,215.173518 488.51053,211.6164 488.166045,206.054362 Z"
55
        fill="currentColor"
56
        fillRule="nonzero"
57
      ></path>
58
    </g>
59
  </svg>
60
);
61

62
export const RemixLogo = () => (
63
  <svg viewBox="0 0 256 297" xmlns="http://www.w3.org/2000/svg">
64
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
65
      <path
66
        d="M141.674538,-7.10542736e-15 C218.04743,-7.10542736e-15 256,36.3493031 256,94.4136694 C256,137.843796 229.292875,166.16709 193.214546,170.888177 C223.670152,177.025429 241.473826,194.491998 244.754554,228.952544 L245.229325,235.289856 L245.643706,241.214203 L246.00181,246.756109 L246.250531,250.934795 L246.517683,255.865245 L246.656217,258.679019 L246.853693,263.148984 L247.012965,267.370833 L247.091895,269.797544 L247.198581,273.685906 L247.290626,278.131883 L247.324005,280.280236 L247.384197,286.505871 L247.403543,293.002292 L247.40462,296.886512 L168.646185,296.886512 L168.650135,295.266478 L168.650135,295.266478 L168.678181,292.120279 L168.678181,292.120279 L168.725186,289.055223 L168.861417,281.631321 L168.895871,279.142491 L168.922852,275.239899 L168.922852,275.239899 L168.919162,272.744266 L168.896218,270.127045 L168.864335,268.072886 L168.799537,265.197081 L168.706158,262.147348 L168.580806,258.904651 L168.42009,255.449957 L168.325411,253.637163 L168.164297,250.804473 L167.978998,247.828446 L167.691838,243.623566 L167.444542,240.281862 C167.373519,239.25114 167.291291,238.24473 167.19786,237.262104 L166.996058,235.328408 C164.395177,212.50087 155.340815,203.170989 139.832974,200.059114 L138.525715,199.814028 C137.64425,199.660026 136.742867,199.52459 135.821566,199.406474 L134.424675,199.242133 C134.189371,199.216855 133.952821,199.192621 133.715026,199.169411 L132.27332,199.042283 L132.27332,199.042283 L130.801736,198.938792 L130.801736,198.938792 L129.300276,198.858003 L129.300276,198.858003 L127.785563,198.799503 L126.241612,198.761396 L124.668422,198.742777 L124.668422,198.742777 L0,198.740492 L0,136.900224 L127.619345,136.900224 C129.706029,136.900224 131.728173,136.860653 133.685777,136.779928 L135.621869,136.685425 L135.621869,136.685425 L137.514935,136.563134 L137.514935,136.563134 L139.364974,136.412701 C139.669729,136.385264 139.97269,136.35664 140.273859,136.326822 L142.05936,136.133518 C143.235352,135.995014 144.382659,135.837162 145.501284,135.659493 L147.157707,135.378069 C167.866574,131.62361 178.22062,120.630459 178.22062,99.1783057 C178.22062,75.1035054 161.354066,60.5128152 127.619345,60.5128152 L0,60.5128152 L0,-7.10542736e-15 L141.674538,-7.10542736e-15 Z M83.2762921,250.785352 C93.6094556,250.785352 97.9327877,256.522818 99.4729615,262.01452 L99.6761617,262.804225 L99.6761617,262.804225 L99.8429155,263.58653 L99.9515227,264.204367 L99.9979397,264.509915 L100.075689,265.112992 L100.134243,265.703672 L100.156667,265.993728 L100.188494,266.561991 L100.198173,266.839685 L100.205751,267.380932 L100.205751,296.886512 L0,296.886512 L0,250.785352 L83.2762921,250.785352 Z"
67
        fill="currentColor"
68
        fillRule="nonzero"
69
      ></path>
70
    </g>
71
  </svg>
72
);
73

74
export const TSLogo = () => (
75
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
76
    <path
77
      d="M0 32v32h64.002V-.002H0zm51.577-2.55c1.625.406 2.865 1.128 4.003 2.306.59.63 1.463 1.778 1.534 2.052.02.08-2.763 1.95-4.45 2.997-.06.04-.305-.223-.58-.63-.823-1.2-1.686-1.717-3.007-1.808-1.94-.132-3.2.884-3.18 2.58 0 .498.07.792.274 1.2.427.884 1.22 1.412 3.708 2.49 4.582 1.97 6.542 3.27 7.76 5.12 1.36 2.062 1.666 5.354.742 7.802-1.016 2.662-3.535 4.47-7.08 5.07-1.097.193-3.698.163-4.876-.05-2.57-.457-5.008-1.727-6.512-3.393-.59-.65-1.737-2.347-1.666-2.47.03-.04.295-.203.59-.376l2.377-1.37 1.84-1.067.386.57c.538.823 1.717 1.95 2.428 2.326 2.042 1.077 4.846.924 6.227-.315.59-.538.833-1.097.833-1.92 0-.742-.09-1.067-.477-1.625-.498-.71-1.514-1.31-4.4-2.56-3.302-1.422-4.724-2.306-6.024-3.708-.752-.813-1.463-2.113-1.758-3.2-.244-.904-.305-3.17-.112-4.084.68-3.2 3.088-5.415 6.563-6.075 1.128-.213 3.75-.132 4.856.142zM36.552 32.12l.02 2.62h-8.33v23.67H22.35v-23.67h-8.33v-2.57l.07-2.64c.03-.04 5.1-.06 11.246-.05l11.185.03z"
78
      fill="currentColor"
79
    ></path>
80
  </svg>
81
);
82

83
export const SvelteLogo = () => (
84
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 519 139">
85
    <path
86
      d="M172.4428,100.3382a24.0793,24.0793,0,0,1-13.72-3.8769,19.8715,19.8715,0,0,1-8.0107-10.6094l8.3515-3.0683a15.4054,15.4054,0,0,0,5.4541,6.6044,14.3656,14.3656,0,0,0,8.2657,2.4288,12.1375,12.1375,0,0,0,7.8818-2.3858,8.2746,8.2746,0,0,0,2.94-6.8174,7.4559,7.4559,0,0,0-.8095-3.4511,10.325,10.325,0,0,0-1.8321-2.6,12.3611,12.3611,0,0,0-3.1533-2.0879q-2.1314-1.0635-3.5361-1.6192-1.4062-.5521-4.1328-1.4912-3.41-1.1924-5.1133-1.874a38.46,38.46,0,0,1-4.4737-2.2588,16.5385,16.5385,0,0,1-4.1757-3.1523,15.2908,15.2908,0,0,1-2.5137-4.1338,14.77,14.77,0,0,1,4.0049-16.7871q5.1138-4.5162,13.8906-4.5166,7.3272,0,12.0576,3.2382a15.6579,15.6579,0,0,1,6.3487,8.6075l-8.1807,2.7265a9.5238,9.5238,0,0,0-3.9629-4.3887,13.31,13.31,0,0,0-6.9443-1.6621,10.703,10.703,0,0,0-6.69,1.875,6.2891,6.2891,0,0,0-2.4287,5.2832,5.5132,5.5132,0,0,0,1.874,4.0909,12.885,12.885,0,0,0,3.92,2.6416q2.0464.8524,6.2217,2.3007,2.5547.939,3.791,1.4063t3.6221,1.5762a24.997,24.997,0,0,1,3.6641,2.0029,32.1346,32.1346,0,0,1,2.9824,2.4287,12.7235,12.7235,0,0,1,2.6,3.11,17.39,17.39,0,0,1,1.5332,3.8339,17.5828,17.5828,0,0,1,.64,4.8155q0,8.3524-5.71,13.08Q181.3892,100.3388,172.4428,100.3382Zm54.6221-1.0224L206.6128,39.6644h9.5449L229.7065,81.25a64.4659,64.4659,0,0,1,1.875,6.8173,64.0335,64.0335,0,0,1,1.875-6.8173l13.3789-41.586h9.459L235.9272,99.3158Zm47.294,0V39.6644h36.9843V48.016H283.2221V64.3773h18.15v8.3516h-18.15V90.9642h29.9952v8.3516Zm61.44,0V39.6644h8.8633v51.13h29.1435v8.5215Zm71.41-51.13v51.13h-8.8632v-51.13H381.4741V39.6644h42.6074v8.5215Zm35.1934,51.13V39.6644h36.9844V48.016H451.2661V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Z"
87
      fill="currentColor"
88
    ></path>
89
    <path
90
      d="M110.2859,28.3189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L38.4118,35.1078A29.9232,29.9232,0,0,0,24.8931,55.1506a31.5143,31.5143,0,0,0,3.1076,20.2318,30.0059,30.0059,0,0,0-4.4761,11.1829,31.8885,31.8885,0,0,0,5.4472,24.1157c10.4022,14.8865,30.9424,19.2966,45.7915,9.8348l26.0826-16.6237a29.9182,29.9182,0,0,0,13.5187-20.0428,31.5276,31.5276,0,0,0-3.1057-20.2323,30.0012,30.0012,0,0,0,4.4742-11.1824,31.88,31.88,0,0,0-5.4472-24.1157"
91
      fill="currentColor"
92
    ></path>
93
    <path
94
      d="M61.9463,112.0815A20.718,20.718,0,0,1,39.71,103.8389a19.173,19.173,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3362.9815a33.6466,33.6466,0,0,0,10.203,5.0978l.9694.2941-.0892.9675a5.8469,5.8469,0,0,0,1.052,3.8781,6.2388,6.2388,0,0,0,6.6952,2.485,5.7456,5.7456,0,0,0,1.602-.7041L85.3993,81.781A5.431,5.431,0,0,0,87.85,78.15a5.7944,5.7944,0,0,0-.9876-4.3712,6.2435,6.2435,0,0,0-6.6977-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9533,6.3449a19.0336,19.0336,0,0,1-5.2964,2.3259A20.7182,20.7182,0,0,1,41.078,72.4241a19.173,19.173,0,0,1-3.2766-14.5024,17.9892,17.9892,0,0,1,8.13-12.0513L72.0125,29.2472a19.0031,19.0031,0,0,1,5.3-2.3287A20.718,20.718,0,0,1,99.549,35.1611a19.1734,19.1734,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9693-.2942.0892-.9675a5.8576,5.8576,0,0,0-1.052-3.878,6.2388,6.2388,0,0,0-6.6952-2.485,5.7456,5.7456,0,0,0-1.602.7041L53.8592,57.219A5.422,5.422,0,0,0,51.41,60.85a5.7858,5.7858,0,0,0,.9857,4.3717,6.2435,6.2435,0,0,0,6.6977,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.952-6.3425a18.9787,18.9787,0,0,1,5.2958-2.3278,20.7183,20.7183,0,0,1,22.2369,8.2427,19.173,19.173,0,0,1,3.2766,14.5024,17.9982,17.9982,0,0,1-8.13,12.0532L67.246,109.7528a19.0031,19.0031,0,0,1-5.3,2.3287"
95
      fill="currentColor"
96
    ></path>
97
  </svg>
98
);
99

100
export const VueLogo = () => (
101
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69">
102
    <path
103
      fill="#ffffff"
104
      d="m161.096.001-30.224 52.35L100.647.002H-.005L130.872 226.69 261.749 0z"
105
    />
106
    <path
107
      fill="#aaaaaa"
108
      d="m161.096.001-30.224 52.35L100.647.002H52.346l78.526 136.01L209.398.001z"
109
    />
110
  </svg>
111
);

Last week we created a text marquee using only CSS. This marquee was using an old trick to mirror the contents and swap the animation back to the start exactly halfway.

Though there’s nothing wrong with this approach, I really had the urge to make a marquee where there was no mirroring of the content needed. That’s exactly what we’ll be exploring in this tutorial.

We will be creating a infinite logo marquee, with CSS only, and no repeating logos. This is a fun challenge and I’m excited to show you how to do it!

Watch the video above the playground to see how I did it.

Can we Make A CSS Only Infinite Logo Marquee With ZERO Repeating Logos?

Try it yourself in our playground

Making a CSS Only Infinite Text Marquee