Skip to content

Instantly share code, notes, and snippets.

@jens1101

jens1101/index.html

Created September 21, 2022 13:54
Show Gist options
  • Save jens1101/e7927b8cd1033536c0f62c9c65f7b273 to your computer and use it in GitHub Desktop.
Save jens1101/e7927b8cd1033536c0f62c9c65f7b273 to your computer and use it in GitHub Desktop.
Download ZIP
Recolouring elements using SVG filters
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<h1>Recolouring Using SVG Filters</h1>
<!-- Filter created inside of an invisible SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<filter id="recolourFilter" filterUnits="userSpaceOnUse">
<feFlood flood-color="red" result="flood" />
<feComposite in="flood" in2="SourceAlpha" operator="in" />
</filter>
</defs>
</svg>
<h2>Inline SVG</h2>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="70"
style="filter: url(#recolourFilter)"
>
<rect
x="10"
y="10"
width="50"
height="50"
rx="15"
fill="blue"
stroke="blue"
stroke-width="20"
stroke-opacity="0.5"
/>
<rect
x="140"
y="10"
width="50"
height="50"
rx="15"
fill="green"
stroke="green"
stroke-width="20"
stroke-opacity="0.5"
/>
</svg>
</div>
<h2>Image with SVG source</h2>
<img
style="filter: url(#recolourFilter)"
width="300"
src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg"
/>
<h2>Regular HTML text</h2>
<p style="filter: url(#recolourFilter)">
Hello <span style="opacity: 0.5">World</span>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment