Text on an SVG path


by Jeremy Caudle
notes

More SVG practice today. I've never handwritten text on a path before, so I thought I'd give it a quick try.

SVG Text on Path Practicing adding text to a path in SVG and styling it with CSS. This text looks like it is alive.

View the code:

HTML and JS 
<div class="codedoodle-block">

        <svg height="300" width="500">
            <title>SVG Text on Path</title>
            <desc>Practicing adding text to a path in SVG and styling it with CSS.</desc>
            <!-- start -->
            <defs>
                <path id="pathfortext" d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40" />
            </defs>

            <use xlink:href="#pathfortext" />
            <text id="pathtext">
                <textpath xlink:href="#pathfortext">This text looks like it is alive.</textpath>
            </text>

            <!-- end -->
        </svg> 

    </div>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:500px;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 700px;
        }

        .card {
            border: solid 1px #dedede;
            padding: 1em;
            margin: 1rem auto;
            font-size: 1.25rem;
            box-shadow: 0 .5rem .5rem rgba(0,0,0,.2);
            max-width: 88%;
        }

        #pathfortext {
            stroke: none;
            fill: none;
        }


        @keyframes textfx {
            from{letter-spacing: 0;}
            to{letter-spacing: -1px;}
        }

        #pathtext {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 16px;
            color: #777777;
            animation: textfx 5s ease-in-out 0s infinite alternate;
        }

Tags