CodePen

HTML

            
              <div></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              // Set the size of the logo
@size : 200px;

div {
  width: @size;
  height: @size;
  border-radius: 0 50% 50% 0; 
  background: silver;
  margin: 50px auto;
  background: 
    linear-gradient(#ffd300 100%, transparent 0%),
    linear-gradient(#ffab00 100%, transparent 0%),
    linear-gradient(#ff6c00 100%, transparent 0%),
    linear-gradient(#ff0000 100%, transparent 0%);
  background-repeat: no-repeat;
  background-size: 85% 22%, 70% 22%, 100% 22%, 85% 22%;
  background-position: 100% 0, 100% 33.33%, 100% 66.66%, 100% 100%;
}

body {
  background: #222;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................