SVG Text Color Gradient, Stroke, Mask
How do I make an svg text color gradient, stroke, mask?
What is a svg text color gradient, stroke, mask? How do you make a svg text color gradient, stroke, mask? This script and codes were developed by Uixcrazy.com on 06 November 2022, Sunday.
SVG Text Color Gradient, Stroke, Mask - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Text Color Gradient, Stroke, Mask</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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> <svg height="80" width="550"> <defs> <linearGradient id="colorGr01" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#f60;stop-opacity:1" /> <stop offset="100%" style="stop-coloR:#000;stop-opacity:1" /> </linearGradient> </defs> <text fill="url(#colorGr01)" font-size="60" font-family="Lucida Sans Unicode" x="0" y="50"> SVG Text Gradient</text>
</svg>
<svg width="100%" height="50"> <defs> <linearGradient id="colorGr02" y1="0" y2="1"> <stop stop-color="#ff0000" offset="0"/> <stop stop-color="#0000ff" offset="1"/> </linearGradient> </defs> <g> <text id="text" y="45" font-family="sans-serif" font-size="55" font-weight="bold" stroke-width="1" stroke="url(#colorGr02)" fill="none">SVG Stroke Gradient</text> </g>
</svg>
<svg width="800" height="220"> <defs> <pattern id="colorGr03" x="120" y="200" width="533" height="800" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <image xlink:href="http://afamily1.vcmedia.vn/dccccccccccccutCcn8JpntfJkDeu/Image/2016/01/Do-an/untitled_by_moramarth-d6by9hi-1a535.jpg" width="533" height="800" /> </pattern> <linearGradient id="colorGr04" y1="0" y2="1"> <stop stop-color="#eee" offset="0"/> <stop stop-color="#333" offset="1"/> </linearGradient> </defs> <text x="0" y="200" font-size="200" font-family="Impact" fill="url(#colorGr03)" stroke="url(#colorGr04)">SVG Mask</text>
</svg>
</body>
</html>
SVG Text Color Gradient, Stroke, Mask - Script Codes CSS Codes
body { padding: 30px;
}
Developer | Uixcrazy.com |
Username | uixcrazy |
Uploaded | November 06, 2022 |
Rating | 3 |
Size | 2,107 Kb |
Views | 18,216 |
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 |
JQuery - simple dialog | 4,665 Kb |
Ace editor demo | 2,058 Kb |
Bootstrap tooltip | 3,679 Kb |
Text Animation by jQuery | 3,295 Kb |
CSS3 Text Gradient | 2,138 Kb |
Reactjs - ImgFallBack - multi imgs | 5,168 Kb |
Reactjs - props - basic | 2,566 Kb |
Long Shadow Button | 3,550 Kb |
Css radio checkbox style | 3,484 Kb |
Show div when scroll up | 2,702 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 |
Webkit decolorize | Fivera | 1,675 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
GrcJS | Vino6 | 2,047 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Ghost | Mghayour | 11,738 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 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!