<ol>
  <li>
    <svg width="50" viewBox="0 0 288 308"><use href="#dino"></use></svg>
  </li>
  <li>
    <svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
  </li>
  <li>
    <svg width="100" viewBox="0 0 288 308"><use href="#dino"></use></svg>
  </li>
</ol>

<svg style="display: none">
  <symbol id="dino">
    <title>Offlinosaur</title>
    <path fill="currentColor" d="M255.45 0.450012L164.5 0.919983C152.97 0.999983 143.65 10.35 143.6 21.88C143.52 44.72 143.43 107.86 143.43 107.86L133.87 107.89C130.89 107.89 128.5 110.35 128.55 113.32L128.72 122.98H115.64C111.9 122.97 108.87 126 108.87 129.74V137.2H95.1C90.95 137.2 87.5701 140.56 87.5701 144.71C87.5701 146.43 87.57 148.11 87.6 149.79C87.64 152.34 86.6001 153.46 83.9601 153.34C82.2001 153.26 80.4401 153.26 78.5801 153.27C76.0401 153.29 73.98 155.35 73.98 157.89V166.14L41.9 166.12C39.47 131.71 13.2001 123.83 13.2001 123.83C13.2001 123.5 13.2 108.54 13.19 108.24C12.78 100.08 0.560043 100.47 0.560043 108.64C0.580043 128.68 0.290054 167.89 0.290054 172.91C0.260054 220.64 45.44 218.51 45.44 218.51C52.14 242.37 70.73 247.26 70.73 247.26L70.69 301.51C70.69 304.67 73.25 307.23 76.41 307.22C83.14 307.2 94.15 307.18 100.11 307.16C103.71 307.15 106.62 304.23 106.62 300.63C106.62 297.06 103.76 294.15 100.19 294.1L84.2001 293.82L83.99 278.63C83.99 278.63 112.74 280.37 112.76 249.55H129.41C129.41 259.49 135.12 270.62 143.9 270.62L144.48 301.14C144.54 304.38 147.17 306.99 150.41 307.02L172.99 307.23C176.91 307.26 180.11 304.09 180.11 300.16C180.11 296.25 176.95 293.09 173.04 293.08H155.88L155.91 247.04C155.91 247.04 194.53 235.4 200.1 194.44L200.2 171.78H209.49V178.15C209.49 181.61 212.29 184.41 215.75 184.41C219.2 184.41 222 181.62 222.01 178.17C222.02 175.17 222.04 169.81 222.06 165.59C222.07 162.19 219.33 159.41 215.93 159.38L200.26 159.42L200.32 146H221.72V152.38C221.72 155.84 224.52 158.64 227.98 158.64C231.43 158.64 234.23 155.85 234.24 152.4C234.25 149.4 234.27 144.04 234.29 139.82C234.3 136.42 231.56 133.64 228.16 133.61L200.38 133.69L200.4 129.34C200.4 121.46 201.15 103.91 221.76 103.93H230.27C232.8 103.93 234.86 101.88 234.86 99.35C234.86 96.82 232.81 94.76 230.27 94.76L204.95 94.74C204.95 94.74 186.51 96.52 186.52 72.11C185.98 66.41 193.3 64.79 196.71 69.84C203.87 77.55 219.52 76.85 219.52 76.85L274.5 76.55C281.8 76.51 287.71 70.6 287.75 63.3L287.98 35.57C287.99 17.4 274.44 0.429983 255.46 0.419983L255.45 0.450012ZM192.91 46.12C186.54 46.12 181.39 40.95 181.39 34.59C181.39 28.22 186.56 23.07 192.92 23.07C199.29 23.07 204.44 28.24 204.44 34.6C204.44 40.97 199.27 46.12 192.91 46.12Z"/>   
  </symbol>
</svg>
@layer demo {
  ol {
    li:nth-child(1) > svg {
      animation: 
        run 3s ease-in-out forwards,
        dance .75s ease 3s forwards;
    }
  }
}

@keyframes run {
  to {
    transform: var(--finish-line);
  }
}

@keyframes dance {
  0%, 50%, 100% {
    transform: var(--finish-line) translateY(0);
  }
  25%, 75% {
    transform: var(--finish-line) translateY(-10px);
  }
}

@layer demo.support {
  :root {
    --checker: #000;
    --gradient-checkerboard: repeating-conic-gradient(
      var(--checker) 0% 25%, 
      #0000 0% 50%) 
      50% / 1rem 1rem;  
    
    @media (prefers-color-scheme: light) {
      --checker: #ddd;
    }
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
  }
  
  ol {
    container-type: inline-size;
    display: grid;
    gap: var(--space);
    padding-block: 10vmin;
    
    li {
      /* 100% of the container minus a portion of the finish line minus it's own width */
      --finish-line: translateX(calc(100cqi - 5vw - 100%));
    }
    
    &::after {
      content: "";
      background: var(--gradient-checkerboard);
      background-color: #fff5;
      width: 15vw;
      position: absolute;
      inset-inline-end: 0;
      inset-block: 0;
      z-index: -1;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.