Fun with SVG Text Fills

Developer
John Stammerman
Size
2,805 Kb
Views
38,456
  1. Fun with SVG Text Fills Previews
  2. Fun with SVG Text Fills HTML Codes
  3. Fun with SVG Text Fills CSS Codes

How do I make an fun with svg text fills?

Experimentation with using an image as an SVG pattern fill.. What is a fun with svg text fills? How do you make a fun with svg text fills? This script and codes were developed by John Stammerman on 23 July 2022, Saturday.

Fun with SVG Text Fills Previews
IQ Test

Fun with SVG Text Fills - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fun with SVG Text Fills</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> <h1> SVG Text Fill Animation <small>Hover on the headings to watch them dance.</small>
</h1>
<svg height="400px" width="96%"> <defs> <pattern id="img0" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img1" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(10)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img2" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(20)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img3" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(30)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img4" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(40)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img5" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(50)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img6" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(60)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img7" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(70)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img8" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(80)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> <pattern id="img9" patternUnits="userSpaceOnUse" width="640" height="640" viewbox="0 0 640 640" patternTransform="rotate(90)"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/52_street.jpg" width="640" height="640" /> </pattern> </defs> <text class="hd1" x="0" y="1em">Proceed</text> <text class="hd2" x="0" y="2.5em">With Caution</text> <text x="0" y="4em">Work Zone Ahead</text>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Fun with SVG Text Fills - Script Codes CSS Codes

body { background: #222; color: #777; font-family: arial, sans-serif; padding: 2em;
}
text { fill: url(#img0); font-size: 5em; font-weight: 400; stroke: #f2ce70; stroke-width: 1; text-shadow: 0 0 0.1em #000;
}
text.hd1 { font-size: 9em; font-weight: 900; text-transform: uppercase;
}
text.hd2 { font-size: 6em; font-weight: 700; text-transform: uppercase;
}
text:hover { animation: fill 4s infinite;
}
small { color: #000;
}
@keyframes fill { 0% { fill: url(#img0); } 2% { fill: url(#img1); } 4% { fill: url(#img2); } 6% { fill: url(#img3); } 8% { fill: url(#img4); } 10% { fill: url(#img5); } 12% { fill: url(#img6); } 14% { fill: url(#img7); } 16% { fill: url(#img8); } 18% { fill: url(#img9); } 20% { fill: url(#img0); } 22% { fill: url(#img1); } 24% { fill: url(#img2); } 26% { fill: url(#img3); } 28% { fill: url(#img4); } 30% { fill: url(#img5); } 32% { fill: url(#img6); } 34% { fill: url(#img7); } 36% { fill: url(#img8); } 38% { fill: url(#img9); } 40% { fill: url(#img0); } 42% { fill: url(#img1); } 44% { fill: url(#img2); } 46% { fill: url(#img3); } 48% { fill: url(#img4); } 50% { fill: url(#img5); } 52% { fill: url(#img6); } 54% { fill: url(#img7); } 56% { fill: url(#img8); } 58% { fill: url(#img9); } 60% { fill: url(#img0); } 62% { fill: url(#img1); } 64% { fill: url(#img2); } 66% { fill: url(#img3); } 68% { fill: url(#img4); } 70% { fill: url(#img5); } 72% { fill: url(#img6); } 74% { fill: url(#img7); } 76% { fill: url(#img8); } 78% { fill: url(#img9); } 80% { fill: url(#img0); } 82% { fill: url(#img1); } 84% { fill: url(#img2); } 86% { fill: url(#img3); } 88% { fill: url(#img4); } 90% { fill: url(#img5); } 92% { fill: url(#img6); } 94% { fill: url(#img7); } 96% { fill: url(#img8); } 98% { fill: url(#img9); } 100% { fill: url(#img0); }
}
Fun with SVG Text Fills - Script Codes
Fun with SVG Text Fills - Script Codes
Home Page Home
Developer John Stammerman
Username jstam
Uploaded July 23, 2022
Rating 3
Size 2,805 Kb
Views 38,456
Do you need developer help for Fun with SVG Text Fills?

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!

John Stammerman (jstam) Script Codes
Name
Foundation 6 example marku
Burpee Equivalent Calculator
Hidden Menu Animation
Select field variations across browsers
Hard Work Progress Chart
CSS3 dry-erase clipboard
Pulse animation after moving list items
SVG gaussian blur filter on background image
Jstam.com Home Page
LESS CSS multiple background gradient mixin
Create amazing web content 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!