Colored SVG background-image - Mask Method

Developer
Noah Blon
Size
2,328 Kb
Views
89,056
  1. Colored SVG background-image - Mask Method Previews
  2. Colored SVG background-image - Mask Method HTML Codes
  3. Colored SVG background-image - Mask Method CSS Codes

How do I make an colored svg background-image - mask method?

Using a CSS mask to color an SVG background imageYou can read about these in my blog: http://noahblon.com/coloring-svgs-in-css-background-images/. What is a colored svg background-image - mask method? How do you make a colored svg background-image - mask method? This script and codes were developed by Noah Blon on 24 June 2022, Friday.

Colored SVG background-image - Mask Method Previews
IQ Test

Colored SVG background-image - Mask Method - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colored SVG background-image - Mask Method</title> <link rel='stylesheet prefetch' href='http://codepen.io/noahblon/pen/8405559e87635018b34bac169a6a531e.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="icon icon-red"></div> <div class="icon icon-orange"></div> <div class="icon icon-yellow"></div> <div class="icon icon-green"></div> <div class="icon icon-blue"></div> <div class="icon icon-indigo"></div> <div class="icon icon-violet"></div><br/> <div class="icon icon-cyan"></div> <div class="icon icon-magenta"></div> <div class="icon icon-lime"></div> <div class="icon icon-olive"></div> <div class="icon icon-maroon"></div> <div class="icon icon-purple"></div><br/> <div class="icon icon-white"></div> <div class="icon icon-gray10"></div> <div class="icon icon-gray20"></div> <div class="icon icon-gray30"></div> <div class="icon icon-gray40"></div> <div class="icon icon-gray50"></div> <div class="icon icon-gray60"></div> <div class="icon icon-gray70"></div> <div class="icon icon-gray80"></div> <div class="icon icon-gray90"></div> <div class="icon icon-black"></div><br/> <div class="icon icon-gradient"></div> <div class="icon icon-kitten"></div> <div class="icon icon-animation"></div> </div>
</div>
</body>
</html>

Colored SVG background-image - Mask Method - Script Codes CSS Codes

.icon { width: 48px; height: 48px; display: inline-block; -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover;
}
.icon-red { background-color: red; }
.icon-orange { background-color: orange; }
.icon-yellow { background-color: yellow; }
.icon-green { background-color: green; }
.icon-blue { background-color: blue; }
.icon-indigo { background-color: indigo; }
.icon-violet { background-color: violet; }
.icon-cyan { background-color: cyan; }
.icon-magenta { background-color: magenta; }
.icon-lime { background-color: lime; }
.icon-olive { background-color: olive; }
.icon-maroon { background-color: maroon; }
.icon-purple { background-color: purple; }
.icon-white { background: white; }
.icon-gray10 { background: #e5e5e5; }
.icon-gray20 { background: #ccc; }
.icon-gray30 { background: #b2b2b2; }
.icon-gray40 { background: #999; }
.icon-gray50 { background: #7f7f7f; }
.icon-gray60 { background: #666; }
.icon-gray70 { background: #4c4c4c; }
.icon-gray80 { background: #333; }
.icon-gray90 { background: #191919; }
.icon-black { background: black; }
.icon-gradient { background: -webkit-radial-gradient(50% 50%, red, white); background: radial-gradient(50% 50%, red, white);
}
.icon-kitten { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/grumpy.jpeg) 50% 0%; background-size: cover;
}
.icon-animation { background: red; -webkit-animation: ❤ 6.66s infinite linear; animation: ❤ 6.66s infinite linear;
}
@-webkit-keyframes ❤ { 0% { background-color: red; } 16% { background-color: orange; } 32% { background-color: yellow; } 48% { background-color: green; } 60% { background-color: blue; } 72% { background-color: indigo; } 84% { background-color: violet; }
}
@keyframes ❤ { 0% { background-color: red; } 16% { background-color: orange; } 32% { background-color: yellow; } 48% { background-color: green; } 60% { background-color: blue; } 72% { background-color: indigo; } 84% { background-color: violet; }
}
/* LAYOUT */
html, body { height: 100%; }
body { background: #fcfcfc; margin: 0;
}
.wrap { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center;
}
Colored SVG background-image - Mask Method - Script Codes
Colored SVG background-image - Mask Method - Script Codes
Home Page Home
Developer Noah Blon
Username noahblon
Uploaded June 24, 2022
Rating 4
Size 2,328 Kb
Views 89,056
Do you need developer help for Colored SVG background-image - Mask Method?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Noah Blon (noahblon) Script Codes
Name
CSS Jellyfish
Burton Ball
3D CSS Text with Perspective
Cross-Browser Range Input With Solid Lower Fill
Sass-managed SVG Background-Image icons
Juggle
Planet
9 Pens
An Intro to SVG Animation with SMIL - Example 1
SVG Christmas Light Icon Animated with CSS
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!