Experiment - SCSS SVG Background Image with Variables

Working through some solutions to make these work, especially the hover transition in example #1. Any input/suggestions welcome. What is a experiment - scss svg background image with variables How do you make a experiment - scss svg background image with variables? This script and codes were developed by Chris Holder on 24 August 2021, Tuesday.

How do I make an experiment - scss svg background image with variables?
  1. Experiment - SCSS SVG Background Image with Variables Previews
  2. Experiment - SCSS SVG Background Image with Variables HTML Codes
  3. Experiment - SCSS SVG Background Image with Variables CSS Codes
Experiment - SCSS SVG Background Image with Variables Previews

Experiment - SCSS SVG Background Image with Variables HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Experiment - SCSS SVG Background Image with Variables</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      [class*="ex-"] {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  margin: 10px 0;
}

/*
//  SVG 
//  Kinda Works! But needs to be much much smoother. 
*/
.ex-1, p {
  transition: all 1s ease-in-out;
}

.ex-1 {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px"><rect fill="#3498db" width="7.5" height="7.5"/><rect fill="white" x="7.5" width="7.5" height="7.5"/><rect fill="white" y="7.5" width="7.5" height="7.5"/><rect fill="#b6daf2" x="7.5" y="7.5" width="7.5" height="7.5"/></svg>');
}
.ex-1 p {
  background: #e74c3c;
  width: 50%;
  margin: 150px auto;
  padding: 20px 0;
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 4px 4px 0 0 #c0392b;
}
.ex-1:hover {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="152px" height="152px"><rect fill="#2ecc71" width="76" height="76"/><rect fill="white" x="76" width="76" height="76"/><rect fill="white" y="76" width="76" height="76"/><rect fill="#a8ebc4" x="76" y="76" width="76" height="76"/></svg>');
}
.ex-1:hover p {
  background: #9b59b6;
  box-shadow: 4px 4px 0 0 #8e44ad;
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="examples">
  <div class="ex-1"><p>HOVER ME</p></div>
</div>
  
  
</body>
</html>

Experiment - SCSS SVG Background Image with Variables CSS Codes

[class*="ex-"] {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  margin: 10px 0;
}

/*
//  SVG 
//  Kinda Works! But needs to be much much smoother. 
*/
.ex-1, p {
  transition: all 1s ease-in-out;
}

.ex-1 {
  background: url('data:image/svg+xml;utf8,');
}
.ex-1 p {
  background: #e74c3c;
  width: 50%;
  margin: 150px auto;
  padding: 20px 0;
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 4px 4px 0 0 #c0392b;
}
.ex-1:hover {
  background: url('data:image/svg+xml;utf8,');
}
.ex-1:hover p {
  background: #9b59b6;
  box-shadow: 4px 4px 0 0 #8e44ad;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.