Example on how to use the SVGText pen.
[http://codepen.io/dipscom/pen/ZWXoxy]. What is a svgtext - pattern fill? How do you make a svgtext - pattern fill? This script and codes were developed by Pedro Tavares on 01 December 2022, Thursday.
SVGText - Pattern Fill Previews
SVGText - Pattern Fill - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVGText - Pattern Fill</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/rwxpbb.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <!-- We can have a completely separated SVG for the patterns --> <svg width="0" height="0"> <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4"> <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" style="stroke:black; stroke-width:1px;" /> </pattern> </svg> <!-- The SVG elemtns that will be used, we wrap it around an empty div so we can collapse the code for visibility sake and to make sure it will not display --> <div style="display:none;"> <!-- And another one for the alphabet, that way, we can change them over without too much hassle --> <svg id="alphabet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol> <svg xmlns="http://www.w3.org/2000/svg" width="67.312" height="64.874" viewBox="0 0 33.656 32.437"> <path id="whitespace" d="M0 0 Z" transform="translate(0 0)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="49.719" height="41.437" viewBox="0 0 49.719 41.437"> <path id="a" d="M68.7,242.766a5.168,5.168,0,0,1,.668,2.735,1.078,1.078,0,0,1-1.154,1.276,6.723,6.723,0,0,1-.911-0.092,6.879,6.879,0,0,0-.911-0.091q-2.31,0-2.309,3.585a4.647,4.647,0,0,0,1.063,3.129,3.4,3.4,0,0,0,2.7,1.246,35.992,35.992,0,0,0,3.889-.486,24.973,24.973,0,0,1,3.1-.122q2.126,0,3.463.122a16.333,16.333,0,0,1,2.248.3,18.311,18.311,0,0,0,2.248.182,4.276,4.276,0,0,0,3.159-1.215,4.355,4.355,0,0,0,1.215-3.221q0-4.01-3.4-4.01H83.1a7.65,7.65,0,0,1-1.276.183q-1.216,0-2.127-3.1l-7.777-25.884q-0.852-2.916-2.187-3.554t-6.44-.638q-4.557,0-5.894.668-1.823,1.035-3.281,5.1l-8.385,23.878q-0.669,1.884-.851,2.249A2.151,2.151,0,0,1,43,246.291a11.267,11.267,0,0,1-1.154-.092,11.511,11.511,0,0,0-1.154-.091q-3.221,0-3.22,4.253a4.049,4.049,0,0,0,1.185,3.038,4.21,4.21,0,0,0,3.068,1.155q0.607,0,3.828-.426a31.986,31.986,0,0,1,3.889-.182,27.047,27.047,0,0,1,3.585.182,34.987,34.987,0,0,0,3.767.426,3.413,3.413,0,0,0,2.734-1.215,4.711,4.711,0,0,0,1.033-3.16q0-3.584-2.248-3.585a6.849,6.849,0,0,0-.911.091,6.749,6.749,0,0,1-.911.092,0.887,0.887,0,0,1-1.033-.973q0-4.131,3.463-4.131H67A1.963,1.963,0,0,1,68.7,242.766Zm-2.491-9.6q0,0.851-1.58.85H60.865q-1.519,0-1.519-.729a1.338,1.338,0,0,1,.061-0.425l3.767-12.942,2.916,12.456q0.121,0.85.122,0.79h0Z" transform="translate(-37.469 -213.125)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="41.875" height="41.125" viewBox="0 0 41.875 41.125"> <path id="b" d="M136.035,219.134a9.624,9.624,0,0,0-5.226-3.377,28.285,28.285,0,0,0-7.23-.853q-2.674,0-4.071.122l-4.131.41q-1.4.136-3.767,0.136-3.039,0-4.861-.182l-4.314-.425a0.965,0.965,0,0,1-.243-0.061h-0.243a4.119,4.119,0,0,0-3.129,1.246,4.521,4.521,0,0,0-1.185,3.25,4.365,4.365,0,0,0,.942,2.856,2.9,2.9,0,0,0,2.339,1.154,7.18,7.18,0,0,0,1.489-.212,7.067,7.067,0,0,1,1.427-.213q1.641,0,1.641,4.071v16.83q0,4.132-1.641,4.132a7,7,0,0,1-1.427-.213,7.249,7.249,0,0,0-1.489-.212,2.9,2.9,0,0,0-2.339,1.154,4.368,4.368,0,0,0-.942,2.856,4.416,4.416,0,0,0,1.185,3.22,4.168,4.168,0,0,0,3.129,1.215h0.486q1.215,0,4.01-.3t4.253-.3q2.005,0,3.706.121l4.314,0.3q2.613,0.182,4.983.182,7.473,0,11.635-3.194a10.664,10.664,0,0,0,4.162-8.976,11.151,11.151,0,0,0-1.154-4.929q-1.519-3.1-6.259-4.989l-1.519-.608q7.475-1.766,7.474-8.458A9,9,0,0,0,136.035,219.134Zm-20.112,6.243a2.619,2.619,0,0,1,1.276-2.632,9.1,9.1,0,0,1,3.16-.367q6.318,0,6.319,4.1a3.539,3.539,0,0,1-1.853,3.121,9.36,9.36,0,0,1-5.013,1.163h-1.883a2.865,2.865,0,0,1-1.519-.245,1.747,1.747,0,0,1-.487-1.53v-3.61Zm10.542,21.608a6.743,6.743,0,0,1-4.344,1.337q-3.525,0-4.861-.881a3.535,3.535,0,0,1-1.337-3.19v-4.436a2.008,2.008,0,0,1,.426-1.488,2.73,2.73,0,0,1,1.762-.4h1.823a10.47,10.47,0,0,1,5.954,1.519,4.642,4.642,0,0,1,2.248,4.01A4.291,4.291,0,0,1,126.465,246.985Z" transform="translate(-97.625 -214.906)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="35.563" height="42.781" viewBox="0 0 35.563 42.781"> <path id="c" d="M150.134,217.272q-4.6,5.8-4.6,15.889,0,9.783,5.134,15.433t14,5.65q7.23,0,11.817-3.676a11.568,11.568,0,0,0,4.588-9.448,6.8,6.8,0,0,0-1.48-4.617,5.05,5.05,0,0,0-4.016-1.7,4.659,4.659,0,0,0-3.261,1.155,3.736,3.736,0,0,0-1.208,3.038v2.187a3.7,3.7,0,0,1-1.64,3.251,7.225,7.225,0,0,1-4.375,1.245q-4.314,0-6.288-3.068t-1.975-9.752q0-12.88,8.106-12.881a6.832,6.832,0,0,1,4.3,1.306,3.857,3.857,0,0,1,1.634,3.312v1.883q-0.121,3.828,4.5,3.828a5.32,5.32,0,0,0,3.555-1.154,3.782,3.782,0,0,0,1.367-3.038,18.772,18.772,0,0,0-.213-2.34,18.684,18.684,0,0,1-.212-2.339q0-1.093.265-3.585,0.161-1.518.16-2.308a3.646,3.646,0,0,0-3.828-3.828q-3.645,0-3.645,3.4v0.608a13.9,13.9,0,0,0-10.1-4.253A15.185,15.185,0,0,0,150.134,217.272Z" transform="translate(-145.531 -211.469)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="42.406" height="41.063" viewBox="0 0 42.406 41.063"> <path id="d" d="M196.435,244.5a7.612,7.612,0,0,0-1.519-.213,2.9,2.9,0,0,0-2.339,1.154,4.84,4.84,0,0,0,.273,6.076,4.27,4.27,0,0,0,3.16,1.215,18.259,18.259,0,0,0,1.822-.182l2.431-.243a37.991,37.991,0,0,1,4.071-.182q1.942,0,3.4.121l4.436,0.365q1.458,0.122,3.524.121a18.44,18.44,0,0,0,8.992-2.065,16.893,16.893,0,0,0,6.805-7.413,25.1,25.1,0,0,0-.122-22.3q-4.739-9.3-15.736-9.3-1.7,0-3.463.122l-4.436.3q-2.674.183-3.4,0.183a35.878,35.878,0,0,1-4.071-.243q-3.222-.364-4.253-0.365a4.278,4.278,0,0,0-3.16,1.215,4.84,4.84,0,0,0-.273,6.076,2.9,2.9,0,0,0,2.339,1.155,7.194,7.194,0,0,0,1.489-.213,7.141,7.141,0,0,1,1.427-.213q1.641,0,1.641,4.071v16.831q0,4.132-1.641,4.131A7.447,7.447,0,0,1,196.435,244.5Zm20.172-24.517a8.525,8.525,0,0,1,3.038,2.188q3.1,3.4,3.1,10.511,0,6.32-3.1,9.539a8.228,8.228,0,0,1-6.015,2.734,4.117,4.117,0,0,1-2.765-.668,3.527,3.527,0,0,1-.7-2.552V222.6a3.413,3.413,0,0,1,.7-2.522,4.269,4.269,0,0,1,2.765-.638,8.109,8.109,0,0,1,2.977.547h0Z" transform="translate(-191.625 -211.656)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="41.438" height="41.062" viewBox="0 0 41.438 41.062"> <path id="e" d="M276.638,218.093a15.039,15.039,0,0,1,2.551.122,1.556,1.556,0,0,1,1.4,1.64,11.924,11.924,0,0,1-.274,2.066,12.191,12.191,0,0,0-.273,2.187q0,4.68,4.557,4.679a4.594,4.594,0,0,0,3.251-1.215,3.912,3.912,0,0,0,1.306-2.978,19.632,19.632,0,0,0-.273-2.7,19.628,19.628,0,0,1-.274-2.765,21.564,21.564,0,0,1,.274-2.856,21.657,21.657,0,0,0,.273-2.855q0-2.976-3.413-2.977-2.865,0-5.484.182-1.586.121-6.582,0.243-6.888.182-7.313,0.182-4.449,0-9.2-.364-3.169-.243-4.2-0.243-4.449,0-4.449,4.435a4.283,4.283,0,0,0,.972,2.856,2.987,2.987,0,0,0,2.37,1.154,6.341,6.341,0,0,0,1.4-.182,8.531,8.531,0,0,1,1.458-.243q1.641,0,1.641,4.071v16.83q0,4.132-1.641,4.132a6.625,6.625,0,0,1-1.4-.243,6.656,6.656,0,0,0-1.458-.243,2.964,2.964,0,0,0-2.4,1.154,4.366,4.366,0,0,0-.942,2.856,4.548,4.548,0,0,0,1.185,3.22,3.994,3.994,0,0,0,3.068,1.276h0.3a1.065,1.065,0,0,1,.243-0.053l4.618-.372q2-.183,5.043-0.183h5.407q9.721,0.123,14.157.426,2.673,0.181,3.828.182,3.585,0,3.585-2.856a15.224,15.224,0,0,0-.182-2.369,20.763,20.763,0,0,1-.3-2.613q0-.729.3-3.646a32.661,32.661,0,0,0,.182-3.341q0-4.862-4.436-4.861a4.679,4.679,0,0,0-3.463,1.276,4.765,4.765,0,0,0-1.276,3.524,13.458,13.458,0,0,0,.182,1.974,13.636,13.636,0,0,1,.183,2.036,2.387,2.387,0,0,1-1.55,2.37,15.282,15.282,0,0,1-5.438.668h-3.524a4,4,0,0,1-2.825-.76,4.106,4.106,0,0,1-.759-2.886V235.47q0-1.944,1.712-1.944,2.541,0,2.541,1.458v1.762q0,3.1,3.038,3.1,3.219,0,3.22-3.585,0-.97-0.243-3.4t-0.243-4.01a23.244,23.244,0,0,1,.324-3.707,12.231,12.231,0,0,0,.162-1.883q0-3.1-3.192-3.1-3.068,0-3.066,2.552v1.7q0,1.946-2.6,1.944a1.444,1.444,0,0,1-1.388-.516,3.507,3.507,0,0,1-.265-1.549v-3.4q0-1.882.911-2.43a6.415,6.415,0,0,1,2.673-.365h6.016Z" transform="translate(-248.5 -210.438)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="40.469" height="41.156" viewBox="0 0 40.469 41.156"> <path id="f" d="M336.937,234.274a2.358,2.358,0,0,1,1.467-.3q2.274,0,2.275,1.519v1.337q0,3.4,3.22,3.4,3.159,0,3.159-3.706,0-1.215-.243-3.676t-0.243-3.676q0-2.126.122-3.463t0.121-1.945q0-3.157-3.308-3.159-2.829,0-2.828,2.37v2.065q0,1.764-2.478,1.762-1.593,0-1.593-1.883v-2.856q0-2.552.638-3.129t3.007-.577h6.623q3.038,0,3.038,2.054a13.518,13.518,0,0,1-.182,1.873,18.238,18.238,0,0,0-.243,2.3,5.165,5.165,0,0,0,1.185,3.566,4.131,4.131,0,0,0,3.25,1.329,4.415,4.415,0,0,0,3.342-1.332,4.785,4.785,0,0,0,1.276-3.453,17.814,17.814,0,0,0-.334-2.846,17.685,17.685,0,0,1-.334-2.846,17.358,17.358,0,0,1,.4-3.271,12.349,12.349,0,0,0,.268-2.423q0-2.664-3.043-2.665a3.814,3.814,0,0,1-.608.061l-3.652.3q-2.98.123-5.05,0.122-5.112.06-6.815,0.121-2.556.061-4.625,0.061-2.982,0-7.667-.365-3.105-.3-4.5-0.3-4.5,0-4.5,4.468a4.422,4.422,0,0,0,.942,2.877,2.9,2.9,0,0,0,2.339,1.162,7.117,7.117,0,0,0,1.489-.213,7.139,7.139,0,0,1,1.428-.213,1.577,1.577,0,0,1,1.519,1.58,15.318,15.318,0,0,1,.121,2.491v16.831a16.63,16.63,0,0,1-.121,2.552,1.576,1.576,0,0,1-1.519,1.579,7.466,7.466,0,0,1-1.4-.212,7.512,7.512,0,0,0-1.458-.213,3,3,0,0,0-2.4,1.124,4.343,4.343,0,0,0-.942,2.886,4.412,4.412,0,0,0,1.185,3.22,4.168,4.168,0,0,0,3.129,1.216q0.486,0,4.679-.426,1.822-.181,4.921-0.182,1.579,0,4.709.3t4.709,0.3a4.606,4.606,0,0,0,3.311-1.185,4.12,4.12,0,0,0,1.246-3.129q0-4.131-3.609-4.132a12.98,12.98,0,0,0-1.956.213,12.974,12.974,0,0,1-1.957.212,1.5,1.5,0,0,1-1.652-1.033,4.97,4.97,0,0,1-.183-1.519v-5.589A1.885,1.885,0,0,1,336.937,234.274Z" transform="translate(-318.062 -210.625)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="41.375" height="42.719" viewBox="0 0 41.375 42.719"> <path id="g" d="M369.511,217.92q-4.739,5.955-4.739,16.162a26.719,26.719,0,0,0,2.43,11.727,14.85,14.85,0,0,0,6.016,6.41,16.935,16.935,0,0,0,8.81,2.461,14.89,14.89,0,0,0,9.539-3.342V251.7q0,2.978,4.253,2.978,4.5,0,4.5-4.105,0-1.225-.061-2.574l-0.121-2.635q-0.062-1.286-.061-2.451,0-2.757,1.641-2.757h1.458a2.544,2.544,0,0,0,2.126-1.168,4.8,4.8,0,0,0,.851-2.905,4.215,4.215,0,0,0-1.185-3.144,4.267,4.267,0,0,0-3.129-1.168,21.489,21.489,0,0,0-2.673.3,29.533,29.533,0,0,1-4.436.372,33.152,33.152,0,0,1-3.919-.334,33.072,33.072,0,0,0-3.858-.335,4.539,4.539,0,0,0-3.159,1.094,3.728,3.728,0,0,0-1.216,2.916,4.088,4.088,0,0,0,.851,2.643,2.56,2.56,0,0,0,2.066,1.064q0.122,0,1.094-.122a1.763,1.763,0,0,0,.425-0.061h0.364q2.127,0,2.127,2.552a4.383,4.383,0,0,1-1.549,3.433,5.7,5.7,0,0,1-3.919,1.367,6.587,6.587,0,0,1-5.8-3.189q-2.1-3.191-2.1-8.9,0-6.744,2.157-10.42a6.74,6.74,0,0,1,6.106-3.676,6.132,6.132,0,0,1,4.345,1.306q1.367,1.308,2.1,4.77a3.935,3.935,0,0,0,4.253,3.463,5.758,5.758,0,0,0,3.585-1.063,3.207,3.207,0,0,0,1.4-2.643q0-.242-0.121-2.187a8.1,8.1,0,0,1-.122-1.641,34.437,34.437,0,0,1,.365-3.706,23.384,23.384,0,0,0,.243-2.431q0-3.645-3.767-3.645-3.1,0-3.646,3.585a14.322,14.322,0,0,0-10.633-4.314A15.587,15.587,0,0,0,369.511,217.92Z" transform="translate(-364.781 -211.969)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="49.812" height="41.187" viewBox="0 0 49.812 41.187"> <path id="h" d="M437.114,224.557a1.222,1.222,0,0,1,1.215-1.287h1.215q2.673,0,2.673-3.618a4.69,4.69,0,0,0-1.093-3.227,3.7,3.7,0,0,0-2.917-1.236,24.567,24.567,0,0,0-3.463.4,21.962,21.962,0,0,1-3.524.268,36.079,36.079,0,0,1-4.375-.268q-3.281-.4-3.888-0.4a4.257,4.257,0,0,0-3.16,1.224,4.9,4.9,0,0,0-.273,6.121,2.9,2.9,0,0,0,2.339,1.162,7.185,7.185,0,0,0,1.489-.213,7.067,7.067,0,0,1,1.427-.213q1.641,0,1.641,4.071v16.83q0,4.134-1.641,4.132a7,7,0,0,1-1.427-.213,7.16,7.16,0,0,0-1.428-.212,2.981,2.981,0,0,0-2.37,1.163,4.328,4.328,0,0,0-.972,2.875,4.462,4.462,0,0,0,1.185,3.244,4.151,4.151,0,0,0,3.129,1.224,35.326,35.326,0,0,0,4.071-.4,33.949,33.949,0,0,1,4.557-.267,24.728,24.728,0,0,1,3.372.334,24.606,24.606,0,0,0,3.311.334,3.713,3.713,0,0,0,2.886-1.245,4.668,4.668,0,0,0,1.124-3.251q0-3.705-2.673-3.706h-1.215a1.213,1.213,0,0,1-1.215-1.268v-8.089h12.759V244.8q0,1.389-.061,2.052a1.225,1.225,0,0,1-1.154,1.329h-1.276q-2.675,0-2.674,3.706a4.664,4.664,0,0,0,1.125,3.251,3.71,3.71,0,0,0,2.886,1.245,25.852,25.852,0,0,0,3.524-.4,25.481,25.481,0,0,1,4.01-.267,32.287,32.287,0,0,1,3.706.3,32.3,32.3,0,0,0,3.646.3,0.539,0.539,0,0,1,.243.061h0.243a4.12,4.12,0,0,0,3.129-1.245,4.521,4.521,0,0,0,1.185-3.251,4.285,4.285,0,0,0-.973-2.856,2.991,2.991,0,0,0-2.369-1.154,7.551,7.551,0,0,0-1.458.212,7.451,7.451,0,0,1-1.459.213q-1.64,0-1.64-4.132v-16.83a16.513,16.513,0,0,1,.121-2.552,1.626,1.626,0,0,1,1.58-1.519,7.085,7.085,0,0,1,1.428.213,7.176,7.176,0,0,0,1.489.213,2.906,2.906,0,0,0,2.339-1.155,4.373,4.373,0,0,0,.942-2.856,4.522,4.522,0,0,0-1.185-3.25,4.12,4.12,0,0,0-3.129-1.246q0.06,0-4.071.426-2.37.243-3.95,0.243a29.157,29.157,0,0,1-3.645-.335,29.533,29.533,0,0,0-3.646-.334,3.839,3.839,0,0,0-2.946,1.207,4.5,4.5,0,0,0-1.125,3.2q0,3.681,2.674,3.679h1.276a1.2,1.2,0,0,1,1.154,1.287,16.369,16.369,0,0,1,.061,2.082v4.287H437.114v-6.369h0Z" transform="translate(-418.594 -215.188)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="26.563" height="41.124" viewBox="0 0 26.563 41.124"> <path id="i" d="M501.094,246.766a7.15,7.15,0,0,0-1.428-.212,2.983,2.983,0,0,0-2.4,1.132,4.945,4.945,0,0,0,.273,6.15,4.253,4.253,0,0,0,3.16,1.224q1.094,0,4.678-.4a51.9,51.9,0,0,1,5.712-.331,26.2,26.2,0,0,1,3.22.182L518.137,255a1.858,1.858,0,0,0,.547.061,3.924,3.924,0,0,0,3.007-1.276,4.546,4.546,0,0,0,1.185-3.22,4.371,4.371,0,0,0-.942-2.856,2.906,2.906,0,0,0-2.339-1.154,7.551,7.551,0,0,0-1.458.212,7.453,7.453,0,0,1-1.458.213q-1.641,0-1.641-4.132v-16.83q0-4.07,1.641-4.071a7.532,7.532,0,0,1,1.458.213,7.472,7.472,0,0,0,1.458.212,2.9,2.9,0,0,0,2.339-1.154,4.368,4.368,0,0,0,.942-2.856q0-4.434-4.435-4.435-1.035,0-4.223.3t-4.891.3a40.432,40.432,0,0,1-4.375-.243q-3.342-.364-4.253-0.364a4.31,4.31,0,0,0-3.19,1.185,4.931,4.931,0,0,0-.243,6.106,2.9,2.9,0,0,0,2.339,1.154,7.171,7.171,0,0,0,1.489-.212,7.065,7.065,0,0,1,1.428-.213,1.579,1.579,0,0,1,1.519,1.58,15.309,15.309,0,0,1,.121,2.491v16.83a16.62,16.62,0,0,1-.121,2.552q-0.306,1.581-1.519,1.58A6.993,6.993,0,0,1,501.094,246.766Z" transform="translate(-496.312 -213.938)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="40.344" height="41.874" viewBox="0 0 40.344 41.874"> <path id="j" d="M557.691,245.534a5.214,5.214,0,0,0,1.428-3.706,5.837,5.837,0,0,0-2.309-4.648,8.475,8.475,0,0,0-5.59-1.914,9.562,9.562,0,0,0-7.109,3.068,10.222,10.222,0,0,0-2.977,7.383,10.747,10.747,0,0,0,4.5,8.84,17.859,17.859,0,0,0,11.3,3.494,18.765,18.765,0,0,0,12.152-4.01,11.4,11.4,0,0,0,3.494-4.375,16.5,16.5,0,0,0,1-6.319v-15.98q0-3.157,1.519-3.159-0.062,0,1.215.182a4.77,4.77,0,0,0,1.519.243,3.316,3.316,0,0,0,2.612-1.185,4.236,4.236,0,0,0,1.033-2.886,4.074,4.074,0,0,0-1.336-3.159,4.953,4.953,0,0,0-3.464-1.215q-0.851,0-3.736.3a47.827,47.827,0,0,1-4.892.3,56.692,56.692,0,0,1-6.5-.364,31.818,31.818,0,0,0-3.463-.243,4.457,4.457,0,0,0-3.251,1.215,5,5,0,0,0-.364,6.136,2.728,2.728,0,0,0,2.217,1.094,13.263,13.263,0,0,0,1.975-.213,13.508,13.508,0,0,1,1.975-.212,2.047,2.047,0,0,1,1.944.85,4.98,4.98,0,0,1,.365,2.309V241.4q0,4.01-1.276,5.893a6.89,6.89,0,0,1-6.137,2.978,6.372,6.372,0,0,1-3.8-1.064,3.2,3.2,0,0,1-1.489-2.7,3,3,0,0,1,.668-1.762,3.618,3.618,0,0,0,3.342,2.309A4.543,4.543,0,0,0,557.691,245.534Z" transform="translate(-541.125 -216.188)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="48.5" height="41.094" viewBox="0 0 48.5 41.094"> <path id="k" d="M601.727,224.99a1.2,1.2,0,0,1,1.154-1.276,3.265,3.265,0,0,1,.729.061h0.547q2.673,0,2.674-3.646a4.724,4.724,0,0,0-1.094-3.281,3.732,3.732,0,0,0-2.917-1.215,29.035,29.035,0,0,0-3.463.3,29,29,0,0,1-3.463.3,41.619,41.619,0,0,1-4.223-.3q-2.766-.3-4.1-0.3a4.31,4.31,0,0,0-3.19,1.185,4.931,4.931,0,0,0-.243,6.106,2.9,2.9,0,0,0,2.339,1.154,7.171,7.171,0,0,0,1.489-.212,7.065,7.065,0,0,1,1.428-.213,1.579,1.579,0,0,1,1.519,1.58,15.309,15.309,0,0,1,.121,2.491v16.83q0,4.132-1.64,4.132a6.993,6.993,0,0,1-1.428-.213,7.15,7.15,0,0,0-1.428-.212,3,3,0,0,0-2.4,1.124,4.882,4.882,0,0,0,.273,6.106,4.27,4.27,0,0,0,3.16,1.215,38,38,0,0,0,3.98-.3,38.331,38.331,0,0,1,4.04-.3q1.215,0,2.127.06,0.668,0.062,2.552.3a18.634,18.634,0,0,0,2.491.243,3.8,3.8,0,0,0,2.977-1.215,4.633,4.633,0,0,0,1.094-3.22q0-3.766-2.674-3.767h-1.215a1.21,1.21,0,0,1-1.215-1.26v-4.138l3.585-2.938,0.607-.6a0.939,0.939,0,0,1,.669-0.3q0.423,0,1.519,1.945l3.22,5.589a6.132,6.132,0,0,1,.972,2.37,1.707,1.707,0,0,1-.79,1.337,3.8,3.8,0,0,0-1.7,2.8,3.115,3.115,0,0,0,1.093,2.43,3.883,3.883,0,0,0,2.674.972,25.429,25.429,0,0,0,3.251-.3,25.53,25.53,0,0,1,3.25-.3,28.254,28.254,0,0,1,4.253.364,18.474,18.474,0,0,0,2.734.243,4.177,4.177,0,0,0,4.436-4.435q0-4.011-3.281-4.01a6.3,6.3,0,0,0-1.367.212,6.148,6.148,0,0,1-1.246.213q-1.4,0-3.767-4.071l-4.314-7.352-1.579-2.8a4.288,4.288,0,0,1-.669-1.519q0-.668,1.823-2.248l5.894-5.164,1.093-.851a3.991,3.991,0,0,1,2.066-1.033,4.732,4.732,0,0,1,1.185.213,4.707,4.707,0,0,0,1.185.212,2.733,2.733,0,0,0,2.217-1.245,4.84,4.84,0,0,0,.942-3.008,4.028,4.028,0,0,0-1.185-3.068,4.446,4.446,0,0,0-3.19-1.124,16.884,16.884,0,0,0-2.612.243,23.455,23.455,0,0,1-3.524.364,26.843,26.843,0,0,1-3.372-.3,26.917,26.917,0,0,0-3.372-.3,4.141,4.141,0,0,0-2.856.972,3.252,3.252,0,0,0-1.094,2.552,2.659,2.659,0,0,0,1.155,2.248,3.708,3.708,0,0,1,.789.547,0.99,0.99,0,0,1,.244.729q0,0.912-2.127,2.856l-8.81,8.141V224.99h0Z" transform="translate(-583.188 -215.625)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="40.25" height="41.124" viewBox="0 0 40.25 41.124"> <path id="l" d="M662.249,224.155a12.223,12.223,0,0,0,1.914.212,2.821,2.821,0,0,0,2.309-1.154,4.562,4.562,0,0,0,.911-2.916,4.084,4.084,0,0,0-4.374-4.375,38.479,38.479,0,0,0-4.193.364q-0.972.123-1.944,0.183t-2,.06q-1.216,0-2.522-.06t-2.764-.183q-4.375-.364-5.226-0.364-4.5,0-4.5,4.435a4.368,4.368,0,0,0,.942,2.856,2.9,2.9,0,0,0,2.339,1.154,7.171,7.171,0,0,0,1.489-.212,7.065,7.065,0,0,1,1.428-.213q1.639,0,1.64,4.071v16.83q0,4.133-1.64,4.132a6.993,6.993,0,0,1-1.428-.213,7.15,7.15,0,0,0-1.428-.212,3,3,0,0,0-2.4,1.124,4.341,4.341,0,0,0-.942,2.886,4.546,4.546,0,0,0,1.185,3.22,3.994,3.994,0,0,0,3.068,1.276q0.912,0,1.854-.091t2.035-.243q1.094-.151,2.4-0.243t2.947-.091q10.937,0,16.769.364,1.944,0.122,3.4.182T676.011,257q3.95,0,3.949-3.342c0-.08-0.02-0.354-0.06-0.82s-0.1-1.1-.183-1.914c-0.04-.4-0.071-0.81-0.091-1.215s-0.03-.81-0.03-1.215q0-.486.061-1.276t0.182-1.823q0.121-1.032.182-1.823t0.061-1.336q0-4.8-4.861-4.8a5.259,5.259,0,0,0-3.645,1.306,4.19,4.19,0,0,0-1.459,3.251,12.886,12.886,0,0,0,.3,2.369,8.52,8.52,0,0,1,.243,1.945q0,3.039-4.921,3.038h-2.977c-0.447,0-.851-0.01-1.216-0.031a8.413,8.413,0,0,1-.911-0.091,2.411,2.411,0,0,1-2.066-1.823,14.119,14.119,0,0,1-.182-2.977V227.284q0-3.341,1.944-3.342A12.275,12.275,0,0,1,662.249,224.155Z" transform="translate(-639.844 -215.938)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="63.094" height="41.094" viewBox="0 0 63.094 41.094"> <path id="m" d="M706.782,216.237a2.643,2.643,0,0,0-2.126-.729,27.856,27.856,0,0,0-3.16.243,47.029,47.029,0,0,1-5.711.364q-1.7,0-5.1-.3t-4.861-.3q-4.5,0-4.5,4.435a4.362,4.362,0,0,0,.942,2.856,2.9,2.9,0,0,0,2.339,1.154,7.171,7.171,0,0,0,1.489-.212,7.065,7.065,0,0,1,1.428-.213,1.579,1.579,0,0,1,1.519,1.58,15.309,15.309,0,0,1,.121,2.491v16.83a16.62,16.62,0,0,1-.121,2.552q-0.306,1.581-1.519,1.58a6.993,6.993,0,0,1-1.428-.213,7.15,7.15,0,0,0-1.428-.212,3,3,0,0,0-2.4,1.116,4.284,4.284,0,0,0-.942,2.865,4.434,4.434,0,0,0,1.215,3.2,4.105,4.105,0,0,0,3.1,1.266l3.767-.441a30.28,30.28,0,0,1,3.463-.166q1.641,0,2.917.121l2.126,0.3a16.927,16.927,0,0,0,2.188.182,3.728,3.728,0,0,0,2.916-1.215,4.723,4.723,0,0,0,1.094-3.281q0-3.705-2.43-3.706H700.4a0.942,0.942,0,0,1-.669-0.182q-0.546-.362-0.547-3.205v-22.8l8.081,30.319q0.912,3.464,3.342,3.464H714.5q2.49,0,3.585-3.889l8.445-29.894v22.8q0,1.452-.061,2.057a1.226,1.226,0,0,1-1.154,1.33h-1.276q-2.492,0-2.491,3.767a4.552,4.552,0,0,0,1.124,3.22,3.822,3.822,0,0,0,2.947,1.215,27.607,27.607,0,0,0,3.4-.3,22.773,22.773,0,0,1,7.048-.06,33.9,33.9,0,0,0,3.889.364,4.415,4.415,0,0,0,3.22-1.185,4.33,4.33,0,0,0,1.215-3.25,4.284,4.284,0,0,0-.972-2.856,2.991,2.991,0,0,0-2.369-1.154,7.569,7.569,0,0,0-1.459.212,7.433,7.433,0,0,1-1.458.213q-1.581,0-1.58-4.132V227.6q0-4.07,1.641-4.071a7.5,7.5,0,0,1,1.4.213,7.587,7.587,0,0,0,1.519.212,2.905,2.905,0,0,0,2.34-1.154,4.384,4.384,0,0,0-3.494-7.291q-0.791,0-2.43.121-5.774.488-7.231,0.486a40.553,40.553,0,0,1-4.131-.3,40.547,40.547,0,0,0-4.071-.3,2.852,2.852,0,0,0-2.34,1,9.995,9.995,0,0,0-1.488,3.676l-5.286,21.266-5.043-22.177h0A8.212,8.212,0,0,0,706.782,216.237Z" transform="translate(-681.312 -215.5)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="51.812" height="41.062" viewBox="0 0 51.812 41.062"> <path id="n" d="M80.492,281.713a2.957,2.957,0,0,0-2.552-1.275,9.622,9.622,0,0,0-1.58.121q-1.641.183-2.916,0.243-2.8.243-3.949,0.243a32.628,32.628,0,0,1-3.828-.3,32.453,32.453,0,0,0-3.706-.3,4.273,4.273,0,0,0-3.16,1.215,4.84,4.84,0,0,0-.273,6.076,2.9,2.9,0,0,0,2.339,1.154,7.114,7.114,0,0,0,1.489-.213,7.127,7.127,0,0,1,1.428-.212q1.641,0,1.641,4.071v16.83q0,4.132-1.641,4.132a7.071,7.071,0,0,1-1.428-.213,7.182,7.182,0,0,0-1.489-.213,2.906,2.906,0,0,0-2.339,1.155,4.367,4.367,0,0,0-.942,2.855q0,4.437,4.435,4.436,0.729,0,3.4-.3a39.862,39.862,0,0,1,4.253-.3,29.6,29.6,0,0,1,3.767.243,35.423,35.423,0,0,0,4.01.365q4.252,0,4.253-4.436a4.574,4.574,0,0,0-.881-2.855,2.635,2.635,0,0,0-2.157-1.155,6.194,6.194,0,0,0-1.306.213,6.212,6.212,0,0,1-1.306.213q-1.581,0-1.58-4.132V291.01L86.2,317.8a10.207,10.207,0,0,0,1.4,2.617,3.549,3.549,0,0,0,2.613.853H91.55q2.916-.183,2.977-0.182,0.607,0,1.853.091t1.853,0.091q3.281,0,3.281-4.01V292.529a16.5,16.5,0,0,1,.121-2.552,1.626,1.626,0,0,1,1.58-1.519,6.726,6.726,0,0,1,1.4.212,6.7,6.7,0,0,0,1.458.213,2.988,2.988,0,0,0,2.369-1.154,4.283,4.283,0,0,0,.973-2.856,4.353,4.353,0,0,0-1.216-3.22,4.273,4.273,0,0,0-3.159-1.215q-0.79,0-4.071.364a35.223,35.223,0,0,1-3.828.243,33.324,33.324,0,0,1-4.192-.3,30.669,30.669,0,0,0-3.342-.3,4,4,0,0,0-3.038,1.215,4.479,4.479,0,0,0-1.154,3.22,4.568,4.568,0,0,0,.881,2.856,2.63,2.63,0,0,0,2.157,1.154,5.381,5.381,0,0,0,1.246-.213,5.469,5.469,0,0,1,1.246-.212q1.579,0,1.58,4.071v17.984l-10.694-26h0a18.356,18.356,0,0,0-1.337-2.795h0Z" transform="translate(-57.594 -280.438)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="38.406" height="42.719" viewBox="0 0 38.406 42.719"> <path id="o" d="M143.323,315.95q5.013-5.742,5.013-16.011,0-9.9-5.165-15.432t-14.4-5.529q-8.809,0-13.822,5.681t-5.013,15.584q0,10.269,5.043,15.858t14.279,5.59Q138.311,321.691,143.323,315.95Zm-8.2-25.337q1.852,3.13,1.853,10.056,0,12.518-7.838,12.516a6.536,6.536,0,0,1-6.319-3.706q-1.519-2.976-1.519-9.114,0-12.88,7.9-12.881A6.372,6.372,0,0,1,135.121,290.613Z" transform="translate(-109.938 -278.969)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="39.938" height="41.125" viewBox="0 0 39.938 41.125"> <path id="p" d="M178.791,305.529H181.1q7.292,0,11.514-3.722a14.006,14.006,0,0,0,.122-19.926q-4.1-3.755-10.725-3.754-0.607,0-4.982.425-3.464.243-6.38,0.243-1.518,0-4.5-.3t-4.435-.3a0.53,0.53,0,0,1-.243-0.061h-0.182a4.222,4.222,0,0,0-3.16,1.245,4.455,4.455,0,0,0-1.215,3.251,4.364,4.364,0,0,0,.942,2.856,2.9,2.9,0,0,0,2.339,1.154,7.109,7.109,0,0,0,1.488-.213,7.14,7.14,0,0,1,1.428-.212,1.577,1.577,0,0,1,1.519,1.58,15.145,15.145,0,0,1,.122,2.491v16.83q0,4.132-1.641,4.132a7.472,7.472,0,0,1-1.4-.213,7.612,7.612,0,0,0-1.519-.213,2.9,2.9,0,0,0-2.339,1.155,4.365,4.365,0,0,0-.942,2.855,4.416,4.416,0,0,0,1.185,3.221,4.171,4.171,0,0,0,3.129,1.215q0.424,0,1.64-.122l2.978-.3a43.486,43.486,0,0,1,4.374-.183q1.7,0,5.043.3t5.043,0.3a4.277,4.277,0,0,0,3.16-1.215,4.354,4.354,0,0,0,1.215-3.221,4.411,4.411,0,0,0-.911-2.916,3.007,3.007,0,0,0-2.431-1.094,13.05,13.05,0,0,0-2.248.243,11.415,11.415,0,0,1-1.823.183q-1.822,0-1.823-2.023v-1.9q0-1.845,1.641-1.785h1.7Zm-3.342-15.821a10.2,10.2,0,0,1,.122-1.843,1.789,1.789,0,0,1,1.337-1.473,8.674,8.674,0,0,1,2.187-.184q6.44,0,6.441,5.864,0,6.106-7.17,5.68h-0.972a2.325,2.325,0,0,1-1.641-.46,4.351,4.351,0,0,1-.3-2.119v-5.465Z" transform="translate(-156.906 -278.125)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="38.625" height="51.406" viewBox="0 0 38.625 51.406"> <path id="q" d="M249.3,297.982q0-10.026-5.165-15.646t-14.339-5.62q-8.749,0-13.792,5.711t-5.044,15.615q0,10.572,5.53,16.405,4.677,4.922,13.427,4.922h0.669q0.181,0.789.243,1.094,0.789,3.7,1.944,4.982,2.37,2.673,7.656,2.673a10.469,10.469,0,0,0,6.683-1.974,6.433,6.433,0,0,0,2.491-5.317,4.592,4.592,0,0,0-1.032-3.129,3.453,3.453,0,0,0-2.735-1.185,2.835,2.835,0,0,0-2.916,1.884,7.641,7.641,0,0,1-.79,1.671,1.2,1.2,0,0,1-.911.273q-1.155,0-1.884-3.038a17.591,17.591,0,0,0,5.955-4.982q4.01-5.529,4.01-14.339h0Zm-22.633,4.739a3.419,3.419,0,0,0-1.307,2.734,4.462,4.462,0,0,0,1.58,3.038,3.99,3.99,0,0,1,1.215,2.187,5.953,5.953,0,0,1-4.557-3.463q-1.337-2.854-1.336-8.992,0-6.745,1.914-9.874a6.509,6.509,0,0,1,5.984-3.129,6.371,6.371,0,0,1,5.924,3.129q1.854,3.13,1.854,10a30.368,30.368,0,0,1-.3,5.043,13.167,13.167,0,0,1-1.762,4.679q-0.974-6.44-5.955-6.441A4.89,4.89,0,0,0,226.666,302.721Z" transform="translate(-210.969 -276.719)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="45.938" height="41.125" viewBox="0 0 45.938 41.125"> <path id="r" d="M298.011,289.175a9.841,9.841,0,0,0-3.372-7.883q-3.372-2.89-9.145-2.892-1.763,0-5.407.243-5.469.426-9.053,0.426-2.067,0-3.889-.183l-4.314-.425a1.858,1.858,0,0,0-.547-0.061,4,4,0,0,0-3.068,1.276,4.55,4.55,0,0,0-1.185,3.22,4.362,4.362,0,0,0,.942,2.856,2.9,2.9,0,0,0,2.339,1.155,7.185,7.185,0,0,0,1.489-.213,7.065,7.065,0,0,1,1.428-.213,1.579,1.579,0,0,1,1.519,1.58,15.309,15.309,0,0,1,.121,2.491v16.83q0,4.132-1.64,4.132a7.4,7.4,0,0,1-1.4-.213,7.652,7.652,0,0,0-1.519-.212,2.9,2.9,0,0,0-2.339,1.154,4.366,4.366,0,0,0-.942,2.856q0,4.435,4.436,4.435a37.4,37.4,0,0,0,4.314-.3,38.662,38.662,0,0,1,4.5-.3,36.431,36.431,0,0,1,4.314.3,34.367,34.367,0,0,0,3.949.3q4.252,0,4.253-4.435a4.573,4.573,0,0,0-.881-2.856,2.634,2.634,0,0,0-2.157-1.154,6.3,6.3,0,0,0-1.367.212,6.146,6.146,0,0,1-1.306.213q-1.519,0-1.519-4.132v-1.4a5.612,5.612,0,0,1,.3-2.248q0.423-.912,2.126-0.912,4.193,0,5.8,1.216t1.61,4.374v3.95a0.472,0.472,0,0,0-.183.425,8.039,8.039,0,0,0,1.368,4.891,4.277,4.277,0,0,0,3.615,1.853q0.729,0,2.157-.152t2.157-.152q0.668,0,2.065.152t2.066,0.152a4.228,4.228,0,0,0,3.129-1.185,4.308,4.308,0,0,0,1.185-3.189,4.922,4.922,0,0,0-.812-2.947,2.521,2.521,0,0,0-2.137-1.124,6.288,6.288,0,0,0-1.115.152,6.279,6.279,0,0,1-1.114.152q-1.444,0-1.445-2.5v-2.861a7.562,7.562,0,0,0-1.822-5.509q-1.824-1.857-6.2-2.587a16.441,16.441,0,0,0,5.529-2.07h0q3.159-2.13,3.16-6.695h0Zm-11.362,1.466q0,4.711-7.9,4.711a1.779,1.779,0,0,1-2.187-2.263v-3.671a2.586,2.586,0,0,1,1.336-2.631,10.117,10.117,0,0,1,3.16-.306q5.589,0,5.59,4.16h0Z" transform="translate(-258.031 -278.406)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="32.874" height="42.688" viewBox="0 0 32.874 42.688"> <path id="s" d="M312.766,281.045a11.869,11.869,0,0,0-3.736,9.084,10.451,10.451,0,0,0,4.374,8.81,13.558,13.558,0,0,0,4.861,2.37l4.01,0.972q5.043,1.216,6.38,2.1a3.333,3.333,0,0,1,1.337,3.008,3.859,3.859,0,0,1-1.519,3.159,6.327,6.327,0,0,1-4.071,1.215q-6.26,0-6.927-4.557a6.849,6.849,0,0,0-1.428-3.736,4.556,4.556,0,0,0-3.311-1,5.376,5.376,0,0,0-3.372,1,3.11,3.11,0,0,0-1.306,2.582q0,0.669.151,2.066t0.152,2.065a25.913,25.913,0,0,1-.243,2.978,22.2,22.2,0,0,0-.182,2.734q0,3.889,3.949,3.888,3.464,0,3.646-3.4a16.671,16.671,0,0,0,10.39,3.889,15.039,15.039,0,0,0,10.693-3.919,13.152,13.152,0,0,0,4.193-10.056,10.432,10.432,0,0,0-3.463-8.263q-3.463-3.038-11.119-4.557a23.374,23.374,0,0,1-5.681-1.58,2.717,2.717,0,0,1-1.124-2.552q0-3.645,5.225-3.646,5.528,0,6.44,3.95l0.3,1.276q0.668,2.916,4.132,2.916,4.131,0,4.131-3.585v-0.3a14.589,14.589,0,0,0-.121-1.58,14.37,14.37,0,0,1-.122-1.58q0-.91.183-2.673t0.182-2.674q0-3.281-3.889-3.281a3.586,3.586,0,0,0-2.643.79,4.424,4.424,0,0,0-.82,2.917,12.356,12.356,0,0,0-9.965-4.314A13.625,13.625,0,0,0,312.766,281.045Z" transform="translate(-307.938 -277.562)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="39.937" height="41.062" viewBox="0 0 39.937 41.062"> <path id="t" d="M366.743,309.079a13.4,13.4,0,0,0-1.975-.213q-3.706,0-3.706,4.01,0,4.436,4.557,4.436a41.921,41.921,0,0,0,4.192-.243q3.585-.364,6.259-0.365,2.611,0,6.258.365,2.429,0.242,4.192.243,4.557,0,4.557-4.8,0-3.647-3.645-3.646a13.374,13.374,0,0,0-1.975.213,13.4,13.4,0,0,1-1.975.212q-2.065,0-2.066-3.767v-17.5a5.171,5.171,0,0,1,.73-3.16,3.017,3.017,0,0,1,2.491-.911q2.673,0,2.673,2.187a13.569,13.569,0,0,1-.182,1.823,13.725,13.725,0,0,0-.182,1.944q0,5.226,4.556,5.225a4.314,4.314,0,0,0,3.312-1.336,5.137,5.137,0,0,0,1.245-3.646q0-.364-0.243-2.916-0.181-1.944-.182-2.917a24.754,24.754,0,0,1,.213-2.7,25.231,25.231,0,0,0,.212-2.7q0-2.673-2.751-2.674-1.344,0-3.484.183-4.89.425-13.754,0.425-8.8,0-13.694-.425-2.14-.183-3.546-0.183a2.37,2.37,0,0,0-2.689,2.674,23.011,23.011,0,0,0,.169,2.43q0.255,2.249.256,2.977a25.685,25.685,0,0,1-.182,2.917q-0.245,2.066-.243,2.855a5.325,5.325,0,0,0,1.215,3.676,4.237,4.237,0,0,0,3.341,1.367q4.557,0,4.557-5.407a12.26,12.26,0,0,0-.212-1.853,12.032,12.032,0,0,1-.213-1.853q0-2.065,2.977-2.066t2.978,4.071v17.5q0,3.768-2.066,3.767A13.368,13.368,0,0,1,366.743,309.079Z" transform="translate(-356.125 -276.25)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="49.75" height="41.843" viewBox="0 0 49.75 41.843"> <path id="u" d="M449.091,286.1a8.571,8.571,0,0,1,1.306.152,8.661,8.661,0,0,0,1.367.152,3.094,3.094,0,0,0,2.461-1.094,4.219,4.219,0,0,0,.942-2.856,4.378,4.378,0,0,0-1.246-3.281,4.543,4.543,0,0,0-3.311-1.215,39.075,39.075,0,0,0-4.01.3,38.844,38.844,0,0,1-4.01.3,29.755,29.755,0,0,1-3.494-.3,30.013,30.013,0,0,0-3.494-.3,3.83,3.83,0,0,0-2.947,1.215,4.554,4.554,0,0,0-1.124,3.221q0,3.707,2.492,3.706h1.336a1.055,1.055,0,0,1,1.094.576,9.609,9.609,0,0,1,.243,2.818V303.37q0,4.06-1.549,5.849t-4.952,1.787q-3.4,0-4.831-1.727t-1.428-5.909v-16a1.217,1.217,0,0,1,1.216-1.273h1.4q2.491,0,2.491-3.646a4.726,4.726,0,0,0-1.093-3.281,3.738,3.738,0,0,0-2.917-1.215,28.514,28.514,0,0,0-3.433.3,28.322,28.322,0,0,1-3.433.3,38.806,38.806,0,0,1-4.01-.3,39.114,39.114,0,0,0-4.01-.3,4.843,4.843,0,0,0-3.433,1.215,4.745,4.745,0,0,0-.364,6.107,2.929,2.929,0,0,0,2.339,1.124,9.374,9.374,0,0,0,1.458-.152,9.153,9.153,0,0,1,1.337-.152q1.761,0,1.762,3.27v2.361q0,2.481-.122,6.6-0.181,6.174-.182,6.719,0,6.3,2.547,9.5,4.183,5.268,14.193,5.267,9.7,0,14.5-5.085a11.9,11.9,0,0,0,2.972-7.2q0.181-1.332.182-8.113v-9.868h0q0-3.45,1.762-3.451h0Z" transform="translate(-405.406 -277.969)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="48.157" height="40.782" viewBox="0 0 48.157 40.782"> <path id="v" d="M473.048,287.862a0.941,0.941,0,0,1,1.094-1.033H475.3q2.492,0,2.491-3.558,0-4.463-4.01-4.462a29.186,29.186,0,0,0-3.22.3,31.76,31.76,0,0,1-4.132.3,33.577,33.577,0,0,1-3.767-.3,33.884,33.884,0,0,0-3.706-.3q-4.435,0-4.435,4.435a4.771,4.771,0,0,0,.82,2.886,2.546,2.546,0,0,0,2.157,1.124,4.676,4.676,0,0,0,1.367-.212,4.069,4.069,0,0,1,1.124-.213q1.215,0,2.187,2.977L469.4,312.53q2.247,7.048,5.468,7.048,0.606,0,1.762-.091t1.762-.091q0.606,0,1.823.091t1.823,0.091q3.158,0,4.8-4.982l7.412-22.542q1.7-5.224,3.16-5.225a5.274,5.274,0,0,1,1.033.213,5.039,5.039,0,0,0,1.215.212,2.6,2.6,0,0,0,2.157-1.215,4.944,4.944,0,0,0,.881-2.977,4.217,4.217,0,0,0-1.155-3.069,4.055,4.055,0,0,0-3.038-1.184,25.564,25.564,0,0,0-3.463.364,23.18,23.18,0,0,1-3.524.243,33.543,33.543,0,0,1-3.767-.3,34.013,34.013,0,0,0-3.767-.3q-3.889,0-3.889,4.4,0,3.618,2.8,3.618h0.972a0.829,0.829,0,0,1,.972.972,6.11,6.11,0,0,1-.3,1.458l-5.772,19.565-5.469-19.565a5.316,5.316,0,0,1-.243-1.4h0Z" transform="translate(-454.531 -278.812)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="63" height="40.75" viewBox="0 0 63 40.75"> <path id="w" d="M562.02,279.886a2.041,2.041,0,0,0-2.066-1.4c-0.486,0-1.226.052-2.218,0.152s-1.731.152-2.217,0.152-1.237-.05-2.249-0.152-1.762-.152-2.248-0.152a1.836,1.836,0,0,0-1.7.79,11.03,11.03,0,0,0-.911,3.4l-4.01,26.126-3.889-20.05a5.555,5.555,0,0,1-.122-1.094,0.97,0.97,0,0,1,1.033-1.154,4.172,4.172,0,0,1,.729.182h0.79q2.308,0,2.309-3.889,0-4.312-4.071-4.314a24.63,24.63,0,0,0-2.916.243,37.774,37.774,0,0,1-3.828.365,22.788,22.788,0,0,1-3.129-.3,22.849,22.849,0,0,0-3.068-.3A4.123,4.123,0,0,0,525.2,279.7a4.2,4.2,0,0,0-1.216,3.1,4.72,4.72,0,0,0,.912,2.917,2.626,2.626,0,0,0,2.126,1.215,4.009,4.009,0,0,0,1.216-.243,3.249,3.249,0,0,1,1.032-.182q0.972,0,1.519,1.519,0.243,1.215.487,2.369l4.86,21.448,0.729,3.1a14.857,14.857,0,0,0,.912,3.038,2.553,2.553,0,0,0,2.491,1.276q0.667,0,2.035-.091t2.036-.091q1.335,0,2.187.06,1.7,0.123,2.248.122a2.285,2.285,0,0,0,2.188-1.094,18.631,18.631,0,0,0,1.215-4.982l3.342-21.205,3.281,21.205a18.471,18.471,0,0,0,1.215,4.982,2.28,2.28,0,0,0,2.187,1.094h0.3l1.944-.122q0.972-.06,2.248-0.06,1.518,0,2.127.06,1.275,0.123,1.944.122a2.554,2.554,0,0,0,2.491-1.276,17.174,17.174,0,0,0,.912-3.038L579.7,290.4q0.546-2.308.547-2.369,0.485-1.52,1.519-1.519a2.993,2.993,0,0,1,1,.212,3.545,3.545,0,0,0,1.246.213,2.553,2.553,0,0,0,2.1-1.215,4.737,4.737,0,0,0,.881-2.856,4.362,4.362,0,0,0-1.185-3.129,3.973,3.973,0,0,0-3.008-1.246q-0.546,0-1.336.061-4.74.548-4.861,0.547a37.724,37.724,0,0,1-3.828-.365,24.662,24.662,0,0,0-2.916-.243q-4.072,0-4.071,4.557,0,3.647,2.309,3.646h0.729a3.646,3.646,0,0,1,.79-0.182,0.941,0.941,0,0,1,1.033,1.093,4.472,4.472,0,0,1-.183,1.155l-3.828,20.05-4.07-26.126h0a21.382,21.382,0,0,0-.547-2.795h0Z" transform="translate(-524 -278.5)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="45.874" height="41.093" viewBox="0 0 45.874 41.093"> <path id="x" d="M670.134,309.946a15.512,15.512,0,0,1-1.427,1.6,1.571,1.571,0,0,1-1,.271,8.493,8.493,0,0,1-1.154-.121,8.654,8.654,0,0,0-1.216-.122q-3.159,0-3.159,3.889a4.561,4.561,0,0,0,1.215,3.281,4.168,4.168,0,0,0,3.16,1.276,22.482,22.482,0,0,0,3.22-.426,17.464,17.464,0,0,1,2.977-.243,26.832,26.832,0,0,1,2.916.182q4.011,0.486,4.254.487,3.7,0,3.706-4.011a2.958,2.958,0,0,0-1.276-2.734l-1.154-.729a1.029,1.029,0,0,1-.547-0.85,6.1,6.1,0,0,1,1.215-2.492l3.524-5.346,3.463,6.015a4.734,4.734,0,0,1,.729,1.7,1.337,1.337,0,0,1-.85,1.033,6.087,6.087,0,0,0-1.823,1.367,3.574,3.574,0,0,0-.425,2.035,4.43,4.43,0,0,0,.911,2.886,2.968,2.968,0,0,0,2.43,1.125q0.364,0,3.281-.426a30.218,30.218,0,0,1,3.889-.182,24.641,24.641,0,0,1,3.585.182,31.32,31.32,0,0,0,3.159.426,4.046,4.046,0,0,0,3.1-1.307,4.588,4.588,0,0,0,1.215-3.25q0-3.888-3.159-3.889h-0.547a3.77,3.77,0,0,1-.608.061,4.52,4.52,0,0,1-1.093.121,2.254,2.254,0,0,1-1.459-.547l-0.911-1.336-1.094-1.458-6.076-9.54,6.076-8.384q2.308-3.221,3.707-3.221a7.765,7.765,0,0,1,1.033.183h0.789a2.94,2.94,0,0,0,2.37-1.094,4.217,4.217,0,0,0,.911-2.8,4.848,4.848,0,0,0-1.154-3.281,3.567,3.567,0,0,0-2.795-1.337,24.8,24.8,0,0,0-3.159.3,24.764,24.764,0,0,1-3.221.3,26.2,26.2,0,0,1-3.341-.3,26.3,26.3,0,0,0-3.281-.3,3.45,3.45,0,0,0-2.735,1.185,4.59,4.59,0,0,0-1.033,3.129,3.389,3.389,0,0,0,1.823,2.917,1.326,1.326,0,0,1,.79,1.033,5.641,5.641,0,0,1-1.033,2.248l-3.463,5.529-2.977-5.529a5.3,5.3,0,0,1-.79-2.248,1.216,1.216,0,0,1,.729-1.033l0.972-.608a2.605,2.605,0,0,0,1.033-2.37,4.424,4.424,0,0,0-1.063-3.068,3.542,3.542,0,0,0-2.765-1.185,27.777,27.777,0,0,0-3.4.3,27.62,27.62,0,0,1-3.4.3q-0.791,0-4.739-.486a17.221,17.221,0,0,0-2.127-.122,4.6,4.6,0,0,0-3.372,1.286,4.508,4.508,0,0,0-1.306,3.365q0,3.856,3.342,3.856H667.4q1.944,0,4.01,3.143l6.076,9.251-6.136,8.585Z" transform="translate(-662.188 -278.938)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="47.282" height="41.062" viewBox="0 0 47.282 41.062"> <path id="y" d="M629.665,288.834a1.921,1.921,0,0,1-.243-0.972V287.68a0.63,0.63,0,0,1,.365-0.608q0.364-.181,1.215-0.668a2.686,2.686,0,0,0,1.4-2.613q0-4.557-4.131-4.557a20.445,20.445,0,0,0-2.734.243,31.1,31.1,0,0,1-4.254.365,30.782,30.782,0,0,1-3.645-.3,30.685,30.685,0,0,0-3.463-.3q-4.254,0-4.254,4.74,0,3.707,2.917,3.706a7.608,7.608,0,0,0,1.64-.243,5.757,5.757,0,0,1,1.155-.182,2.352,2.352,0,0,1,2.066,1.336l8.992,14.765a8.8,8.8,0,0,1,1.58,4.435v1.7q0,2.795-1.762,2.794a12.1,12.1,0,0,1-1.853-.212,12.184,12.184,0,0,0-1.854-.213q-3.462,0-3.463,4.071a4.274,4.274,0,0,0,1.215,3.16,4.354,4.354,0,0,0,3.221,1.215q1.7,0,5.043-.3t5.043-.3q1.578,0,4.678.3t4.618,0.3a4.57,4.57,0,0,0,3.281-1.155,4.149,4.149,0,0,0,1.215-3.159,4.558,4.558,0,0,0-.942-2.977,2.966,2.966,0,0,0-2.4-1.155,11.61,11.61,0,0,0-1.823.213,11.688,11.688,0,0,1-1.883.212q-2.067,0-1.944-2.794v-1.7a9.8,9.8,0,0,1,1.463-4.739l8.046-12.82a20.088,20.088,0,0,1,1.767-2.552,1.746,1.746,0,0,1,1.281-.425,5.858,5.858,0,0,1,1.22.182,8.382,8.382,0,0,0,1.645.243,2.717,2.717,0,0,0,2.225-1.124,4.431,4.431,0,0,0,.884-2.825A4.5,4.5,0,0,0,656,280.45a4.172,4.172,0,0,0-3.129-1.216,24.146,24.146,0,0,0-3.129.3,24.07,24.07,0,0,1-3.19.3,34.942,34.942,0,0,1-4.01-.425,18.82,18.82,0,0,0-2.673-.183q-4.376,0-4.375,4.314a3.035,3.035,0,0,0,1.58,2.917,1.846,1.846,0,0,1,1.215,1.336,7.442,7.442,0,0,1-1.033,2.431l-3.645,6.562-3.281-6.562a10.337,10.337,0,0,1-.669-1.4h0Z" transform="translate(-609.906 -279.25)"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="36.344" height="41.125" viewBox="0 0 36.344 41.125"> <path id="z" d="M714.8,312.351a7.316,7.316,0,0,0-1.276,3.464,3.989,3.989,0,0,0,1.216,3.037,4.563,4.563,0,0,0,3.281,1.155q2,0,4.86-.182,1.762-.123,6.38-0.061h6.38q5.224,0,6.258.061l3.16,0.182h0.3q4.5,0,4.5-3.646a20.364,20.364,0,0,0-.212-2.4,19.934,19.934,0,0,1-.213-2.4,31.818,31.818,0,0,1,.243-3.463,22.414,22.414,0,0,0,.182-2.309,4.728,4.728,0,0,0-1.215-3.4,4.238,4.238,0,0,0-3.22-1.276,4.378,4.378,0,0,0-3.281,1.245,4.667,4.667,0,0,0-1.276,3.251q0,0.729.152,2.187t0.152,2.127a2.135,2.135,0,0,1-1.7,2.248,23.729,23.729,0,0,1-3.221.121h-8.992l19.625-24.3q2.247-2.795,2.248-4.922,0-4.193-3.888-4.192-1.155,0-3.464.121t-3.463.122h-6.38q-4.556,0-6.379-.061-3.889-.181-4.193-0.182l-2.673.243a6.837,6.837,0,0,0-2.552.422,2.221,2.221,0,0,0-1.033,2.173q0,1.326.061,2.05,0.182,2.173.182,2.775,0,0.664-.182,2.413-0.243,2.293-.243,2.716a4.4,4.4,0,0,0,1.245,3.318,4.637,4.637,0,0,0,3.373,1.206,4.743,4.743,0,0,0,3.311-1.245,3.925,3.925,0,0,0,1.367-3.008q0-.181-0.121-1.215l-0.122-.79a11.265,11.265,0,0,1-.061-1.337,2.277,2.277,0,0,1,.638-1.853,4.011,4.011,0,0,1,2.4-.516h8.2l-19.382,24.486Z" transform="translate(-713.531 -278.875)"/> </svg> </symbol> </svg> </div><!-- hidden SVG alphabet --> <div id="textarea" class="box"></div> <h4>This currently works as intended in the lastest version of Chrome, Firefox and Safari.</h4> <h4>It currently does not work as intended in either IE or Edge</h4> <p>In Edge, the display: inline-block; property has a default width if not specified. Since we are trying to emulate words, we need the block-style behaviour to guarantee the letters will not break midway the word if there is no more horizontal space.</p> <p>In IE9, 10 and 11. If no width or heigth is declared for the SVG element, the browser will add a default width and/or heigth - which is undesired in our situation. All other browsers will honour the viewBox apect ratio and we can control the size of the letter by only using its heigth.</p> <p>Note - This setup only works when the letters (or their viewBox) have the same height.</p>
</div> <script src='js/zwxoxy.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SVGText - Pattern Fill - Script Codes CSS Codes
/* **************************************** */
/* Default CSS styles being imported from:
/* https://codepen.io/dipscom/pen/RWXPBB
/* **************************************** */
/* Reseting some of the original styles to suit our needs */
.box { width: 100%;
}
/* ****************** */
/* Notes and reminders
/* ****************** */
/* IE requires a explicitly width and height on the SVG, otherwise it will default to a pre-set width/height
/* EDGE on the other hand, does not require a width and height for the SVG element but it does not like the display: inline-block setup.
/* ****************** */
/* Local CSS styling
/* ****************** */
#textarea { position: relative; /* .svgText */ /* .width */
}
#textarea .svgText { border: none; background: transparent; /* In one ideal world - we would have display: inline-block but MS Edge has a default with if not explicitly defined that breaks our layout. Instead, we have to use display: inline and adjust the line height to meet our needs. It effectively ruins the encapsulating of the SVG letters into a container
, because the sole purpose of doing so is to recreate the block-like behaviours of words, that they do not break apart at the end of the line. For now, we can only wait for better suppor. */ display: inline-block; margin-right: 2em; line-height: 3; /* If no unit is presented, the number provided will be a multiplier */ /* Some letters will need their margin adjusted in order to make the kerning look right */ /* Others will need their width adjusted because of IE9,10 and 11 */
}
#textarea .svgText svg { display: inherit; height: 30px; /* One has to explicity define a width because of IE9,10, and 11. All other major browsers, will respect the aspect ratio defined in the SVG viewBox. The problem is that each letter has a different width and this can get very messy and time-consuming if we have to adjust width and heigth of every letter all the time. */ vertical-align: text-bottom; margin-right: 0.25em; fill: url(#diagonalHatch);
}
#textarea .svgText:last-child { margin-right: 0;
}
#textarea .svgText .w { margin-left: -0.8em; margin-right: -0.8em;
}
#textarea .with .w, #textarea .webfont .w { margin-left: 0; margin-right: 0.2em;
}
SVGText - Pattern Fill - Script Codes JS Codes
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) { // wait until window, stylesheets, images, links, and other media assets are loaded window.onload = function() { var text = new SVGText(); text.write("textarea", "here is some text using a fake webfont with pattern fill but no numbers", 'svgText'); }
});
Do you need developer help for SVGText - Pattern Fill?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!
