<div class="background-wrap single-square" data-phase="1"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> <defs> <pattern id="boxCombo" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"> <rect x="32.3" y="57.3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 32.3208 163.3887)" class="box1" width="35.4" height="35.4" /> <rect x="57.3" y="32.3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 92.6779 138.39)" class="box2" width="35.4" height="35.4" /> <rect x="7.3" y="32.3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 7.322 103.0315)" class="box3" width="35.4" height="35.4" /> <rect x="32.3" y="7.3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 67.6793 78.0327)" class="box4" width="35.4" height="35.4" /> </pattern> <pattern id="squares" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" > <g class="group1" transform="translate(0 0)"> <rect x="0" y="0" width="100" height="100" style="fill: url(#boxCombo);" /> </g> <g class="group2" transform="translate(50 -50)"> <rect x="0" y="0" width="100" height="100" style="fill: url(#boxCombo);" /> </g> <g class="group3" transform="translate(50 50)"> <rect x="0" y="0" width="100" height="100" style="fill: url(#boxCombo);" /> </g> <g class="group4" transform="translate(-50 -50)"> <rect x="0" y="0" width="100" height="100" style="fill: url(#boxCombo);" /> </g> <g class="group5" transform="translate(-50 50)"> <rect x="0" y="0" width="100" height="100" style="fill: url(#boxCombo);" /> </g> </pattern> </defs> <rect class="patternWrap" x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#squares);" /> </svg></div>xxxxxxxxxx@color1 : #0084bd; // Darker Blue@color2 : #ff3004; // Red@color3 : #03bbf1; // Cyan@color4 : #a68f49; // Gold@color5 : #669edc; // Med Blue@color6 : #BADA55;@transition : all 1s ease;html, body {height: 100%}.squares(@color){ .box1{fill: @color;} .box2{fill: lighten(@color, 20%)} .box3{fill: spin(darken(@color, 10%), 10deg)} .box4{fill: spin(lighten(@color, 10%), 10deg)}}.background-wrap { width: 100%; height: 100%; transition: @transition; rect { transition: @transition; transform-origin: center center; } &[data-phase="1"]{ background-color: @color1; .squares(@color1); } &[data-phase="2"]{ background-color: @color2; .squares(@color2); } &[data-phase="3"]{ background-color: @color3; .squares(@color3); } &[data-phase="4"]{ background-color: @color4; .squares(@color4); } &[data-phase="5"]{ background-color: @color5; .squares(@color5); } &[data-phase="6"]{ background-color: @color6; .squares(@color6); }}.single-square { rect[class^="box"]{ transition: @transition; transform-origin: center center; transform-style: preserve-3d; } &[data-phase="2"], &[data-phase="4"], &[data-phase="6"] { rect[class^="box"]{ transform: rotateZ(135deg); } } &[data-phase="1"], &[data-phase="3"], &[data-phase="5"] { rect[class^="box"]{ transform: rotateZ(45deg); } }}xxxxxxxxxxvar container = $(".background-wrap"), c = 2, max = 6; setInterval(function(){advancePhase();}, 2000); function advancePhase(){ if(c > max){ c = 1;} container.attr("data-phase", c); c++; }