<div id="sec-1" class="section">
  <svg id="car" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="464.84" viewBox="0 0 1281.9304 464.83881" width="1281.9" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs id="defs39">
<clipPath id="clipPath4476" clipPathUnits="userSpaceOnUse">
<path id="path4478" stroke-linejoin="round" d="m635.67 176.07c-0.062 0.86797-35.136 2.8497-35.136 2.8497 33.343 23.914 52.937 47.826 81.797 71.74 20.63 15.942 54.207 6.191 65.853 3.088-38.269-27.893-72.544-55.199-112.51-77.678h-0.004zm-88.514 0.94533c-41.231 0.26597-98.226 7.8065-98.016 9.637l7.8283 68.705 225.09 6.172c-34.894-26.722-76.281-75.12-101.63-81.873-7.5388-2.0087-19.53-2.7293-33.274-2.6407zm-107.32 10.25c-44.325 7.969-68.711 16.894-88.547 26.758-1.367 5.033 9.1569 21.222 18.698 26.174 22.922 11.899 75.794 14.998 76.9 14.95 1.144-0.05-7.051-67.882-7.051-67.882z" fill-rule="evenodd" stroke="#ffffff" stroke-width="5" fill="#000000"/>
</clipPath>
</defs>
<g stroke="#ffffff">
<use id="wheel-front" xlink:href="#wheel-back" transform="matrix(.70711 .70711 -.70711 .70711 965.88 -145.14)" height="100%" width="100%" y="0" x="0" stroke-width="5" fill="#000000"/>
<g id="wheel-back" stroke-linejoin="round" stroke="#ffffff" stroke-linecap="round" stroke-width="5" fill="#000000">
<path id="tire-outer" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" d="m440.02 386.35a74.596 74.595 0 0 1 -74.596 74.595 74.596 74.595 0 0 1 -74.596 -74.595 74.596 74.595 0 0 1 74.596 -74.595 74.596 74.595 0 0 1 74.596 74.595z"/>
<path id="tire-inner" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" d="m418.13 386.35a52.712 52.711 0 0 1 -52.712 52.711 52.712 52.711 0 0 1 -52.712 -52.711 52.712 52.711 0 0 1 52.712 -52.711 52.712 52.711 0 0 1 52.712 52.711z"/>
<path id="rim" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" d="m405.38 386.35a39.963 39.961 0 0 1 -39.963 39.961 39.963 39.961 0 0 1 -39.963 -39.961 39.963 39.961 0 0 1 39.963 -39.961 39.963 39.961 0 0 1 39.963 39.961z"/>
<path id="rim-pattern" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" d="m378.52 410.77c-4.0293 1.641-8.437 2.5451-13.056 2.5451-4.6976 0-9.1768-0.93522-13.145-2.5867 8.8148-12.202 16.289-12.202 26.174 0.043zm11.318-37.523c1.641 4.0291 2.5452 8.4368 2.5452 13.056 0 4.6974-0.93528 9.1766-2.5869 13.145-12.202-8.8146-12.202-16.289 0.0432-26.173zm-37.523-11.311c4.0293-1.641 8.437-2.5451 13.056-2.5451 4.6976 0 9.1768 0.93522 13.145 2.5867-8.8148 12.202-16.289 12.202-26.174-0.043zm-11.318 37.513c-1.641-4.0291-2.5452-8.4368-2.5452-13.056 0-4.6974 0.93528-9.1766 2.5869-13.145 12.202 8.8146 12.202 16.289-0.0432 26.173zm27.085-13.096a2.6642 2.6641 0 0 1 -2.6642 2.6642 2.6642 2.6641 0 0 1 -2.6642 -2.6642 2.6642 2.6641 0 0 1 2.6642 -2.664 2.6642 2.6641 0 0 1 2.6642 2.664z"/>
</g>
<g id="stream" stroke-linecap="round" fill="none">
<path id="stream-1" stroke-width="9" d="m5.056 302.03s112.22-88.694 153.03-77.759c40.52 10.857 97.032-22.206 133.84-37.176 105.67-42.976 211.26-57.992 316.14-40.941 58.206 9.4628 102.25 61.865 159.21 77.128 98.745 26.459 247.54 20.92 381.06 91.918 36.83 19.584 128.52 19.137 128.52 19.137"/>
<path id="stream-2" stroke-width="7.2" d="m5.0421 241.73s105.68-70.955 162.18-62.207c44.341 8.6858 103.46-17.765 147.82-29.741 99.443-34.381 199.81-46.393 299.62-32.753 62.466 7.5703 113.76 49.363 174.08 61.702 107.32 21.957 224.71 39.451 345.59 73.535 46.002 12.97 142.57 15.309 142.57 15.309"/>
<path id="stream-3" stroke-width="6.4" d="m5.0282 181.42s99.134-53.216 171.32-46.655c48.163 6.5143 109.9-13.323 161.8-22.306 93.216-25.785 188.37-34.795 283.1-24.564 66.725 5.6777 125.5 32.88 188.94 46.277 102.73 21.692 205.94 42.103 310.13 55.151 51.94 6.5047 156.62 11.482 156.62 11.482"/>
<path id="stream-4" stroke-width="4.6" d="m5.0142 121.11s92.59-35.478 180.47-31.104c51.984 4.3429 116.33-8.8823 175.77-14.87 86.989-17.19 176.92-23.197 266.58-16.376 70.984 3.7851 135.79 21.151 203.81 30.851 91.445 13.041 182.66 28.562 274.66 36.767 56.72 5.0585 170.66 7.6547 170.66 7.6547"/>
<path id="stream-5" stroke-width="2.8" d="m5.0003 60.807s86.047-17.739 189.61-15.552c55.806 2.1714 122.76-4.4412 189.75-7.4352 80.761-8.5952 165.48-11.598 250.06-8.1882 75.244 1.8926 145.8 10.055 218.68 15.426 79.75 5.8774 159.32 14.49 239.19 18.384 61.51 2.9987 184.71 3.8273 184.71 3.8273"/>
</g>
</g>
<g id="group-body">
<g stroke-linejoin="round" stroke="#ffffff" stroke-width="5" fill="#000000">
<g fill-rule="evenodd">
<path id="body" d="m537.58 163.96c-218.54-0.13208-383.53 117.4-383.53 117.4-0.17052 17.595-1.7872 32.494 5.8166 64.584 0 6.27 6.2264 26.972 14.407 39.177 24.351 13.981 60.718 19.589 88.17 21.393-0.87-4.862 2.6682-92.053 105.35-92.053 13.939 0 63.888 7.0982 90.106 67.937l3.4083 41.37 382.45 4.9338c5.19-24.149 23.98-110.48 111.82-115.38v0c0.0007 0.0001 0 0 0 0 38.734 0.7208 65.074 26.086 83.682 66.834 7.412 19.611 10.667 42.323 33.468 50.456 11.119 2.9626 28.452 3.0907 42.325 0.5351 3.7081-0.6832 7.2081-2.2404 10.51-4.1642l0.1992-4.0215c-15.617-7.2131-14.48-16.412-13.36-31.132 4.9409-3.2063 14.018-18.556 14.022-18.563h0.016l-1.0137-13.616 8.3986-27.327c-117.5-77.58-322.79-70.38-385.62-78.42l-0.022 0.01c-37.48-27.32-83.371-61.771-121.01-83.131-30.636-4.7144-60.59-6.8049-89.6-6.8224z" stroke-linecap="round"/>
<path id="headlight" d="m1073.9 302.05c1.3757 57.152 51.204 60.914 55.772 43.938l4.1985-13.664c-22.655-14.731-43.546-23.834-59.97-30.275z"/>
<path id="path30111-2" d="m1126.4 373.27-49.257-0.2148v20.146c12.053 0 24.419 1.1715 35.22-1.3419 5.7307-3.5823 10.094-10.564 14.038-18.589z"/>
</g>
<path id="door" d="m456.97 255.53c-9.0458 3.2059 19.707 125.74 42.495 144.74 7.5915 6.3307 243.9 6.4522 243.9 6.4522 1.402-40.38 4.1672-80.985 1.5268-120.69-0.90111-13.551-40.739-10.827-62.828-24.328z"/>
<path id="windows" d="m439.84 187.27s8.1956 67.833 7.0516 67.883c-1.1067 0.048-53.978-3.0506-76.9-14.95-9.5408-4.9529-20.066-21.142-18.699-26.175 19.836-9.8649 44.222-18.789 88.547-26.758zm242.22 74.26c-34.894-26.722-76.282-75.121-101.63-81.874-30.155-8.0348-131.57 4.5563-131.29 6.9969l7.8269 68.705zm-46.39-85.46c-0.062 0.86797-35.136 2.8501-35.136 2.8501 33.343 23.914 52.936 47.827 81.796 71.741 20.63 15.942 54.208 6.1894 65.854 3.0864-38.269-27.893-72.544-55.198-112.51-77.677z" fill-rule="evenodd"/>
<rect id="handle" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" rx="2.6367" ry="3.4622" height="9.3975" width="42.94" stroke-linecap="round" y="289.35" x="478.35"/>
<g id="g23" fill-rule="evenodd">
<path id="tailpipe" d="m167.15 371.27c-5.3224 0.2094-13.518 5.7398-15.54 7.4328l11.738 13.72c8.9099-5.1153 12.216-3.3073 19.465-2.6913l-8.5439-4.6104z"/>
<path id="spoiler" d="m148.62 244.09 6.4319 29.692 30.974-5.5143c-12.25-4.0015-24.409-8.7794-31.144-23.839z"/>
<g id="mirror">
<path id="path30105-4" d="m996.02 252.2s18.546 7.1774 18.309 13.534c-0.2498 6.6851-19.761 8.265-19.761 8.265z"/>
<path id="path30107-1" d="m1010.3 270.23c3.1554 5.7084 5.2383 16.658 7.2831 23.328-6.7937-1.362-20.978-3.4951-20.978-3.4951 4.3154-4.2912 6.2396-9.732 3.8536-16.101 3.3271-0.6903 6.653-1.397 9.8417-3.7314z"/>
<path id="path30113-6" d="m990.1 247.86c-2.6564 9.6489-3.562 19.41-2.22 29.838 4.141 0 5.3426-1.5899 6.6857-3.7002 3.9872-6.2641 4.6471-15.154 1.4514-21.799-1.0258-2.1329-3.3403-3.1163-5.9171-4.3391z"/>
</g>
</g>
<g id="g31721" stroke-linecap="round">
<path id="body-line" fill-rule="evenodd" d="m159.86 345.97 106.36-1.0037m203.85 41.634 374.82 7.9704"/>
<path id="fender-back" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" d="m469.34 385.71c0.36561-33.025-20.668-63.623-49.244-79.281-44.011-25.174-105.12-17.994-140 19.42-15.028 15.536-23.85 35.14-24.4 56.592 0 6.619 6.9098 7.2326 9.9687-0.2221 10.254-29.751 36.655-53.284 67.215-61.395 38.585-11.086 83.422 1.63 108.77 33.006 8.2156 9.8364 14.163 21.426 17.545 33.717 1.3777 5.113 10.142 6.4696 10.142-1.8362z"/>
<rect id="bumper-back" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" rx="6.2342" ry="4.5026" height="12.221" width="101.53" y="342.11" x="144.93"/>
<path id="bumper-front" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" d="m1046.7 364.2h87.497c3.2718 0 2.7813 1.7462 2.7813 3.9153v2.7966c0 2.1691 0.4905 3.9153-2.7813 3.9153h-87.497c-3.2721 0-5.9062-1.7463-5.9062-3.9153v-2.7966c0-2.1691 2.6341-3.9153 5.9062-3.9153z"/>
<path id="fender-front" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" d="m856.71 394.9c11.41-42.35 45.67-74.11 92.95-74.11 40.767 0 70.207 15.955 84.518 52.707 2.6855 9.9661 13.958 7.0864 12.129 0.2996-8.3936-44.659-45.207-75.604-96.078-75.604-56.907 0-103.04 47.469-103.04 94.935 0 6.0648 8.0554 7.2069 9.5195 1.7735z"/>
</g>
</g>
<path id="streak" d="m670.81 171.77 58.288 94.061h24.17l-68.056-94.061zm21.698 0 64.579 94.061h6.1955l-68.058-94.061z" clip-path="url(#clipPath4476)" fill-rule="evenodd" fill="#ffffff"/>
</g>
</svg>
</div>
body {
  margin: 0;
}

.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sec-1 {
  background-color: #000000;
}

@keyframes streamline {
  100% {
    stroke-dashoffset: 2000px;
  }
}

#stream {
  stroke-dasharray: 1000px;
  stroke-dashoffset: 0px;
  animation: streamline 1.5s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

#rim-pattern {
  transform-origin: center center;
  transform-box: fill-box;
  animation: spin 0.7s linear infinite;
}

@keyframes rumble {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: translate(1px, 0px) rotate(-0.3deg);
  }
  50% {
    -webkit-transform: translate(0px, -1px) rotate(0deg);
  }
  75% {
    -webkit-transform: translate(-1px, 0px) rotate(0.3deg);
  }
  100% {
    -webkit-transform: translate(0px, 1px) rotate(0deg);
  }
}

#group-body {
  transform-origin: center center;
  transform-box: fill-box;
/*   animation: rumble 0.7s linear infinite; */
}

@keyframes streak {
  100% {
    d: path(
      "m270.81 171.77 58.288 94.061h24.17l-68.056-94.061zm21.698 0 64.579 94.061h6.1955l-68.058-94.061z"
    );
  }
}

#streak {
  animation: streak 1s linear infinite;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.