CodePen Embed - SVG rotate origin changed

<svg id="bicycle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.08 209.99"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px;}</style></defs><g id="wheel-left" class="wheel"><path d="M51,113A46,46,0,1,1,5,159a46.06,46.06,0,0,1,46-46m0-5a51,51,0,1,0,51,51,51,51,0,0,0-51-51Z"/><path d="M50.79,127.58a32.71,32.71,0,1,1-32.71,32.71,32.74,32.74,0,0,1,32.71-32.71m0-5A37.71,37.71,0,1,0,88.5,160.29a37.71,37.71,0,0,0-37.71-37.71Z"/><line class="cls-1" x1="73.5" y1="185.49" x2="24.5" y2="136.49"/><line class="cls-1" x1="27.5" y1="183.49" x2="74" y2="136.99"/><line class="cls-1" x1="84.5" y1="160.49" x2="15.5" y2="160.49"/><line class="cls-1" x1="49.5" y1="125.49" x2="49.5" y2="193.49"/></g><g id="wheel-right" class="wheel"><path d="M251.08,110.58a46,46,0,1,1-46,46,46,46,0,0,1,46-46m0-5a51,51,0,1,0,51,51,51,51,0,0,0-51-51Z"/><path d="M250.88,125.16a32.71,32.71,0,1,1-32.71,32.71,32.74,32.74,0,0,1,32.71-32.71m0-5a37.71,37.71,0,1,0,37.7,37.71,37.71,37.71,0,0,0-37.7-37.71Z"/><line class="cls-1" x1="273.58" y1="183.08" x2="224.58" y2="134.08"/><line class="cls-1" x1="227.58" y1="181.08" x2="274.08" y2="134.58"/><line class="cls-1" x1="284.58" y1="158.08" x2="215.58" y2="158.08"/><line class="cls-1" x1="249.58" y1="123.08" x2="249.58" y2="191.08"/></g><g id="bicycle-frame"><line class="cls-1" x1="223.5" y1="59.49" x2="163.5" y2="158.49"/><line class="cls-1" x1="251.5" y1="156.49" x2="223.5" y2="59.49"/><line class="cls-1" x1="50.5" y1="158.49" x2="101.5" y2="3.49"/><line class="cls-1" x1="72.5" y1="2.49" x2="117.5" y2="5.49"/><line class="cls-1" x1="223.5" y1="59.49" x2="84.5" y2="59.49"/><polyline class="cls-1" points="77.5 80.49 163.5 158.49 251.5 156.49"/><line class="cls-1" x1="223.5" y1="59.49" x2="222.5" y2="33.49"/><polyline class="cls-1" points="197.5 32.49 234.5 32.49 233.5 21.49 197.5 32.49"/></g></svg>

body {
  text-align: center;
}

#bicycle {
  margin-top: 3em;
  width: 350px;
  height: auto;
}

.wheel {
  animation: rotate 4s infinite linear;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

This Pen is owned by SV on CodePen.

See more by @zefia on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.