{"id":1135,"date":"2025-12-17T09:00:00","date_gmt":"2025-12-17T10:00:00","guid":{"rendered":"https:\/\/computercoursesonline.com\/?p=1135"},"modified":"2025-12-23T02:04:37","modified_gmt":"2025-12-23T02:04:37","slug":"smashing-animations-part-7-recreating-toon-text-with-css-and-svg","status":"publish","type":"post","link":"https:\/\/computercoursesonline.com\/index.php\/2025\/12\/17\/smashing-animations-part-7-recreating-toon-text-with-css-and-svg\/","title":{"rendered":"Smashing Animations Part 7: Recreating Toon Text With CSS And SVG"},"content":{"rendered":"<p>              <title>Smashing Animations Part 7: Recreating Toon Text With CSS And SVG<\/title><\/p>\n<article>\n<header>\n<h1>Smashing Animations Part 7: Recreating Toon Text With CSS And SVG<\/h1>\n<address>Andy Clarke<\/address>\n<p>                  2025-12-17T10:00:00+00:00<br \/>\n                  2025-12-23T01:42:02+00:00<br \/>\n                <\/header>\n<p>After finishing a project that required me to learn everything I could about CSS and SVG animations, I started writing this series about Smashing Animations and \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2025\/05\/smashing-animations-part-1-classic-cartoons-inspire-css\/\">How Classic Cartoons Inspire Modern CSS<\/a>.\u201d To round off this year, I want to show you how to use modern CSS to create that element that makes Toon Titles so impactful: their typography.<\/p>\n<h2 id=\"title-artwork-design\">Title Artwork Design<\/h2>\n<p>In the silent era of the 1920s and early \u201930s, the typography of a film\u2019s title card created a mood, set the scene, and reminded an audience of the type of film they\u2019d paid to see.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/1-typographic-title-cards.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"156\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Typographic title cards from the early years of cinema\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/1-typographic-title-cards.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Typographic title cards from the early years of cinema. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/1-typographic-title-cards.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Cartoon title cards were also branding, mood, and scene-setting, all rolled into one. In the early years, when major studio budgets were bigger, these title cards were often illustrative and painterly.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/2-tom-jerry-title-cards.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"300\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Top: William Hanna and Joseph Barbera\u2019s 1940s Tom &amp; Jerry title cards. Bottom: Colour versions released in 1957. \u00a9 Warner Bros. Entertainment Inc.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/2-tom-jerry-title-cards.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Top: William Hanna and Joseph Barbera\u2019s 1940s Tom &amp; Jerry title cards. Bottom: Colour versions released in 1957. \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/2-tom-jerry-title-cards.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>But when television boomed during the 1950s, budgets dropped, and cards designed by artists like Lawrence \u201cArt\u201d Goble adopted a new visual language, becoming more graphic, stylised, and less intricate.<\/p>\n<p><strong>Note:<\/strong> <em>Lawrence \u201cArt\u201d Goble is one of the often overlooked heroes of mid-century American animation. He primarily worked for Hanna-Barbera during its most influential years of the 1950s and 1960s.<\/em><\/p>\n<p>Goble wasn\u2019t a character animator. His role was to create atmosphere, so he designed environments for <em>The Flintstones<\/em>, <em>Huckleberry Hound<\/em>, <em>Quick Draw McGraw<\/em>, and <em>Yogi Bear<\/em>, as well as the opening title cards that set the tone. His title cards, featuring paintings with a logo overlaid, helped define the iconic look of Hanna-Barbera.<\/p>\n<p>Goble\u2019s artwork for characters such as Quick Draw McGraw and Yogi Bear was effective on smaller TV screens. Rather than reproducing a still from the cartoon, he focused on presenting a single, strong idea &mdash; often in silhouette &mdash; that captured its essence. In \u201cThe Buzzin\u2019 Bear,\u201d Yogi buzzes by in a helicopter. He bounces away, pic-a-nic basket in hand, in \u201cBear on a Picnic,\u201d and for his \u201cPrize Fight Fright,\u201d Yogi boxes the title text.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/3-title-cards-yogi-bear.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"300\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Title cards for Hanna-Barbera\u2019s Yogi Bear.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/3-title-cards-yogi-bear.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Title cards for Hanna-Barbera\u2019s Yogi Bear. \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/3-title-cards-yogi-bear.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>With little or no motion to rely on, Goble\u2019s single frames had to create a mood, set the scene, and describe a story. They did this using flat colours, graphic shapes, and typography that was frequently integrated into the artwork.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/4-title-cards-quick-draw-mcgraw.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"225\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Title cards for Hanna-Barbera\u2019s Quick Draw McGraw.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/4-title-cards-quick-draw-mcgraw.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Title cards for Hanna-Barbera\u2019s Quick Draw McGraw. \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/4-title-cards-quick-draw-mcgraw.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As designers who work on the web, toon titles can teach us plenty about how to convey a brand\u2019s personality, make a first impression, and set expectations for someone\u2019s experience using a product or website. We can learn from the artists\u2019 techniques to create effective banners, landing-page headers, and even good ol\u2019 fashioned splash screens.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"toon-title-typography\">Toon Title Typography<\/h2>\n<p>Cartoon title cards show how merging type with imagery delivers the punch a header or hero needs. With a handful of <code>text-shadow<\/code>, <code>text-stroke<\/code>, and <code>transform<\/code> tricks, modern CSS lets you tap into that same energy.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/5-title-cards-augie-doggie.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"455\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Title cards for Hanna-Barbera\u2019s Augie Doggie.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/5-title-cards-augie-doggie.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Title cards for Hanna-Barbera\u2019s Augie Doggie. \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/5-title-cards-augie-doggie.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"the-toon-text-title-generator\">The Toon Text Title Generator<\/h2>\n<p>Partway through writing this article, I realised it would be useful to have a tool for generating text styled like the cartoon titles I love so much. <a href=\"https:\/\/stuffandnonsense.co.uk\/toon-text\/tool.html\">So I made one.<\/a><\/p>\n<p>My Toon Text Title Generator lets you experiment with colours, strokes, and multiple text shadows. You can adjust paint order, apply letter spacing, preview your text in a selection of sample fonts, and then copy the generated CSS straight to your clipboard to use in a project.<\/p>\n<h2 id=\"toon-title-css\">Toon Title CSS<\/h2>\n<p>You can simply copy-paste the CSS that the Toon Text Title Generator provides you. But let\u2019s look closer at what it does.<\/p>\n<h3 id=\"text-shadow\">Text shadow<\/h3>\n<p>Look at the type in this title from Augie Doggie\u2019s episode \u201cYuk-Yuk Duck,\u201d with its pale yellow letters and dark, hard, offset shadow that lifts it off the background and creates the illusion of depth.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/6-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/6-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/6-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>You probably already know that <code>text-shadow<\/code> accepts four values: (1) horizontal and (2) vertical offsets, (3) blur, and (4) a colour which can be solid or semi-transparent. Those offset values can be positive or negative, so I can replicate \u201cYuk-Yuk Duck\u201d using a hard shadow pulled down and to the right:<\/p>\n<pre><code class=\"language-css\">color: &#035;f7f76d;\ntext-shadow: 5px 5px 0 &#035;1e1904;\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/7-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/7-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/7-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>On the other hand, this \u201cPint Giant\u201d title has a different feel with its negative semi-soft shadow:<\/p>\n<pre><code class=\"language-css\">color: &#035;c2a872;\ntext-shadow:\n  -7px 5px 0 &#035;b100e,\n  0 -5px 10px &#035;546c6f;\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/8-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/8-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/8-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To add extra depth and create more interesting effects, I can layer multiple shadows. For \u201cLet\u2019s Duck Out,\u201d I combine four shadows: the first a solid shadow with a negative horizontal offset to lift the text off the background, followed by progressively softer shadows to create a blur around it:<\/p>\n<pre><code class=\"language-css\">color: &#035;6F4D80;\ntext-shadow:\n  -5px 5px 0 &#035;260e1e, \/&#042; Shadow 1 &#042;\/\n  0 0 15px &#035;e9ce96,   \/&#042; Shadow 2 &#042;\/\n  0 0 30px &#035;e9ce96,   \/&#042; Shadow 3 &#042;\/\n  0 0 30px &#035;e9ce96;   \/&#042; Shadow 4 &#042;\/\n<\/code><\/pre>\n<p>These shadows show that using <code>text-shadow<\/code> isn\u2019t just about creating lighting effects, as they can also be decorative and add personality.<\/p>\n<h3 id=\"text-stroke\">Text Stroke<\/h3>\n<p>Many cartoon title cards feature letters with a bold outline that makes them stand out from the background. I can recreate this effect using <code>text-stroke<\/code>. For a long time, this property was only available via a <code>-webkit-<\/code> prefix, but that also means it\u2019s now supported across modern browsers.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/9-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/9-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/9-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><code>text-stroke<\/code> is a shorthand for two properties. The first, <code>text-stroke-width<\/code>, draws a contour around individual letters, while the second, <code>text-stroke-color<\/code>, controls its colour. For \u201cWhatever Goes Pup,\u201d I added a <code>4px<\/code> blue stroke to the yellow text:<\/p>\n<pre><code class=\"language-css\">color: &#035;eff0cd;\n-webkit-text-stroke: 4px &#035;7890b5;\ntext-stroke: 4px &#035;7890b5;\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/10-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/10-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/10-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Strokes can be especially useful when they\u2019re combined with shadows, so for \u201cGrowing, Growing, Gone,\u201d I added a thin <code>3px<\/code> stroke to a barely blurred <code>1px<\/code> shadow to create this three-dimensional text effect:<\/p>\n<pre><code class=\"language-css\">color: &#035;fbb999;\ntext-shadow: 3px 5px 1px &#035;5160b1;\n-webkit-text-stroke: 3px &#035;984336;\ntext-stroke: 3px &#035;984336;\n<\/code><\/pre>\n<h3 id=\"paint-order\">Paint Order<\/h3>\n<p>Using <code>text-stroke<\/code> doesn\u2019t always produce the expected result, especially with thinner letters and thicker strokes, because by default the browser draws a stroke over the fill. Sadly, CSS still does not permit me to adjust stroke placement as I often do in Sketch. However, the <code>paint-order<\/code> property has values that allow me to place the stroke behind, rather than in front of, the fill.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/11-paint-order.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Left: paint-order: stroke; Right: paint-order: fill.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/11-paint-order.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Left: <code>paint-order: stroke<\/code>. Right: <code>paint-order: fill<\/code>. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/11-paint-order.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><code>paint-order: stroke<\/code> paints the stroke first, then the fill, whereas <code>paint-order: fill<\/code> does the opposite:<\/p>\n<pre><code class=\"language-css\">color: &#035;fbb999;\npaint-order: fill;\ntext-shadow: 3px 5px 1px &#035;5160b1;\ntext-stroke-color:&#035;984336;\ntext-stroke-width: 3px;\n<\/code><\/pre>\n<p>An effective stroke keeps letters readable, adds weight, and &mdash; when combined with shadows and paint order &mdash; gives flat text real presence.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"backgrounds-inside-text\">Backgrounds Inside Text<\/h2>\n<p>Many cartoon title cards go beyond flat colour by adding texture, gradients, or illustrated detail to the lettering. Sometimes that\u2019s a texture, other times it might be a gradient with a subtle tonal shift. On the web, I can recreate this effect by using a background image or gradient behind the text, and then clipping it to the shape of the letters. This relies on two properties working together: <code>background-clip: text<\/code> and <code>text-fill-color: transparent<\/code>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/12-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/12-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/12-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>First, I apply a background behind the text. This can be a bitmap or vector image or a CSS gradient. For this example from the Quick Draw McGraw episode \u201cBaba Bait,\u201d the title text includes a subtle top\u2013bottom gradient from dark to light:<\/p>\n<pre><code class=\"language-css\">background: linear-gradient(0deg, &#035;667b6a, &#035;1d271a);\n<\/code><\/pre>\n<p>Next, I clip that background to the glyphs and make the text transparent so the background shows through:<\/p>\n<pre><code class=\"language-css\">-webkit-background-clip: text;\n-webkit-text-fill-color: transparent;\n<\/code><\/pre>\n<p>With just those two lines, the background is no longer painted behind the text; instead, it\u2019s painted within it. This technique works especially well when combined with strokes and shadows. A clipped gradient provides the lettering with colour and texture, a stroke keeps its edges sharp, and a shadow elevates it from the background. Together, they recreate the layered look of hand-painted title cards using nothing more than a little CSS. As always, test clipped text carefully, as browser quirks can sometimes affect shadows and rendering.<\/p>\n<h3 id=\"splitting-text-into-individual-characters\">Splitting Text Into Individual Characters<\/h3>\n<p>Sometimes I don\u2019t want to style a whole word or heading. I want to style individual letters &mdash; to nudge a character into place, give one glyph extra weight, or animate a few letters independently.<\/p>\n<p>In plain HTML and CSS, there\u2019s only one reliable way to do that: wrap each character in its own <code>span<\/code> element. I could do that manually, but that would be fragile, hard to maintain, and would quickly fall apart when copy changes. Instead, when I need per-letter control, I use a text-splitting library like <a href=\"https:\/\/www.spltjs.com\">splt.js<\/a> (although other solutions are available). This takes a text node and automatically wraps words or characters, giving me extra hooks to animate and style without messing up my markup.<\/p>\n<p>It\u2019s an approach that keeps my HTML readable and semantic, while giving me the fine-grained control I need to recreate the uneven, characterful typography you see in classic cartoon title cards. However, this approach comes with accessibility caveats, as most screen readers read text nodes in order. So this:<\/p>\n<pre><code class=\"language-html\">&lt;h2&gt;Hum Sweet Hum&lt;\/h2&gt;\n<\/code><\/pre>\n<p>\u2026reads as you\u2019d expect:<\/p>\n<blockquote><p>Hum Sweet Hum<\/p><\/blockquote>\n<p>But this:<\/p>\n<pre><code class=\"language-html\">&lt;h2&gt;\n&lt;span&gt;H&lt;\/span&gt;\n&lt;span&gt;u&lt;\/span&gt;\n&lt;span&gt;m&lt;\/span&gt;\n&lt;!-- etc. --&gt;\n&lt;\/h2&gt;\n<\/code><\/pre>\n<p>\u2026can be interpreted differently depending on the browser and screen reader. Some will concatenate the letters and read the words correctly. Others may pause between letters, which in a worst-case scenario might sound like:<\/p>\n<blockquote><p>\u201cH\u2026\u201d \u201cU\u2026\u201d \u201cM\u2026\u201d<\/p><\/blockquote>\n<p>Sadly, some splitting solutions don\u2019t deliver an always accessible result, so I\u2019ve written my own text splitter, <a href=\"https:\/\/stuffandnonsense.co.uk\/toon-text\/splinter.html#section-install\">splinter.js<\/a>, which is currently in beta.<\/p>\n<h3 id=\"transforming-individual-letters\">Transforming Individual Letters<\/h3>\n<p>To activate my Toon Text Splitter, I add a <code>data-<\/code> attribute to the element I want to split:<\/p>\n<pre><code class=\"language-html\">&lt;h2 data-split=\"toon\"&gt;Hum Sweet Hum&lt;\/h2&gt;\n<\/code><\/pre>\n<p>First, my script separates each word into individual letters and wraps them in a <code>span<\/code> element with class and ARIA attributes applied:<\/p>\n<pre><code class=\"language-html\">&lt;span class=\"toon-char\" aria-hidden=\"true\"&gt;H&lt;\/span&gt;\n&lt;span class=\"toon-char\" aria-hidden=\"true\"&gt;u&lt;\/span&gt;\n&lt;span class=\"toon-char\" aria-hidden=\"true\"&gt;m&lt;\/span&gt;\n<\/code><\/pre>\n<p>The script then takes the initial content of the split element and adds it as an aria attribute to help maintain accessibility:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\">&lt;h2 data-split=\"toon\" aria-label=\"Hum Sweet Hum\"&gt;\n  &lt;span class=\"toon-char\" aria-hidden=\"true\"&gt;H&lt;\/span&gt;\n  &lt;span class=\"toon-char\" aria-hidden=\"true\"&gt;u&lt;\/span&gt;\n  &lt;span class=\"toon-char\" aria-hidden=\"true\"&gt;m&lt;\/span&gt;\n&lt;\/h2&gt;\n<\/code><\/pre>\n<\/div>\n<p>With those class attributes applied, I can then style individual characters as I choose.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/13-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/13-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/13-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>For example, for \u201cHum Sweet Hum,\u201d I want to replicate how its letters shift away from the baseline. After using my Toon Text Splitter, I applied four different <code>translate<\/code> values using several <code>:nth-child<\/code> selectors to create a semi-random look:<\/p>\n<pre><code class=\"language-css\">\/&#042; 4th, 8th, 12th... &#042;\/\n.toon-char:nth-child(4n) { translate: 0 -8px; }\n\/&#042; 1st, 5th, 9th... &#042;\/\n.toon-char:nth-child(4n+1) { translate: 0 -4px; }\n\/&#042; 2nd, 6th, 10th... &#042;\/\n.toon-char:nth-child(4n+2) { translate: 0 4px; }\n\/&#042; 3rd, 7th, 11th... &#042;\/\n.toon-char:nth-child(4n+3) { translate: 0 8px; }\n<\/code><\/pre>\n<p>But <code>translate<\/code> is only one property I can use to <code>transform<\/code> my toon text.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/14-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/14-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/14-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I could also rotate those individual characters for an even more chaotic look:<\/p>\n<pre><code class=\"language-css\">\/&#042; 4th, 8th, 12th... &#042;\/\n.toon-line .toon-char:nth-child(4n) { rotate: -4deg; }\n\/&#042; 1st, 5th, 9th... &#042;\/\n.toon-char:nth-child(4n+1) { rotate: -8deg; }\n\/&#042; 2nd, 6th, 10th... &#042;\/\n.toon-char:nth-child(4n+2) { rotate: 4deg; }\n\/&#042; 3rd, 7th, 11th... &#042;\/\n.toon-char:nth-child(4n+3) { rotate: 8deg; }\n<\/code><\/pre>\n<p>But <code>translate<\/code> is only one property I can use to <code>transform<\/code> my toon text. I could also <code>rotate<\/code> those individual characters for an even more chaotic look:<\/p>\n<pre><code class=\"language-css\">\/&#042; 4th, 8th, 12th... &#042;\/\n.toon-line .toon-char:nth-child(4n) {\nrotate: -4deg; }\n\n\/&#042; 1st, 5th, 9th... &#042;\/\n.toon-char:nth-child(4n+1) {\nrotate: -8deg; }\n\n\/&#042; 2nd, 6th, 10th... &#042;\/\n.toon-char:nth-child(4n+2) {\nrotate: 4deg; }\n\n\/&#042; 3rd, 7th, 11th... &#042;\/\n.toon-char:nth-child(4n+3) {\nrotate: 8deg; }\n<\/code><\/pre>\n<p>And, of course, I could add animations to jiggle those characters and bring my toon text style titles to life. First, I created a keyframe animation that rotates the characters:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">@keyframes jiggle {\n0%, 100% { transform: rotate(var(--base-rotate, 0deg)); }\n25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); }\n50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); }\n75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); }\n}\n<\/code><\/pre>\n<\/div>\n<p>Before applying it to the <code>span<\/code> elements created by my Toon Text Splitter:<\/p>\n<pre><code class=\"language-css\">.toon-char {\nanimation: jiggle 3s infinite ease-in-out;\ntransform-origin: center bottom; }\n<\/code><\/pre>\n<p>And finally, setting the rotation amount and a delay before each character begins to jiggle:<\/p>\n<pre><code class=\"language-css\">.toon-char:nth-child(4n) { --base-rotate: -2deg; }\n.toon-char:nth-child(4n+1) { --base-rotate: -4deg; }\n.toon-char:nth-child(4n+2) { --base-rotate: 2deg; }\n.toon-char:nth-child(4n+3) { --base-rotate: 4deg; }\n\n.toon-char:nth-child(4n) { animation-delay: 0.1s; }\n.toon-char:nth-child(4n+1) { animation-delay: 0.3s; }\n.toon-char:nth-child(4n+2) { animation-delay: 0.5s; }\n.toon-char:nth-child(4n+3) { animation-delay: 0.7s; }\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/15-toon-text-collection.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"317\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example from Andy&#039;s Toon Text collection.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/15-toon-text-collection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      See this example in my Toon Text collection. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-7-recreating-toon-text-css-svg\/15-toon-text-collection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"one-frame-to-make-an-impression\">One Frame To Make An Impression<\/h2>\n<p>Cartoon title artists had one frame to make an impression, and their typography was as important as the artwork they painted. The same is true on the web.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aA%20well-designed%20header%20or%20hero%20area%20needs%20clarity,%20character,%20and%20confidence%20%e2%80%94%20not%20simply%20a%20faded%20full-width%20background%20image.%0a&amp;url=https:\/\/smashingmagazine.com%2f2025%2f12%2fsmashing-animations-part-7-recreating-toon-text-css-svg%2f\"><\/p>\n<p>A well-designed header or hero area needs clarity, character, and confidence \u2014 not simply a faded full-width background image.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>With a few carefully chosen CSS properties &mdash; shadows, strokes, clipped backgrounds, and some restrained animation &mdash; we can recreate that same impact. I love toon text not because I\u2019m nostalgic, but because its design is intentional. Make deliberate choices, and let a little toon text typography add punch to your designs.<\/p>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Smashing Animations Part 7: Recreating Toon Text With CSS And SVG Smashing Animations Part 7: Recreating Toon Text With CSS And SVG Andy Clarke 2025-12-17T10:00:00+00:00 2025-12-23T01:42:02+00:00 After finishing a project that required me to learn everything I could about CSS and SVG animations, I started writing this series about Smashing Animations and \u201cHow Classic Cartoons&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1135"}],"collection":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=1135"}],"version-history":[{"count":1,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1135\/revisions"}],"predecessor-version":[{"id":1136,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1135\/revisions\/1136"}],"wp:attachment":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=1135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/categories?post=1135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/tags?post=1135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}