Comic Book FX Lettering with SVG Filters

Comic Book FX Lettering with SVG Filters.markdown

Comic Book FX Lettering with SVG Filters

SVG filters used to create comic book lettering for sound effects. Demos are contentEditable: click on the text and type to change it. Uses Nate Piekos’ excellent Badaboom font. Covered in an in-depth article on my blog.

Forked from Dudley Storey's Pen Comic Book FX Lettering with SVG Filters.

A Pen by Gregg Barber on CodePen.

License.

index.html

<section contenteditable="true">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 60">
<defs>
<filter id="outline">
  <feMorphology operator="dilate" in="SourceAlpha" radius="1.5"/>
  <feComposite in="SourceGraphic"/>
</filter>
</defs>
<text x="20" y="50" dx="0, -10, -8, -8" filter="url(#outline)" fill="orange">Wentz !</text>
</svg>
</section>
<section>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">
<defs>
<filter id="breakup">
  <feTurbulence result="TURBULENCE" baseFrequency=".7"
numOctaves="1" seed="1" />
   <feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="1.7" />
</filter>
</defs>
<text x="10" y="55" dy="0, -10, 8, -8" filter="url(#breakup)">Wentz !</text>
</svg>
</section>
<section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">
<defs>
  <filter id="shadow">
<feConvolveMatrix order="4,4" 
   kernelMatrix="
   1 0 0 0
   0 1 0 0
   0 0 1 0 
   0 0 0 1" in="SourceAlpha" result="bevel" />
<feOffset dx="1" dy ="1" in="bevel" result="offset" />
<feMerge>
   <feMergeNode in="offset" />
   <feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
    <pattern id="hexapolka" patternUnits="userSpaceOnUse" width="100" height="86" patternTransform="scale(.1)">
      <rect width="100%" height="86" fill="#F30" />
    	<circle cx="0" cy="44" r="16" id="dot" fill="white" />
    	<use xlink:href="#dot" transform="translate(48,0)" />
    	<use xlink:href="#dot" transform="translate(25,-44)" />
    	<use xlink:href="#dot" transform="translate(75,-44)" />
    	<use xlink:href="#dot" transform="translate(100,0)" />
    	<use xlink:href="#dot" transform="translate(75,42)" />
    	<use xlink:href="#dot" transform="translate(25,42)" />
    </pattern>
</defs>
<text x="30" y="50">WENTZ</text>
</svg>
</section>

style.css

@font-face {
		font-family: 'BadaboomBB';
		src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/badaboombb.woff2') format('woff2'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/badaboombb.woff') format('woff');
		font-style: normal;
		font-weight: 100;
		}
* { box-sizing: border-box; }
body { margin: 20; }
section { 
  min-height: 4vh; 
  display: flex;
  justify-content: center;
  align-content: center;
}
section:first-of-type {
  background: hsl(20,100%,50%);
}
section:last-of-type {
  background: hsl(20,100%,50%);
}
svg {
  width: 40%;
}
text { 
			font-size: 40px;
			font-family: BadaboomBB, script; 
}
section:last-of-type svg text {
  filter: url(#shadow);
  fill: url(#hexapolka);
}