Skip to content

Instantly share code, notes, and snippets.

@rhamses
Created February 13, 2023 18:35
Show Gist options
  • Save rhamses/9645d935ce111274e63ee79b0557adfd to your computer and use it in GitHub Desktop.
Save rhamses/9645d935ce111274e63ee79b0557adfd to your computer and use it in GitHub Desktop.
Race Track - SVG and AnimeMotion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Race Track - SVG and AnimeMotion</title>
</head>
<body>
<svg
width="801"
height="514"
viewBox="0 0 801 514"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="track"
d="M793.493 250.845C793.178 204.011 760.573 117.715 729.608 87.272C697.894 56.0952 522.687 7.49974 441.986 7.49974C420.278 7.49974 290.069 36.5539 229.197 54.9819C221.452 57.3267 175.627 69.6476 127.365 82.3617C26.0746 109.044 12.1409 115.074 7.56932 134.21C4.11374 148.676 6.23828 153.241 24.2635 170.096C47.6892 192.003 49.0023 197.963 35.3804 220.548C-2.04191 282.594 30.4133 369.537 98.1155 388.604C398.001 473.055 556.144 512.411 569.122 505.783C592.084 494.087 607.649 414.358 595.393 371.255C588.468 346.888 578.807 338.809 415.03 220.504C349.316 173.024 349.316 173.033 350.941 135.939C352.913 90.8198 368.643 76.492 426.34 67.2412C494.546 56.3096 509.301 62.8421 487.808 94.4673C468.091 123.491 467.04 141.38 484.126 157.23C505.58 177.132 518.498 172.777 561.762 131.048C596.833 97.2289 649.361 77.0313 665.134 91.3007C674.533 99.8036 668.806 109.624 639.908 134.574C583.772 183.04 573.305 216.153 600.859 258.11C616.707 282.243 737.136 358.268 750.136 352.346C764.068 346 786.033 300.19 792.505 263.997C793.2 260.098 793.514 255.68 793.482 250.85L793.493 250.845Z"
stroke="#ccc"
fill="#efefef"
stroke-width="4"
/>
<g>
<path
id="ferrari"
d="M3.87275 0C3.26252 0 2.76625 0.496266 2.76625 1.1065V1.34855C3.50097 1.67109 4.05201 2.30069 4.28769 3.07746C4.38008 3.21687 4.426 3.45505 4.426 3.87275V4.97925H6.08575V5.5325H7.19225V4.97925H8.29876C8.90899 4.97925 9.40526 4.48299 9.40526 3.87275V1.1065C9.40526 0.496266 8.90899 0 8.29876 0H3.87275ZM18.8105 0.55325C18.2003 0.55325 17.704 1.04952 17.704 1.65975V3.87275C17.704 4.48299 18.2003 4.97925 18.8105 4.97925H19.3638V5.5325H20.4703V4.97925H21.0235V5.5325H22.13V4.97925H22.6833C23.2935 4.97925 23.7898 4.48299 23.7898 3.87275V1.65975C23.7898 1.04952 23.2935 0.55325 22.6833 0.55325H18.8105ZM0.55325 2.213C0.247856 2.213 0 2.46086 0 2.76625V14.9378C0 15.2437 0.247856 15.491 0.55325 15.491H1.65975C2.57483 15.491 3.3195 14.7463 3.3195 13.8313V3.87275C3.3195 2.95768 2.57483 2.213 1.65975 2.213H0.55325ZM24.8963 2.213C24.5903 2.213 24.343 2.46086 24.343 2.76625V5.32503C26.1367 5.66639 27.5545 6.14177 27.6452 6.1722C27.6541 6.17497 27.6542 6.18672 27.6625 6.18949V2.76625C27.6625 2.46086 27.4152 2.213 27.1093 2.213H24.8963ZM11.065 3.3195C10.8708 3.3195 10.6978 3.4296 10.5982 3.59613L9.09405 6.08575H4.426V11.6183H9.09405L10.5982 14.1079C10.6978 14.2739 10.8708 14.3845 11.065 14.3845H14.9378C15.0528 14.3845 15.1728 14.3483 15.2663 14.2808L18.9834 11.6183H21.0235C23.8174 11.6183 27.1427 10.5237 27.2822 10.4772C27.5095 10.4025 27.6625 10.1975 27.6625 9.95851V7.74551C27.6625 7.50761 27.5079 7.30263 27.2822 7.22683C27.1444 7.18036 23.8766 6.08575 21.0235 6.08575H18.9834L15.2663 3.42324C15.1728 3.35629 15.0528 3.3195 14.9378 3.3195H11.065ZM12.1715 7.19225H14.9378C15.8545 7.19225 16.5975 7.93527 16.5975 8.85201C16.5975 9.76874 15.8545 10.5118 14.9378 10.5118H12.1715V7.19225ZM27.6625 11.5145C27.652 11.5184 27.6385 11.5285 27.6279 11.5318C27.5355 11.5622 26.1239 12.0214 24.343 12.3617V14.9378C24.343 15.2437 24.5903 15.491 24.8963 15.491H27.1093C27.4152 15.491 27.6625 15.2437 27.6625 14.9378V11.5145ZM6.08575 12.1715V12.7248H4.426V13.8313C4.426 14.1057 4.41176 14.2788 4.37414 14.3845C4.19378 15.2752 3.57898 15.9992 2.76625 16.3555V16.5975C2.76625 17.2089 3.26141 17.704 3.87275 17.704H8.29876C8.9101 17.704 9.40526 17.2089 9.40526 16.5975V13.8313C9.40526 13.2199 8.9101 12.7248 8.29876 12.7248H7.19225V12.1715H6.08575ZM19.3638 12.1715V12.7248H18.8105C18.2003 12.7248 17.704 13.221 17.704 13.8313V16.0443C17.704 16.6545 18.2003 17.1508 18.8105 17.1508H22.6833C23.2935 17.1508 23.7898 16.6545 23.7898 16.0443V13.8313C23.7898 13.221 23.2935 12.7248 22.6833 12.7248H22.13V12.1715H21.0235V12.7248H20.4703V12.1715H19.3638Z"
fill="red"
>
<animateMotion
begin="1"
dur="20s"
rotate="auto"
repeatCount="indefinite"
>
<mpath xlink:href="#track" />
</animateMotion>
</path>
<path
id="mercedes"
d="M3.87275 0C3.26252 0 2.76625 0.496266 2.76625 1.1065V1.34855C3.50097 1.67109 4.05201 2.30069 4.28769 3.07746C4.38008 3.21687 4.426 3.45505 4.426 3.87275V4.97925H6.08575V5.5325H7.19225V4.97925H8.29876C8.90899 4.97925 9.40526 4.48299 9.40526 3.87275V1.1065C9.40526 0.496266 8.90899 0 8.29876 0H3.87275ZM18.8105 0.55325C18.2003 0.55325 17.704 1.04952 17.704 1.65975V3.87275C17.704 4.48299 18.2003 4.97925 18.8105 4.97925H19.3638V5.5325H20.4703V4.97925H21.0235V5.5325H22.13V4.97925H22.6833C23.2935 4.97925 23.7898 4.48299 23.7898 3.87275V1.65975C23.7898 1.04952 23.2935 0.55325 22.6833 0.55325H18.8105ZM0.55325 2.213C0.247856 2.213 0 2.46086 0 2.76625V14.9378C0 15.2437 0.247856 15.491 0.55325 15.491H1.65975C2.57483 15.491 3.3195 14.7463 3.3195 13.8313V3.87275C3.3195 2.95768 2.57483 2.213 1.65975 2.213H0.55325ZM24.8963 2.213C24.5903 2.213 24.343 2.46086 24.343 2.76625V5.32503C26.1367 5.66639 27.5545 6.14177 27.6452 6.1722C27.6541 6.17497 27.6542 6.18672 27.6625 6.18949V2.76625C27.6625 2.46086 27.4152 2.213 27.1093 2.213H24.8963ZM11.065 3.3195C10.8708 3.3195 10.6978 3.4296 10.5982 3.59613L9.09405 6.08575H4.426V11.6183H9.09405L10.5982 14.1079C10.6978 14.2739 10.8708 14.3845 11.065 14.3845H14.9378C15.0528 14.3845 15.1728 14.3483 15.2663 14.2808L18.9834 11.6183H21.0235C23.8174 11.6183 27.1427 10.5237 27.2822 10.4772C27.5095 10.4025 27.6625 10.1975 27.6625 9.95851V7.74551C27.6625 7.50761 27.5079 7.30263 27.2822 7.22683C27.1444 7.18036 23.8766 6.08575 21.0235 6.08575H18.9834L15.2663 3.42324C15.1728 3.35629 15.0528 3.3195 14.9378 3.3195H11.065ZM12.1715 7.19225H14.9378C15.8545 7.19225 16.5975 7.93527 16.5975 8.85201C16.5975 9.76874 15.8545 10.5118 14.9378 10.5118H12.1715V7.19225ZM27.6625 11.5145C27.652 11.5184 27.6385 11.5285 27.6279 11.5318C27.5355 11.5622 26.1239 12.0214 24.343 12.3617V14.9378C24.343 15.2437 24.5903 15.491 24.8963 15.491H27.1093C27.4152 15.491 27.6625 15.2437 27.6625 14.9378V11.5145ZM6.08575 12.1715V12.7248H4.426V13.8313C4.426 14.1057 4.41176 14.2788 4.37414 14.3845C4.19378 15.2752 3.57898 15.9992 2.76625 16.3555V16.5975C2.76625 17.2089 3.26141 17.704 3.87275 17.704H8.29876C8.9101 17.704 9.40526 17.2089 9.40526 16.5975V13.8313C9.40526 13.2199 8.9101 12.7248 8.29876 12.7248H7.19225V12.1715H6.08575ZM19.3638 12.1715V12.7248H18.8105C18.2003 12.7248 17.704 13.221 17.704 13.8313V16.0443C17.704 16.6545 18.2003 17.1508 18.8105 17.1508H22.6833C23.2935 17.1508 23.7898 16.6545 23.7898 16.0443V13.8313C23.7898 13.221 23.2935 12.7248 22.6833 12.7248H22.13V12.1715H21.0235V12.7248H20.4703V12.1715H19.3638Z"
fill="black"
>
<animateMotion
begin="1.5"
dur="20s"
rotate="auto"
repeatCount="indefinite"
>
<mpath xlink:href="#track" />
</animateMotion>
</path>
<path
id="redbull"
d="M3.87275 0C3.26252 0 2.76625 0.496266 2.76625 1.1065V1.34855C3.50097 1.67109 4.05201 2.30069 4.28769 3.07746C4.38008 3.21687 4.426 3.45505 4.426 3.87275V4.97925H6.08575V5.5325H7.19225V4.97925H8.29876C8.90899 4.97925 9.40526 4.48299 9.40526 3.87275V1.1065C9.40526 0.496266 8.90899 0 8.29876 0H3.87275ZM18.8105 0.55325C18.2003 0.55325 17.704 1.04952 17.704 1.65975V3.87275C17.704 4.48299 18.2003 4.97925 18.8105 4.97925H19.3638V5.5325H20.4703V4.97925H21.0235V5.5325H22.13V4.97925H22.6833C23.2935 4.97925 23.7898 4.48299 23.7898 3.87275V1.65975C23.7898 1.04952 23.2935 0.55325 22.6833 0.55325H18.8105ZM0.55325 2.213C0.247856 2.213 0 2.46086 0 2.76625V14.9378C0 15.2437 0.247856 15.491 0.55325 15.491H1.65975C2.57483 15.491 3.3195 14.7463 3.3195 13.8313V3.87275C3.3195 2.95768 2.57483 2.213 1.65975 2.213H0.55325ZM24.8963 2.213C24.5903 2.213 24.343 2.46086 24.343 2.76625V5.32503C26.1367 5.66639 27.5545 6.14177 27.6452 6.1722C27.6541 6.17497 27.6542 6.18672 27.6625 6.18949V2.76625C27.6625 2.46086 27.4152 2.213 27.1093 2.213H24.8963ZM11.065 3.3195C10.8708 3.3195 10.6978 3.4296 10.5982 3.59613L9.09405 6.08575H4.426V11.6183H9.09405L10.5982 14.1079C10.6978 14.2739 10.8708 14.3845 11.065 14.3845H14.9378C15.0528 14.3845 15.1728 14.3483 15.2663 14.2808L18.9834 11.6183H21.0235C23.8174 11.6183 27.1427 10.5237 27.2822 10.4772C27.5095 10.4025 27.6625 10.1975 27.6625 9.95851V7.74551C27.6625 7.50761 27.5079 7.30263 27.2822 7.22683C27.1444 7.18036 23.8766 6.08575 21.0235 6.08575H18.9834L15.2663 3.42324C15.1728 3.35629 15.0528 3.3195 14.9378 3.3195H11.065ZM12.1715 7.19225H14.9378C15.8545 7.19225 16.5975 7.93527 16.5975 8.85201C16.5975 9.76874 15.8545 10.5118 14.9378 10.5118H12.1715V7.19225ZM27.6625 11.5145C27.652 11.5184 27.6385 11.5285 27.6279 11.5318C27.5355 11.5622 26.1239 12.0214 24.343 12.3617V14.9378C24.343 15.2437 24.5903 15.491 24.8963 15.491H27.1093C27.4152 15.491 27.6625 15.2437 27.6625 14.9378V11.5145ZM6.08575 12.1715V12.7248H4.426V13.8313C4.426 14.1057 4.41176 14.2788 4.37414 14.3845C4.19378 15.2752 3.57898 15.9992 2.76625 16.3555V16.5975C2.76625 17.2089 3.26141 17.704 3.87275 17.704H8.29876C8.9101 17.704 9.40526 17.2089 9.40526 16.5975V13.8313C9.40526 13.2199 8.9101 12.7248 8.29876 12.7248H7.19225V12.1715H6.08575ZM19.3638 12.1715V12.7248H18.8105C18.2003 12.7248 17.704 13.221 17.704 13.8313V16.0443C17.704 16.6545 18.2003 17.1508 18.8105 17.1508H22.6833C23.2935 17.1508 23.7898 16.6545 23.7898 16.0443V13.8313C23.7898 13.221 23.2935 12.7248 22.6833 12.7248H22.13V12.1715H21.0235V12.7248H20.4703V12.1715H19.3638Z"
fill="blue"
>
<animateMotion
begin="2"
dur="20s"
rotate="auto"
repeatCount="indefinite"
>
<mpath xlink:href="#track" />
</animateMotion>
</path>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment