SVG Text Masking
How do I make an svg text masking?
Using svg to do text mask. More browser support than CSS masking at the moment. Inspired by Lea Verou's article:. What is a svg text masking? How do you make a svg text masking? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.
SVG Text Masking - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Text Masking</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800'> <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! */ body { font-family: 'Open Sans', sans-serif;
}
svg { max-width: 100%; height: auto;
}
svg text { font-size: 5em; font-weight: 800;
}
#mask text { fill: url('#pattern');
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>
<svg id="mask" preserveAspectRatio=”xMinYMin meet” viewBox="0 0 737 109"> <defs> <pattern id="pattern" patternUnits="userSpaceOnUse" height="600" width="600"> <image xlink:href="http://subtlepatterns.com/patterns/congruent_pentagon.png" width="600" height="600" /> </pattern>
</defs> <text x="0" y="1em">SVG Text Masking</text>
</svg>
</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
SVG Text Masking - Script Codes CSS Codes
body { font-family: 'Open Sans', sans-serif;
}
svg { max-width: 100%; height: auto;
}
svg text { font-size: 5em; font-weight: 800;
}
#mask text { fill: url('#pattern');
}
Developer | Jon Christensen |
Username | JMChristensen |
Uploaded | August 03, 2022 |
Rating | 3.5 |
Size | 2,141 Kb |
Views | 44,528 |
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!
Name | Size |
SVG Button Animation | 4,333 Kb |
Raphael SVG Circle Timer | 2,216 Kb |
Image Cover | 3,914 Kb |
FitText.js Demo | 1,897 Kb |
Simple CSS Loaders | 3,841 Kb |
Custom Stagger Start Point | 4,001 Kb |
CSS Banners | 2,548 Kb |
SVG Circle Progress | 3,368 Kb |
3D Cube | 2,543 Kb |
Graphs and Snap.svg | 2,870 Kb |
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!
Name | Username | Size |
Myprofile | SoufianeAbid | 2,451 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
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. Hide Your IP Now!