In two previous articles I’ve talked about using SVG to make comic book speech bubbles; in this one, I’m going to look at text effects associated with lettering for sound effects, which are more broadly applicable to web design.

Joined Outlined Letters

Stroking the exterior of letterforms is a fairly well-established technique in web design: Webkit has a property to do so; you can also fake it with text-shadow, or use SVG stroke. However, none of those techniques allow you to do joined stroked letterforms, shown in the example at the top, where the stroke goes around the shared outline of letters that overlap. To achieve that, we have to use SVG filters:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 500">
    <defs>
        <filter id="outline">
            <feMorphology operator="dilate" in="SourceAlpha" radius="3"/>
            <feComposite in="SourceGraphic"/>
        </filter>
    </defs>
    <text fill="yellow" filter="url(#outline)" x="0" y="100" 
        dx="0, -10, -10, -12">
        BOOM
    </text>
</svg>

The <text> element (sized to 120px with CSS) uses staggered dx values, explained in the last article, to draw the letters together, while the <filter> strokes the joined outline.

I’ll have more to say about the dilate filter in a future article: for now, you might want to experiment with changing the thickness of the stroke by altering the radius value of the filter in the associated CodePen demo.

Roughened Text

Sound effect lettering is also often drawn distorted or jagged to enhance the effect: think of the visual association of a sound like KERR-UNCH!, for example. We can achieve a similar result with SVG:

<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="50" dy="0, -10, 8, -8" filter="url(#breakup)">WHAM</text>
</svg>

This time the text is staggered vertically with dy values. Again, I’ll have more to say about the feTurbulence filter in a future article. For now, I’d suggest playing with the baseFrequency and scale values in the CodePen demo: these two values control how “fragmented” the roughness is, and the size of the fragment details.

Ben-Day Dots

In a previous article I’ve demonstrated a halftone effect with SVG. Officially, halftone uses dots or shapes that can change size and distribution, whereas Ben-Day dots, the variation I’m using here, must always remain the same size and spacing.

The Ben-Day printing process was cheaper, making it ideal for comics; over time, the effect also became popularized by artists like Roy Lichtenstein, and associated with the “pop art” movement.

To create this effect, I started by creating a series of circle elements with their centers at the points of a hexagon. Fit on the edges of a <pattern> element, these circles would create the fill, with the addition of a <rect> behind them (since a <pattern> cannot take a traditional fill). This technique echoes the many examples I’ve used in making SVG backgrounds.

<pattern id="hexapolka" patternUnits="userSpaceOnUse"
	width="100" height="86" patternTransform="scale(.1)">
    <rect width="100%" height="86" fill="#f0f" />
    <circle cx="0" cy="44" r="16" id="dot" fill="red" />
	<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>

Added to the <defs> section, this was joined by a <filter> to create a drop shadow for the text:

<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>

I’ll provide much more information on <feMerge> and <feConvolveMatrix> in a future article; for now, I’d recommend playing with the dx and dy values to change the shadow offset in the CodePen demo.

The text is treated slightly differently in this case, as it has both a fill and a filter applied to it:

svg text {
  filter: url(#shadow);
  fill: url(#hexapolka);
}

Conclusion

With a little work and experimentation, many different kinds of text effects can be easily achieved with SVG filters, which is a topic I’ll look at in depth next.

Sound effect text samples use Nate Piekos’ excellent Badaboom font

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/bpwBqE