SVG Text Masking

Developer
Jon Christensen
Size
2,141 Kb
Views
44,506

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 Previews
IQ Test

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');
}
SVG Text Masking - Script Codes
SVG Text Masking - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3.5
Size 2,141 Kb
Views 44,506
Do you need developer help for SVG Text Masking?

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!

Jon Christensen (JMChristensen) Script Codes
Name
CSS Transition End Sequence
Graphs and Snap.svg
Section Diagonal Areas
CSS Banners
Simple CSS Loaders
Responsive SVG Overlay
SVG Button Animation
FitText.js Demo
Animated gradient text
Image Cover
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!