Credit : Example 2-4 from the book ~ SVG Text Layout WORDS AS ART Author : Amelia Bellamy-Royds & Kurt Cagle
A Pen by Gregg Barber on CodePen.
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" width="6.5in" height="0.8in" viewBox="0 0 450 80"> | |
<title>Carson Wentz</title> | |
<style type="text/css"> | |
text { | |
font: bold 64px Veranda, Geneva, sans-serif; | |
text-decoration: underline; | |
fill: Brown; | |
stroke: darkBrown; | |
filter: url(#shine); | |
} | |
</style> | |
<defs> | |
<filter id="shine"> | |
<feGaussianBlur in="SourceGraphic" stdDeviation="2" | |
result="blur"/> | |
<feColorMatrix values="1.5 0 0 0.5 0 | |
0 1.5 0 0.5 0 | |
0 0 1.5 0.5 0 | |
0 0 0 1 -0.5" /> | |
<feOffset dx="-2.5" dy="-1.5" /> | |
<feComponentTransfer result="highlight"> | |
<feFuncA type="linear" amplitude="2" /> | |
</feComponentTransfer> | |
<feComposite in2="SourceGraphic" operator="atop" /> | |
</filter> | |
</defs> | |
<rect width="100%" height="100%" fill="Orange" /> | |
<text x="10" y="80%">Carson Wentz</text> | |
</svg> |
Credit : Example 2-4 from the book ~ SVG Text Layout WORDS AS ART Author : Amelia Bellamy-Royds & Kurt Cagle
A Pen by Gregg Barber on CodePen.
Practice with SVG text.