Skip to content

Instantly share code, notes, and snippets.

@PaulieScanlon

PaulieScanlon/index.html

Last active February 17, 2023 11:43
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PaulieScanlon/d82a21b12cec74e67f86a777a1097bb8 to your computer and use it in GitHub Desktop.
Save PaulieScanlon/d82a21b12cec74e67f86a777a1097bb8 to your computer and use it in GitHub Desktop.
Download ZIP
Cars with animateMotion
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>animateMotion</title>
</head>
<body>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="gray" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<g>
<animateMotion
dur="10s"
repeatCount="indefinite"
rotate="auto"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
/>
<path
fill="#db2777"
style="transform: translate(-6px, -6px)"
d="M14.16,14.34c.27-.53,.27-.97,.21-1.27h1.46c.08,.24,.3,.41,.56,.41h2.44c.27,0,.5-.19,.57-.44,0,0,0,0,.01,0,.93-.11,1.77-.53,2.41-1.14,.35-.33,.63-.72,.85-1.15,.29-.57,.46-1.22,.46-1.91v-3.06c0-.69-.16-1.34-.46-1.91-.22-.43-.51-.82-.85-1.15-.64-.61-1.48-1.03-2.41-1.14,0,0,0,0-.01,0-.07-.25-.3-.44-.57-.44h-2.44c-.26,0-.48,.17-.56,.41h-1.46c.06-.3,.06-.74-.21-1.27-.17-.33-.3-.34-.39-.2-.18,.3-.18,1.23,.06,1.46,0,0,0,0,0,.01H6.38c-.08-.24-.3-.41-.56-.41H3.37c-.26,0-.48,.17-.56,.41h-.36c-.19,0-.38,.03-.55,.08-.54,.17-.99,.57-1.2,1.12-.12,.32-.25,.72-.35,1.19-.2,.85-.34,1.96-.34,3.36s.15,2.51,.34,3.36c.11,.47,.23,.87,.35,1.19,.21,.55,.65,.96,1.2,1.12,.18,.05,.36,.08,.55,.08h.36c.08,.24,.3,.41,.56,.41h2.44c.26,0,.48-.17,.56-.41h7.46s0,0,0,.01c-.24,.23-.24,1.16-.06,1.46,.09,.15,.22,.14,.39-.2Zm8.82-6.04v.54c0,.69-.16,1.34-.46,1.91-.22,.43-.51,.82-.85,1.15l-.15-.19c.26-.28,.49-.6,.66-.95,.29-.57,.46-1.22,.46-1.91v-.54s0,0,0,0c.1-.04,.22-.03,.34,0Zm-9.51,3.4s-1.04-.26-1.96-1.44c-.11-.14-.17-.31-.17-.48V4.72c0-.17,.06-.34,.17-.48,.92-1.18,1.96-1.44,1.96-1.44,.54,1.48,.55,4.45,.55,4.45,0,0-.02,2.97-.55,4.45ZM22.53,3.87c.29,.57,.46,1.22,.46,1.91v.54c-.12,.03-.24,.04-.34,0,0,0,0,0,0,0v-.54c0-.69-.16-1.34-.46-1.91-.18-.35-.4-.67-.66-.95l.15-.19c.35,.33,.63,.72,.85,1.15ZM7.66,2.59h4.82s-.49,1.15-1.77,1.15h-1.79c-1.02,0-1.26-1.15-1.26-1.15Zm-1.02,8.32c-1.34,0-2.43-1.09-2.43-2.43v-2.46c0-1.34,1.09-2.43,2.43-2.43h.19v7.32h-.19Zm2.28-.16h1.79c1.29,0,1.77,1.15,1.77,1.15l-4.82,.12s.24-1.27,1.26-1.27Z"
/>
</g>
<g>
<animateMotion
dur="10s"
repeatCount="indefinite"
rotate="auto"
begin="1"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
/>
<path
fill="#2563eb"
style="transform: translate(-6px, -6px)"
d="M14.16,14.34c.27-.53,.27-.97,.21-1.27h1.46c.08,.24,.3,.41,.56,.41h2.44c.27,0,.5-.19,.57-.44,0,0,0,0,.01,0,.93-.11,1.77-.53,2.41-1.14,.35-.33,.63-.72,.85-1.15,.29-.57,.46-1.22,.46-1.91v-3.06c0-.69-.16-1.34-.46-1.91-.22-.43-.51-.82-.85-1.15-.64-.61-1.48-1.03-2.41-1.14,0,0,0,0-.01,0-.07-.25-.3-.44-.57-.44h-2.44c-.26,0-.48,.17-.56,.41h-1.46c.06-.3,.06-.74-.21-1.27-.17-.33-.3-.34-.39-.2-.18,.3-.18,1.23,.06,1.46,0,0,0,0,0,.01H6.38c-.08-.24-.3-.41-.56-.41H3.37c-.26,0-.48,.17-.56,.41h-.36c-.19,0-.38,.03-.55,.08-.54,.17-.99,.57-1.2,1.12-.12,.32-.25,.72-.35,1.19-.2,.85-.34,1.96-.34,3.36s.15,2.51,.34,3.36c.11,.47,.23,.87,.35,1.19,.21,.55,.65,.96,1.2,1.12,.18,.05,.36,.08,.55,.08h.36c.08,.24,.3,.41,.56,.41h2.44c.26,0,.48-.17,.56-.41h7.46s0,0,0,.01c-.24,.23-.24,1.16-.06,1.46,.09,.15,.22,.14,.39-.2Zm8.82-6.04v.54c0,.69-.16,1.34-.46,1.91-.22,.43-.51,.82-.85,1.15l-.15-.19c.26-.28,.49-.6,.66-.95,.29-.57,.46-1.22,.46-1.91v-.54s0,0,0,0c.1-.04,.22-.03,.34,0Zm-9.51,3.4s-1.04-.26-1.96-1.44c-.11-.14-.17-.31-.17-.48V4.72c0-.17,.06-.34,.17-.48,.92-1.18,1.96-1.44,1.96-1.44,.54,1.48,.55,4.45,.55,4.45,0,0-.02,2.97-.55,4.45ZM22.53,3.87c.29,.57,.46,1.22,.46,1.91v.54c-.12,.03-.24,.04-.34,0,0,0,0,0,0,0v-.54c0-.69-.16-1.34-.46-1.91-.18-.35-.4-.67-.66-.95l.15-.19c.35,.33,.63,.72,.85,1.15ZM7.66,2.59h4.82s-.49,1.15-1.77,1.15h-1.79c-1.02,0-1.26-1.15-1.26-1.15Zm-1.02,8.32c-1.34,0-2.43-1.09-2.43-2.43v-2.46c0-1.34,1.09-2.43,2.43-2.43h.19v7.32h-.19Zm2.28-.16h1.79c1.29,0,1.77,1.15,1.77,1.15l-4.82,.12s.24-1.27,1.26-1.27Z"
/>
</g>
<g>
<animateMotion
dur="10s"
repeatCount="indefinite"
rotate="auto"
begin="2"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
/>
<path
fill="#eab308"
style="transform: translate(-6px, -6px)"
d="M14.16,14.34c.27-.53,.27-.97,.21-1.27h1.46c.08,.24,.3,.41,.56,.41h2.44c.27,0,.5-.19,.57-.44,0,0,0,0,.01,0,.93-.11,1.77-.53,2.41-1.14,.35-.33,.63-.72,.85-1.15,.29-.57,.46-1.22,.46-1.91v-3.06c0-.69-.16-1.34-.46-1.91-.22-.43-.51-.82-.85-1.15-.64-.61-1.48-1.03-2.41-1.14,0,0,0,0-.01,0-.07-.25-.3-.44-.57-.44h-2.44c-.26,0-.48,.17-.56,.41h-1.46c.06-.3,.06-.74-.21-1.27-.17-.33-.3-.34-.39-.2-.18,.3-.18,1.23,.06,1.46,0,0,0,0,0,.01H6.38c-.08-.24-.3-.41-.56-.41H3.37c-.26,0-.48,.17-.56,.41h-.36c-.19,0-.38,.03-.55,.08-.54,.17-.99,.57-1.2,1.12-.12,.32-.25,.72-.35,1.19-.2,.85-.34,1.96-.34,3.36s.15,2.51,.34,3.36c.11,.47,.23,.87,.35,1.19,.21,.55,.65,.96,1.2,1.12,.18,.05,.36,.08,.55,.08h.36c.08,.24,.3,.41,.56,.41h2.44c.26,0,.48-.17,.56-.41h7.46s0,0,0,.01c-.24,.23-.24,1.16-.06,1.46,.09,.15,.22,.14,.39-.2Zm8.82-6.04v.54c0,.69-.16,1.34-.46,1.91-.22,.43-.51,.82-.85,1.15l-.15-.19c.26-.28,.49-.6,.66-.95,.29-.57,.46-1.22,.46-1.91v-.54s0,0,0,0c.1-.04,.22-.03,.34,0Zm-9.51,3.4s-1.04-.26-1.96-1.44c-.11-.14-.17-.31-.17-.48V4.72c0-.17,.06-.34,.17-.48,.92-1.18,1.96-1.44,1.96-1.44,.54,1.48,.55,4.45,.55,4.45,0,0-.02,2.97-.55,4.45ZM22.53,3.87c.29,.57,.46,1.22,.46,1.91v.54c-.12,.03-.24,.04-.34,0,0,0,0,0,0,0v-.54c0-.69-.16-1.34-.46-1.91-.18-.35-.4-.67-.66-.95l.15-.19c.35,.33,.63,.72,.85,1.15ZM7.66,2.59h4.82s-.49,1.15-1.77,1.15h-1.79c-1.02,0-1.26-1.15-1.26-1.15Zm-1.02,8.32c-1.34,0-2.43-1.09-2.43-2.43v-2.46c0-1.34,1.09-2.43,2.43-2.43h.19v7.32h-.19Zm2.28-.16h1.79c1.29,0,1.77,1.15,1.77,1.15l-4.82,.12s.24-1.27,1.26-1.27Z"
/>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment