Skip to content

Instantly share code, notes, and snippets.

@taivare
Created March 10, 2016 19:33
Show Gist options
  • Save taivare/2f0be46bf19d3e2858cd to your computer and use it in GitHub Desktop.
Save taivare/2f0be46bf19d3e2858cd to your computer and use it in GitHub Desktop.
SVG ' Carson Wentz '
<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>

SVG ' Carson Wentz '

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.

License.

@taivare
Copy link
Author

taivare commented Mar 10, 2016

Practice with SVG text.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment