SVG - Color Matrix applied to map

Developer
Alexandre Masy
Size
2,264 Kb
Views
20,240
  1. SVG - Color Matrix applied to map Previews
  2. SVG - Color Matrix applied to map HTML Codes
  3. SVG - Color Matrix applied to map CSS Codes

How do I make an svg - color matrix applied to map?

What is a svg - color matrix applied to map? How do you make a svg - color matrix applied to map? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.

SVG - Color Matrix applied to map Previews
IQ Test

SVG - Color Matrix applied to map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG - Color Matrix applied to map</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="picture"> <img src="https://maps.googleapis.com/maps/api/staticmap?center=Marocco&zoom=2&scale=2&size=600x300&maptype=roadmap&format=png&visual_refresh=true"> <img src="https://c.tile.openstreetmap.org/2/1/1.png">
</div>
<svg style="display:none"> <filter id="svg-yp"> <feColorMatrix type="matrix" values="0.20 0.20 0.15 0.00 0 0.15 0.20 0.15 0.10 0 0.15 0.20 0.30 0.15 0 0.00 0.00 0.00 0.80 0 " />
</svg>
</body>
</html>

SVG - Color Matrix applied to map - Script Codes CSS Codes

.picture { border: 5px solid #5b6992; background: #5b6992; position: relative;
}
.square { background: #5b6992; width: 100%; height: 100px;
}
img { display: block; margin: 0px; filter: url(#svg-yp); /*filter: saturate(0%) hue-rotate(-150deg) brightness(80%) invert(100%);*/ opacity: 1; background-color: #5b6992; zoom: 1;
}
.picture::after { /*content:'';*/ display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #5b6992; opacity: .5;
}
SVG - Color Matrix applied to map - Script Codes
SVG - Color Matrix applied to map - Script Codes
Home Page Home
Developer Alexandre Masy
Username alexandremasy
Uploaded October 01, 2022
Rating 3
Size 2,264 Kb
Views 20,240
Do you need developer help for SVG - Color Matrix applied to map?

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!

Alexandre Masy (alexandremasy) Script Codes
Name
Ideation-icon
Yp-loader
Conditional Library Loading
AngularJS - UI Router - Example 1
Graphic-icon
Tiles - Triangles
Pair Game
Bullet Loader
Alexandremasy-logo
A Type Scale
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!