Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <svg class="scene" viewBox="0 0 800 600">
	<path class="ground" d="M100 432 H 715" stroke="rgb(35,35,35)" stroke-width="4" />

	<path class="wheelFrontB" fill="rgb(35,35,35)" d="M 517 430 A 1 1 0 0 0 517 360 A 1 1 0 0 0 517 430 M 517 407 L 523 422 Q 517 424 511 422 Z M 517 383 L 511 368 Q 517 366 523 368 Z M 505 395 L 490 401 Q 488 395 490 389 Z M 529 395 L 544 389 Q 546 395 544 401 Z M 508.5 403.5 L 502.2 418.3 Q 496.5 415.5 493.7 409.8 Z M 525.5 386.5 L 531.8 371.7 Q 537.5 374.5 540.3 380.2 Z M 508.5 386.5 L 493.7 380.2 Q 496.5 374.5 502.2 371.7 Z M 525.5 403.5 L 540.3 409.8 Q 537.5 415.5 531.8 418.3 Z">
		<animateTransform attributeName="transform" type="rotate" values="0 517 395; -360 517 395" dur="2.6s" repeatCount="indefinite" />
	</path>
	<path class="wheelBackB" fill="rgb(35,35,35)" d="M 640 430 A 1 1 0 0 0 640 360 A 1 1 0 0 0 640 430 M 640 407 L 646 422 Q 640 424 634 422 Z M 640 383 L 634 368 Q 640 366 646 368 Z M 628 395 L 613 401 Q 611 395 613 389 Z M 652 395 L 667 389 Q 669 395 667 401 Z M 631.5 403.5 L 625.2 418.3 Q 619.5 415.5 616.7 409.8 Z M 648.5 386.5 L 654.8 371.7 Q 660.5 374.5 663.3 380.2 Z M 631.5 386.5 L 616.7 380.2 Q 619.5 374.5 625.2 371.7 Z M 648.5 403.5 L 663.3 409.8 Q 660.5 415.5 654.8 418.3 Z">
		<animateTransform attributeName="transform" type="rotate" values="0 640 395; -360 640 395" dur="2.6s" repeatCount="indefinite" />
	</path>

	<g class="wagon">
		<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 0 2; 0 0" dur=".5s" repeatCount="indefinite" />
		<path class="axleF" fill="rgb(35,35,35)" d="M 512 354 H 552 V 386 A 1 1 0 0 1 512 386 Z" />
		<path class="axleB" fill="rgb(35,35,35)" d="M 632 354 H 672 V 386 A 1 1 0 0 1 632 386 Z" />
		<path class="chairBase" fill="rgb(35,35,35)" d="M 591 328 L 582 304 H 526 L 520 340 H 588 Z" />
		<path class="chairSeat" fill="rgb(107,107,107)" d="M 590 311 L 521 304 V 293 H 590 Z" />
		<path class="chairBackMetal" fill="rgb(35,35,35)" d="M 586 293 C 586 286 586 284 583 284 C 575 284 572 285 572 275 H 570 C 570 282 571 283 572 284 H 566 V 286 H 582 C 584 286 584 287 584 293 Z" />
		<path class="chairBack" fill="rgb(107,107,107)" d="M 566 272 A 1 1 0 0 0 574 272 V 259 A 1 1 0 0 0 566 259 Z" />
		<path class="wagonBody" fill="rgb(107,107,107)" d="M 476 350 H 715 V 311 H 605 C 596 311 596 316 596 320 C 596 326 588 326 588 326 C 582 326 579 330 579 339 H 476 Z" />
		<rect class="wagonBase" fill="rgb(35,35,35)" x="494" y="350" height="5" width="208" />
	</g>

	<g class="guy">
		<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 0 2; 0 0" dur=".5s" repeatCount="indefinite" />
		<path class="bootR" d="M 468 340 L 508 340 L 510 310 L 490 312 V 328 L 475 327 Z" fill="rgb(51,51,51)" />
		<path class="bootL" d="M 471 340 L 511 340 L 513 310 L 493 312 V 328 L 478 327 Z" fill="rgb(43,43,43)" />

		<path class="footHolder" d="M 476 340 Q 467 340 462 330 L 458 333 Q 465 345 476 345 Z" fill="rgba(35,35,35)" />
		<path class="wagonConnector" d="M 486 348 L 480 366 L 474 364 L 480 346 Z" fill="rgb(35,35,35)" />

		<path class="wagonPole" d="M 480 347 L 115 310 L 114 322 L 476 358 Z" fill="rgb(35,35,35)">
			<animate attributeName="d" values="
																				 M 480 347 L 115 310 L 114 322 L 476 358 Z; 
																				 M 480 347 L 115 315 L 114 327 L 476 358 Z; 
																				 M 480 347 L 115 310 L 114 322 L 476 358 Z" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
		</path>

		<path class="wagonPole" d="M 160 325 L 198 296" stroke="rgb(51,51,51)" stroke-width="4">
			<animate attributeName="d" values="
																				 M 160 325 L 198 300;
																				 M 160 322 L 198 290;
																				 M 160 325 L 198 300;
																				 " dur="0.7s" repeatCount="indefinite" />
		</path>
		<path class="waistcoatLower" d="M 512 320 L 512 280 L 567 279 L 567 293 H 521 V 316 Z" fill="rgb(35,35,35)" />
		<path class="pantR" d="M 491 313 V 279 C 491 273 491 269 500 269 L 537 270 L 537 279 L 515 281 C 510 282 510 287 510 292 L 510 311 Z" fill="rgb(59,59,59)" />
		<path class="pantL" d="M 494 312 V 282 C 494 276 494 272 503 272 L 537 273 L 537 280 L 518 283 C 513 285 513 290 513 294 L 513 311 Z" fill="rgba(67,67,67)" />

	</g>
	<path class="ropeHandHorseTop" d="M 444 255 Q 310 280 148 290" stroke="rgb(35,35,35)" stroke-width="3" fill="none">
		<animate attributeName="d" values="
																				 M 444 255 Q 310 280 148 290; 
																				 M 444 255 Q 310 280 149 300; 
																				 M 444 255 Q 310 280 148 290" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<path class="horseLegFrontRight" d="M 208 320 L 216 339 L 201 360 Q 198 364 199 369 L 208 406 L 216 424 L 229 415 L 224 406 L 218 369 L 245 338" fill="rgb(47,47,47)">
		<animate attributeName="d" values="
																				 M 208 320 L 216 339 L 201 360 Q 198 364 199 369 L 208 406 L 216 424 L 229 415 L 224 406 L 218 369 L 245 338;
																				 M 208 320 L 216 339 L 218 366 Q 216 370 215 377 L 206 410 L 197 430 L 216 430 L 220 416 L 233 375 L 245 338;
																				 M 208 320 L 216 339 L 236 375 Q 236 382 238 390 L 242 418 L 236 430 L 253 430 L 257 416 L 253 380 L 245 338;
																				 M 208 320 L 216 339 L 209 368 Q 207 374 214 381 L 233 410 L 242 425 L 254 413 L 246 405 L 227 372 L 245 338;
																				 M 208 320 L 213 339 L 206 368 Q 204 374 211 381 L 230 410 L 239 425 L 251 413 L 243 405 L 224 372 L 242 338;
																				 M 208 320 L 216 339 L 201 360 Q 198 364 199 369 L 208 406 L 216 424 L 229 415 L 224 406 L 218 369 L 245 338" dur="1.4s" begin="-0.7s" repeatCount="indefinite" />
	</path>

	<path class="horseLegFrontLeft" d="M 202 320 L 210 339 L 195 360 Q 192 364 193 369 L 202 406 L 210 424 L 223 415 L 218 406 L 212 369 L 239 338" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 202 320 L 210 339 L 195 360 Q 192 364 193 369 L 202 406 L 210 424 L 223 415 L 218 406 L 212 369 L 239 338;
																				 M 202 320 L 210 339 L 212 366 Q 210 370 209 377 L 200 410 L 191 430 L 210 430 L 214 416 L 227 375 L 239 338;
																				 M 202 320 L 210 339 L 230 375 Q 230 382 232 390 L 236 418 L 230 430 L 247 430 L 251 416 L 247 380 L 239 338;
																				 M 202 320 L 210 339 L 203 368 Q 201 374 208 381 L 227 410 L 236 425 L 248 413 L 240 405 L 221 372 L 239 338;
																				 M 202 320 L 207 339 L 200 368 Q 198 374 205 381 L 224 410 L 233 425 L 245 413 L 237 405 L 218 372 L 236 338;
																				 M 202 320 L 210 339 L 195 360 Q 192 364 193 369 L 202 406 L 210 424 L 223 415 L 218 406 L 212 369 L 239 338" dur="1.4s" repeatCount="indefinite" />
	</path>

	<path class="horseLegBackRight" d="M 320 338 Q 324 362 351 378 L 342 417 L 336 430 L 353 430 L 357 418 L 368 380 L 366 330" fill="rgb(47,47,47)">
		<animate attributeName="d" values="
																				 M 320 338 Q 324 362 351 378 L 342 417 L 336 430 L 353 430 L 357 418 L 368 380 L 366 330;
																				 M 320 338 Q 324 362 351 378 L 362 417 L 356 430 L 373 430 L 377 418 L 368 380 L 366 330;
																				 M 318 338 Q 320 362 355 378 L 345 405 L 349 423 L 362 414 L 359 405 L 373 376 L 366 330;
																				 M 318 338 Q 323 362 348 378 L 336 417 L 330 430 L 348 430 L 352 418 L 365 380 L 366 330;
																				 M 314 338 Q 320 362 342 378 L 325 417 L 318 430 L 335 430 L 342 418 L 360 380 L 366 330;
																				 M 320 338 Q 324 362 351 378 L 342 417 L 336 430 L 353 430 L 357 418 L 368 380 L 366 330" dur="1.4s" repeatCount="indefinite" />
	</path>

	<path class="horseLegBackLeft" d="M 326 338 Q 330 362 357 378 L 348 417 L 342 430 L 359 430 L 363 418 L 374 380 L 366 330" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 326 338 Q 330 362 357 378 L 348 417 L 342 430 L 359 430 L 363 418 L 374 380 L 366 330;
																				 M 326 338 Q 330 362 357 378 L 368 417 L 362 430 L 379 430 L 383 418 L 374 380 L 366 330;
																				 M 324 338 Q 326 362 361 378 L 351 405 L 355 423 L 368 414 L 365 405 L 379 376 L 366 330;
																				 M 324 338 Q 329 362 354 378 L 342 417 L 336 430 L 354 430 L 358 418 L 371 380 L 366 330;
																				 M 320 338 Q 326 362 348 378 L 331 417 L 324 430 L 341 430 L 348 418 L 366 380 L 366 330;
																				 M 326 338 Q 330 362 357 378 L 348 417 L 342 430 L 359 430 L 363 418 L 374 380 L 366 330" dur="1.4s" begin="-0.7s" repeatCount="indefinite" />
	</path>
	<path class="horseBody" d="M 371 312 Q 375 270 293 269 Q 193 271 198 308 Q 203 347 283 349 Q 323 342 344 343 Q 370 346 371 312" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 371 312 Q 375 270 293 269 Q 193 271 198 308 Q 203 347 283 349 Q 323 342 344 343 Q 370 346 371 312; 
																				 M 371 307 Q 375 265 293 269 Q 193 266 198 303 Q 203 342 283 343 Q 323 337 344 338 Q 370 341 371 307; 
																				 M 371 312 Q 375 270 293 269 Q 193 271 198 308 Q 203 347 283 349 Q 323 342 344 343 Q 370 346 371 312" dur="0.7s" begin="-0.35" repeatCount="indefinite" calcMode="spline" keyTimes="0; 0.5; 1" keySplines="0 0.33 0.66 1; 0.1 0.7 0.9 0.1" />
	</path>

	<path class="horseHead" d="M 300 269 Q 239 261 166 233 Q 152 229 149 240 Q 144 250 141 266 L 134 298 L 153 311 L 181 279 L 202 320 Z" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 300 269 Q 239 261 166 233 Q 152 229 149 240 Q 144 250 141 266 L 131 303 L 153 311 L 181 279 L 202 320 L 205 325 Z; 
																				 M 300 269 Q 239 261 160 238 Q 146 234 143 252 Q 141 260 140 270 L 134 310 L 159 317 L 175 288 L 202 320 L 205 325 Z; 
																				 M 300 269 Q 239 261 166 233 Q 152 229 149 240 Q 144 250 141 266 L 131 303 L 153 311 L 181 279 L 202 320 L 205 325 Z" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>
<g class="ears">
	<animateTransform attributeName="transform" type="translate" values="0 0; -2 4; 0 0" dur="0.7s" begin="-0.35" repeatCount="indefinite" />
	<path class="horseEarR" d="M 155 242 Q 171 222 148 215 Z" fill="rgb(67,67,67)">
<!-- 		<animate attributeName="d" values="
																				 M 155 242 Q 177 231 160 214 Z; 
																				 M 155 242 Q 177 231 160 214 Z;  
																				 M 155 242 Q 171 222 148 215 Z; 
																				 M 155 242 Q 171 222 148 215 Z;
																				 M 155 242 Q 177 231 160 214 Z; 
																				 M 155 242 Q 177 231 160 214 Z" dur="2.8s" begin="-0.7s" repeatCount="indefinite" /> -->
	</path>

	<path class="horseEarL" d="M 147 245 Q 169 230 137 218 Z" fill="rgb(67,67,67)">
<!-- 		<animate attributeName="d" values="
																				 M 147 250 Q 172 239 150 220 Z;  
																				 M 147 250 Q 172 239 150 220 Z;
																				 M 147 245 Q 169 230 137 218 Z; 
																				 M 147 245 Q 169 230 137 218 Z; 
																				 M 147 250 Q 172 239 150 220 Z; 
																				 M 147 250 Q 172 239 150 220 Z" dur="2.8s" begin="-0.6s" repeatCount="indefinite" /> -->
	</path>
	</g>
	<path class="horseTail" d="M 366 288 Q 390 306 388 337 Q 387 357 370 382 Q 375 371 373 343 Q 371 328 369 314" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 366 288 Q 390 306 388 337 Q 387 357 370 382 Q 375 371 373 343 Q 371 328 369 314; 
																				 M 366 293 Q 395 310 391 336 Q 387 357 400 385 Q 375 371 376 330 Q 375 318 369 314; 
																				 M 366 288 Q 390 306 388 337 Q 387 357 370 382 Q 375 371 373 343 Q 371 328 369 314" dur="1.4s" repeatCount="indefinite" />
	</path>

	<path class="ropeWagonHorse" d="M 477 364 Q 387 342 276 305" stroke="rgb(35,35,35)" stroke-width="3" fill="none">
		<animate attributeName="d" values="
																				 M 477 364 Q 387 342 276 305; 
																				 M 477 364 Q 387 342 276 310; 
																				 M 477 364 Q 387 342 276 305" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseFrontMid" d="M 277 304 L 190 301" stroke="rgb(35,35,35)" stroke-width="6" fill="none">
		<animate attributeName="d" values="
																				 M 277 304 L 190 301; 
																				 M 277 308 L 189 309; 
																				 M 277 304 L 190 301" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseMidBtm" d="M 275 302 L 277 346" stroke="rgb(35,35,35)" stroke-width="5" fill="none">
		<animate attributeName="d" values="
																				 M 275 300 L 275 344; 
																				 M 275 304 L 275 348; 
																				 M 275 300 L 275 344" dur="0.7s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseMidTop" d="M 275 302 L 277 346" stroke="rgb(35,35,35)" stroke-width="8" fill="none">
		<animate attributeName="d" values="M 275 301 L 277 264; 
																				 M 275 305 L 277 266; 
																				 M 275 301 L 277 264" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseNeckMidTop" d="M 255 302 L 257 346" stroke="rgb(35,35,35)" stroke-width="4" fill="none">
		<animate attributeName="d" values="
																				 M 220 306 L 224 254; 
																				 M 220 305 L 224 253; 
																				 M 220 306 L 224 254" dur="0.7s" begin="-0.05s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseNeckFrontTop" d="M 173 293 L 173 235" stroke="rgb(35,35,35)" stroke-width="4" fill="none">
		<animate attributeName="d" values="
																				 M 175 290 L 164 238; 
																				 M 180 283 L 168 236; 
																				 M 175 290 L 164 238" dur="0.7s" begin="0s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseFaceFrontTop" d="M 166 237 L 146 303" stroke="rgb(35,35,35)" stroke-width="4" fill="none">
		<animate attributeName="d" values="
																				 M 162 237 L 146 301; 
																				 M 167 233 L 145 295; 
																				 M 162 237 L 146 301" dur="0.7s" begin="0s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseFaceFrontTop2" d="M 168 237 L 150 303" stroke="rgb(35,35,35)" stroke-width="4" fill="none">
		<animate attributeName="d" values="
																				 M 163 237 L 150 301; 
																				 M 168 233 L 150 295; 
																				 M 163 237 L 150 301" dur="0.7s" begin="0s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseBlinder" d="M 140 266 L 157 272" stroke="rgb(35,35,35)" stroke-width="12" fill="none">
		<animate attributeName="d" values="
																				 M 139 267 L 157 272; 
																				 M 141 263 L 158 269; 
																				 M 139 267 L 157 272" dur="0.7s" begin="0s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseMouthTop" d="M 135 293 L 168 300" stroke="rgb(35,35,35)" stroke-width="4" fill="none">
		<animate attributeName="d" values="
																				 M 134 289 L 164 298; 
																				 M 136 294 L 168 302; 
																				 M 134 289 L 164 298" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<path class="ropeHorseMouthBtm" d="M 135 293 L 168 300" stroke="rgb(35,35,35)" stroke-width="4" fill="none">
		<animate attributeName="d" values="
																				 M 133 291 L 163 300; 
																				 M 135 296 L 166 304; 
																				 M 133 291 L 163 300" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<path class="ropeHandHorseBtm" d="M 452 268 Q 387 342 148 294" stroke="rgb(35,35,35)" stroke-width="3" fill="none">
		<animate attributeName="d" values="
																				 M 452 266 Q 270 305 148 295; 
																				 M 452 266 Q 270 305 149 300; 
																				 M 452 266 Q 270 305 148 295" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<g>

		<path class="waistcoatUpper" d="M 567 282 V 260 Q 567 223 533 223 L 537 282 Z" fill="rgb(35,35,35)">
			<animate attributeName="d" values="
																				 M 567 282 V 260 Q 567 223 533 223 L 537 284 Z; 
																				 M 567 282 V 260 Q 567 223 532 224 L 537 284 Z; 
																				 M 567 282 V 260 Q 567 223 533 223 L 537 284 Z" dur=".4s" begin="0s" repeatCount="indefinite" />
		</path>

		<path class="neck" d="M 533 223 L 524 223 L 525 235 L 534 235 Z" fill="rgb(155,155,155)">
			<animateTransform attributeName="transform" type="translate" values="0 0; -1 1; 0 0" dur=".4s" repeatCount="indefinite" />
		</path>
	</g>
	<g class="head">
		<animateTransform attributeName="transform" type="rotate" values="0 520 230; -5 538 230; 0 520 230" dur=".4s" repeatCount="indefinite" />
		<path class="hair" d="M 527 239 L 509 248 L 509 246 L 506 246 L 506 234 L 522 231 L 520 216 L 505 216 L 505 212 L 521 210 L 523 218 L 526 218 L 527 221 L 525 224 Z" fill="rgb(203,203,203)" />
		<path class="face" d="M 507 234 L 506 215 L 520 216 L 522 231 Z" fill="rgb(155,155,155)" />

		<path class="eyeR" d="M 504 227 A 1 1 0 0 0 510 227 Z" fill="rgb(203,203,203)" />
		<path class="eyelidR" d="M 504 227 A 1 1 0 0 1 510 227 Z" fill="rgba(155,155,155)" />
		<path class="pupilR" d="M 505 227 A 1 1 0 0 0 508 227 Z" fill="rgb(35,35,35)" />

		<circle class="eyeL" r="5" cx="515" cy="224" fill="rgb(203,203,203)" />
		<path class="pupilL" d="M 515 221 A 1 1 0 0 0 515 228 A 1 1 0 0 0 515 221" fill="rgb(35,35,35)" />
		<path class="eyelidLTop" d="M 512 219 C 513 217 517 217 518 219 Z" fill="rgba(155,155,155)">
			<animate attributeName="d" values="M 510 224 C 510 217 520 217 520 224 Z; M 512 219 C 513 217 517 217 518 219 Z; M 512 219 C 513 217 517 217 518 219 Z; M 512 219 C 513 217 517 217 518 219 Z; M 510 224 C 510 217 520 217 520 224 Z" dur="0.7s" begin="0s" repeatCount="indefinite" />
		</path>
		<path class="eyelidLBtm" d="M 510 224 C 510 231 520 231 520 224Z" fill="rgba(155,155,155)">
			<animate attributeName="d" values="M 510 224 C 510 231 520 231 520 224Z; M 512 228 C 513 230 517 230 518 228Z; M 512 228 C 513 230 517 230 518 228Z; M 512 228 C 513 230 517 230 518 228Z; M 512 228 C 513 230 517 230 518 228Z; M 510 224 C 510 231 520 231 520 224Z" dur="0.7s" begin="0s" repeatCount="indefinite" />
		</path>
	</g>
	<path class="armL" d="M 535 251 L 504 266 L 458 265 V 252 L 501 253 L 535 236 Z" fill="rgb(35,35,35)" />
	<path class="cuffL" d="M 458 252 H 452 V 265 H 458 Z" fill="rgba(203,203,203)" />
	<path class="handL" d="M 452 253 L 444 253 L 446 255 L 431 261 L 439 268 L 452 264 Z" fill="rgb(155,155,155)" />

	<!-- Wheels in front -->
	<path class="wheelFrontF" fill="rgb(59,59,59)" d="M 537 430 A 1 1 0 0 0 537 360 A 1 1 0 0 0 537 430 M 537 407 L 543 422 Q 537 424 531 422 Z M 537 383 L 531 368 Q 537 366 543 368 Z M 525 395 L 510 401 Q 508 395 510 389 Z M 549 395 L 564 389 Q 566 395 564 401 Z M 528.5 403.5 L 522.2 418.3 Q 516.5 415.5 513.7 409.8 Z M 545.5 386.5 L 551.8 371.7 Q 557.5 374.5 560.3 380.2 Z M 528.5 386.5 L 513.7 380.2 Q 516.5 374.5 522.2 371.7 Z M 545.5 403.5 L 560.3 409.8 Q 557.5 415.5 551.8 418.3 Z M 537 389 A 1 1 0 0 1 537 401 A 1 1 0 0 1 537 389">
		<animateTransform attributeName="transform" type="rotate" values="0 537 395; -360 537 395" dur="2.6s" repeatCount="indefinite" />
	</path>

	<path class="wheelBackF" fill="rgb(59,59,59)" d="M 660 430 A 1 1 0 0 0 660 360 A 1 1 0 0 0 660 430 M 660 407 L 666 422 Q 660 424 654 422 Z M 660 383 L 654 368 Q 660 366 666 368 Z M 648 395 L 633 401 Q 631 395 633 389 Z M 672 395 L 687 389 Q 689 395 687 401 Z M 651.5 403.5 L 645.2 418.3 Q 639.5 415.5 636.7 409.8 Z M 668.5 386.5 L 674.8 371.7 Q 680.5 374.5 683.3 380.2 Z M 651.5 386.5 L 636.7 380.2 Q 639.5 374.5 645.2 371.7 Z M 668.5 403.5 L 683.3 409.8 Q 680.5 415.5 674.8 418.3 Z M 660 389 A 1 1 0 0 1 660 401 A 1 1 0 0 1 660 389">
		<animateTransform attributeName="transform" type="rotate" values="0 660 395; -360 660 395" dur="2.6s" repeatCount="indefinite" />
	</path>

</svg>
!

CSS 

              
                body{
	background:#666;
}
svg{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:90vw;
	max-width:800px;
}
!

JS
!
999px

Console