<!-- 
- Single file SVG animation
- * can be used as CSS backgroud
- * total size is less than 3kb!
-->

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice" viewBox="24 105 156 95" >
    <defs>
        <style type="text/css">
            @-webkit-keyframes rotate {
            0% {-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0)}
            100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg)}
            }
            @keyframes rotate {
            0% {-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0)}
            100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg)}
            }
            .top-outer {
            -webkit-transform-origin: 73px 69px;-ms-transform-origin: 73px 69px;transform-origin: 73px 69px:
            -webkit-animation: rotate 30s linear infinite;
            animation: rotate 30s linear infinite;
            }
            .top-inner {
            -webkit-transform-origin: 73px 69px;-ms-transform-origin: 73px 69px;transform-origin: 73px 69px:
            -webkit-animation: rotate 20s linear infinite;
            animation: rotate 20s linear infinite;
            }
            .bottom-outer {
            -webkit-transform-origin: 134px 222px;-ms-transform-origin: 134px 222px;transform-origin: 134px 222px:
            -webkit-animation: rotate 30s linear infinite;
            animation: rotate 30s linear infinite;
            }
            .bottom-inner {
            -webkit-transform-origin: 134px 222px;-ms-transform-origin: 134px 222px;transform-origin: 134px 222px:
            -webkit-animation: rotate 20s linear infinite;
            animation: rotate 20s linear infinite;
            }
        </style>
    </defs>
    <rect x="0" y="0" width="300" height="300" fill="#E22227"/>
    <path class="top-outer" fill="#EF8716" stroke="#371300" stroke-width="1" d="M68 1c23,0 67,17 69,39 4,38 5,52 -5,69 -20,36 -68,46 -120,-9 -27,-28 -7,-101 56,-99z"/>
    <path class="top-inner" fill="#537571" stroke="#DCB467" stroke-width="1" d="M69 22c33,-7 52,21 54,37 3,26 -1,28 -8,40 -15,25 -48,25 -85,-14 -19,-20 -4,-53 39,-63z"/>
    <path class="bottom-outer" fill="#DCB467" stroke="#371300" stroke-width="1" d="M158 158c30,13 56,50 44,75 -9,18 -22,46 -42,55 -20,10 -48,2 -73,-19 -29,-25 -27,-55 -9,-79 17,-22 43,-48 80,-32z"/>
    <path class="bottom-inner" fill="#263D56" stroke="#537571" stroke-width="1" d="M136 180c32,-9 45,13 46,29 3,27 8,29 0,42 -14,25 -52,24 -79,0 -21,-18 -2,-61 33,-71z"/>
</svg>
/* Element positioning */
body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
svg {
	width: 100%;
	height: 101vh;
}
// No JS is needed

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.