CodePen

HTML

            
              <ul class="custom">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body { 
  background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-100 -50 400 200' preserveAspectRatio='xMidYMid meet'>\
    <rect height='100' width='200' fill='blue'/>\
    </svg>");
 
  background-size:cover;
  background-repeat:no-repeat;
}
ul.custom {
  list-style:image;
  list-style-image:url(
    "data:image/svg+xml;charset=UTF-8,\
    <svg xmlns='http://www.w3.org/2000/svg' \
    width='100%' height='100%' \
    viewBox='-5 -5 10 10' preserveAspectRatio='xMidYMid meet'>\
    <circle r='4' fill='blue' stroke='green' stroke-width='2'/>\
    </svg>"
  );
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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