《CSS》SVGの手書き風アニメーション

<svg id="stroke" xmlns="http://www.w3.org/2000/svg" width="750" height="240" viewBox="0 0 750 240">
	<g id="stroke-line">
		<path class="stroke-path" d="M1.3,55.7S83.5,3.7,143.3,2.5c74.5-1.4,90.6,50.8,80.1,100-26.1,122.8,52.6,133.6,110.9,120.8,104.8-23.1,287.4-191.4,248-210-21.6-10.2-42.5,57.3-20,78,53.7,49.6,189,53,189,53"/>
	</g>
</svg>

.stroke-path {
	animation: stroke-written 2.5s ease forwards;
	fill: none;
	stroke: #111;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	stroke-miterlimit: 10;
	stroke-width: 5px;
}
@keyframes stroke-written {
	to {
		stroke-dashoffset: 0;
	}
}

<svg class="stroke2" xmlns="http://www.w3.org/2000/svg" width="543.06" height="245.666" viewBox="0 0 543.06 245.666">
	<g class="stroke2-mask">
		<g class="stroke2-text">
			<path d="M25.485,165.654c-7.097,0-12.614-1.302-16.553-3.906-3.939-2.604-5.908-5.762-5.908-9.473,0-2.864,1.009-4.932,3.027-6.201,2.018-1.27,4.036-1.904,6.055-1.904,1.106,0,2.197.358,3.271,1.074,1.074.717,1.611,1.855,1.611,3.418,0,1.237-.554,2.36-1.66,3.369-1.107,1.01-2.409,1.514-3.906,1.514-1.953,0-3.451-.325-4.492-.977v.488c0,2.865,1.644,5.29,4.932,7.275,3.287,1.986,7.308,2.979,12.061,2.979,6.966,0,13.248-1.741,18.848-5.225,5.599-3.482,10.774-8.089,15.527-13.818,4.752-5.729,9.261-12.076,13.525-19.043,4.264-6.966,8.512-13.965,12.744-20.996l1.953-3.223c-10.287-.391-19.482-1.937-27.588-4.639-8.105-2.701-14.421-6.396-18.945-11.084-4.525-4.688-6.592-10.123-6.201-16.309.325-5.794,2.408-11.148,6.25-16.064,3.841-4.915,8.968-9.18,15.381-12.793,6.412-3.613,13.672-6.429,21.777-8.447,8.105-2.017,16.617-3.027,25.537-3.027,4.817,0,9.033.456,12.646,1.367,3.613.913,5.42,1.823,5.42,2.734,0,.261-.391.391-1.172.391-.456,0-.896-.049-1.318-.146-.424-.098-.896-.179-1.416-.244-2.084-.521-4.216-.96-6.396-1.318-2.182-.357-4.802-.537-7.861-.537-7.553,0-14.958.961-22.217,2.881-7.26,1.921-13.867,4.639-19.824,8.154s-10.742,7.715-14.355,12.598-5.583,10.319-5.908,16.309c-.261,3.906,1.285,7.944,4.639,12.109,3.353,4.167,8.609,7.715,15.771,10.645,7.161,2.93,16.275,4.59,27.344,4.98,15.56-24.478,29.85-42.251,42.871-53.32,13.021-11.067,25.391-16.602,37.109-16.602,3.906,0,6.998,1.042,9.277,3.125,2.278,2.084,3.32,5.078,3.125,8.984-.261,5.014-2.458,10.645-6.592,16.895-4.135,6.25-9.75,12.37-16.846,18.359-7.097,5.991-15.268,11.198-24.512,15.625-9.245,4.428-19.174,7.324-29.785,8.691-5.534,8.529-11.166,16.716-16.895,24.561-5.729,7.846-11.703,14.828-17.92,20.947-6.218,6.12-12.826,10.954-19.824,14.502-6.999,3.549-14.535,5.322-22.607,5.322ZM104.587,97.587c9.375-1.562,18.262-4.476,26.66-8.74,8.398-4.264,15.853-9.229,22.363-14.893,6.51-5.664,11.67-11.458,15.479-17.383,3.809-5.923,5.843-11.328,6.104-16.211.325-3.516-.358-5.957-2.051-7.324-1.693-1.367-3.418-2.017-5.176-1.953-8.073.261-16.65,5.144-25.732,14.648-9.082,9.506-19.32,23.21-30.713,41.113-1.172,1.823-2.344,3.613-3.516,5.371s-2.312,3.549-3.418,5.371Z"/>
			<path d="M115.915,165.654c-4.167,0-7.211-1.139-9.131-3.418-1.92-2.278-2.881-5.403-2.881-9.375,0-4.361.928-9.017,2.783-13.965,1.855-4.947,4.932-9.863,9.229-14.746,8.789-10.221,17.008-17.041,24.658-20.459,7.649-3.418,14.827-5.127,21.533-5.127,3.385,0,6.25.717,8.594,2.148,2.344,1.433,3.516,3.386,3.516,5.859,0,1.889-.391,3.809-1.172,5.762,2.083-2.474,3.857-4.639,5.322-6.494s2.881-3.629,4.248-5.322c1.692.521,3.646.781,5.859.781.911,0,2.148-.032,3.711-.098,1.562-.064,2.767-.162,3.613-.293l-32.91,39.648c-4.167,4.948-7.162,8.969-8.984,12.061-1.823,3.093-2.734,5.485-2.734,7.178,0,2.084,1.009,3.125,3.027,3.125,3.516,0,7.161-1.025,10.938-3.076,3.775-2.051,7.486-4.688,11.133-7.91,3.646-3.223,7.063-6.575,10.254-10.059,3.189-3.482,6.006-6.705,8.447-9.668,2.441-2.962,4.312-5.159,5.615-6.592l1.953,1.66c-1.433,1.628-3.451,3.972-6.055,7.031-2.604,3.061-5.583,6.381-8.936,9.961-3.354,3.581-6.967,6.999-10.84,10.254-3.874,3.256-7.846,5.925-11.914,8.008-4.069,2.084-8.09,3.125-12.061,3.125-6.511,0-9.766-2.018-9.766-6.055,0-1.497.276-3.011.83-4.541.553-1.529,1.676-3.516,3.369-5.957,1.692-2.441,4.231-5.713,7.617-9.814l-.977-.391c-7.943,9.766-15.283,16.667-22.021,20.703-6.738,4.037-12.028,6.055-15.869,6.055ZM116.305,162.724c4.166,0,9.668-2.425,16.504-7.275,6.836-4.85,15.039-12.939,24.609-24.268,1.562-1.888,3.011-3.646,4.346-5.273,1.334-1.627,2.62-3.157,3.857-4.59,1.497-2.278,2.848-4.654,4.053-7.129,1.204-2.474,1.807-4.72,1.807-6.738s-.717-3.499-2.148-4.443c-1.433-.943-2.995-1.416-4.688-1.416-3.19,0-8.35,2.295-15.479,6.885s-14.958,11.931-23.486,22.021c-4.883,5.859-8.398,11.068-10.547,15.625-2.148,4.558-3.223,8.398-3.223,11.523,0,3.386,1.465,5.078,4.395,5.078Z"/>
			<path d="M294.04,165.947c-3.516,0-6.576-.699-9.18-2.1-2.604-1.399-3.906-3.238-3.906-5.518,0-1.758.439-3.841,1.318-6.25.879-2.408,2.848-5.713,5.908-9.912,3.06-4.199,7.779-9.879,14.16-17.041,5.078-5.794,8.626-10.286,10.645-13.477,2.018-3.189,3.027-5.566,3.027-7.129,0-.911-.358-1.725-1.074-2.441-.717-.716-2.019-1.074-3.906-1.074-1.562,0-3.549.554-5.957,1.66-2.409,1.107-5.729,3.256-9.961,6.445-5.078,3.842-11.052,9.262-17.92,16.26-6.869,6.999-14.47,15.771-22.803,26.318l-9.082,11.914c-1.562-.325-3.418-.488-5.566-.488-2.279,0-4.216.114-5.811.342-1.596.229-2.751.439-3.467.635,3.841-4.688,6.819-8.333,8.936-10.938,2.115-2.604,3.809-4.703,5.078-6.299,1.27-1.595,2.49-3.157,3.662-4.688,1.172-1.529,2.701-3.531,4.59-6.006,1.888-2.474,4.557-5.989,8.008-10.547,3.775-4.947,6.592-8.838,8.447-11.67s3.108-4.98,3.76-6.445c.65-1.465.977-2.62.977-3.467,0-2.018-1.596-3.027-4.785-3.027-1.628,0-3.809.57-6.543,1.709-2.734,1.14-6.12,3.305-10.156,6.494-4.492,3.581-10.141,8.887-16.943,15.918-6.804,7.031-14.567,15.886-23.291,26.562l-9.082,11.914c-.912-.195-1.84-.325-2.783-.391-.944-.064-1.872-.098-2.783-.098-2.344,0-4.313.114-5.908.342-1.596.229-2.718.439-3.369.635,7.291-10.547,13.379-19.287,18.262-26.221s8.805-12.483,11.768-16.65c2.962-4.166,5.176-7.34,6.641-9.521,1.465-2.181,2.457-3.743,2.979-4.688.521-.943.813-1.709.879-2.295.13-1.888-.586-2.832-2.148-2.832-.912,0-2.344.912-4.297,2.734-1.953,1.823-4.15,4.102-6.592,6.836s-4.834,5.551-7.178,8.447c-2.344,2.897-4.395,5.42-6.152,7.568-.456.261-1.042.098-1.758-.488-.391-.586-.488-.977-.293-1.172,1.888-2.018,4.02-4.541,6.396-7.568,2.376-3.027,4.866-6.055,7.471-9.082,2.604-3.027,5.273-5.55,8.008-7.568,2.734-2.018,5.371-3.027,7.91-3.027,1.888,0,3.76.407,5.615,1.221,1.855.814,2.62,2.751,2.295,5.811-.065,1.042-.391,2.36-.977,3.955-.586,1.596-1.758,3.63-3.516,6.104l-20.508,28.516.488,1.074c9.114-10.547,16.829-19.026,23.145-25.439,6.314-6.412,11.458-11.019,15.43-13.818,3.775-2.864,7.08-4.817,9.912-5.859,2.832-1.041,5.55-1.562,8.154-1.562,4.166,0,7.145,1.025,8.936,3.076,1.79,2.051,2.62,4.313,2.49,6.787-.131,2.344-.488,4.46-1.074,6.348-.586,1.889-1.953,4.492-4.102,7.812,5.664-5.794,10.742-10.514,15.234-14.16,4.883-3.971,8.87-6.607,11.963-7.91,3.092-1.302,5.973-1.953,8.643-1.953,4.231,0,7.21,1.025,8.936,3.076,1.725,2.051,2.555,4.313,2.49,6.787-.065,2.604-.928,5.713-2.588,9.326s-4.492,8.105-8.496,13.477-9.619,11.996-16.846,19.873c-3.386,3.516-5.404,5.778-6.055,6.787-.651,1.01-.977,1.938-.977,2.783l-.684.098c0,1.562,2.376,2.344,7.129,2.344,3.189,0,6.673-1.139,10.449-3.418,3.775-2.278,7.568-5.143,11.377-8.594,3.809-3.45,7.373-6.982,10.693-10.596s6.119-6.787,8.398-9.521c2.278-2.734,3.743-4.459,4.395-5.176l2.051,1.66c-.781.847-2.36,2.686-4.736,5.518-2.377,2.832-5.29,6.088-8.74,9.766-3.451,3.679-7.194,7.292-11.23,10.84-4.037,3.549-8.105,6.494-12.207,8.838s-7.976,3.516-11.621,3.516Z"/>
			<path d="M269.235,234.697c-.781,0-1.937-.082-3.467-.244-1.529-.163-2.75-.375-3.662-.635,5.014-6.771,10.678-14.421,16.992-22.949,6.315-8.529,12.842-17.416,19.58-26.66,6.738-9.245,13.314-18.311,19.727-27.197,6.413-8.887,12.158-17.041,17.236-24.463,3.775-5.208,6.934-9.537,9.473-12.988,2.539-3.45,4.898-6.607,7.08-9.473,2.181-2.864,4.524-5.957,7.031-9.277,2.506-3.32,5.566-7.405,9.18-12.256,3.613-4.85,8.187-11.019,13.721-18.506,2.344.261,4.215.424,5.615.488,1.399.065,2.588.098,3.564.098.911,0,1.839-.049,2.783-.146.943-.098,1.871-.276,2.783-.537-5.729,6.967-10.547,12.81-14.453,17.529-3.906,4.721-7.194,8.725-9.863,12.012-2.67,3.288-5.046,6.267-7.129,8.936-2.084,2.67-4.15,5.371-6.201,8.105s-4.411,5.908-7.08,9.521c-2.67,3.613-5.99,8.09-9.961,13.428l.684.781c20.247-19.466,35.188-31.705,44.824-36.719,3.06-1.562,5.777-2.783,8.154-3.662,2.376-.879,5.55-1.318,9.521-1.318,3.255,0,5.615.749,7.08,2.246,1.465,1.498,2.197,3.451,2.197,5.859,0,4.948-2.165,10.352-6.494,16.211-4.33,5.859-11.963,12.663-22.9,20.41-6.511,4.623-10.742,7.959-12.695,10.01s-2.93,3.793-2.93,5.225c0,2.93,2.311,4.395,6.934,4.395,4.557,0,9.212-1.448,13.965-4.346,4.752-2.896,9.342-6.445,13.77-10.645,4.427-4.199,8.414-8.35,11.963-12.451,3.548-4.102,6.331-7.324,8.35-9.668l2.148,1.66c-1.953,2.214-4.736,5.404-8.35,9.57-3.613,4.167-7.78,8.447-12.5,12.842-4.721,4.395-9.652,8.122-14.795,11.182-5.144,3.061-10.189,4.59-15.137,4.59-3.842,0-6.689-.862-8.545-2.588-1.855-1.725-2.783-4.085-2.783-7.08,0-4.427,2.441-9.732,7.324-15.918,4.883-6.185,13.15-13.606,24.805-22.266,5.794-4.166,9.342-7.193,10.645-9.082,1.302-1.888,1.953-3.418,1.953-4.59,0-.781-.342-1.497-1.025-2.148-.684-.65-1.677-.977-2.979-.977-3.061,0-6.055.521-8.984,1.562-2.93,1.042-6.088,2.572-9.473,4.59-4.167,2.409-8.887,5.697-14.16,9.863-5.273,4.167-10.71,8.838-16.309,14.014-5.6,5.176-11.084,10.563-16.455,16.162-5.371,5.6-10.303,11.068-14.795,16.406-3.255,4.297-6.885,9.375-10.889,15.234s-8.04,11.881-12.109,18.066c-4.068,6.185-7.845,11.979-11.328,17.383-3.482,5.403-6.348,9.896-8.594,13.477-2.246,3.58-3.531,5.631-3.857,6.152-.65.195-1.725.374-3.223.537-1.497.162-3.482.244-5.957.244Z"/>
			<path d="M417.672,165.654c-2.734,0-4.996-.765-6.787-2.295-1.79-1.529-2.686-3.401-2.686-5.615,0-1.758.212-3.467.635-5.127.424-1.66,1.367-3.809,2.832-6.445s3.694-6.201,6.689-10.693c2.994-4.492,7.063-10.449,12.207-17.871L506.051,9.697c.911.065,2.066.163,3.467.293,1.399.131,3.401.163,6.006.098.521,0,1.123-.049,1.807-.146s1.448-.179,2.295-.244l-80.273,111.426c-5.859,8.203-10.449,14.697-13.77,19.482s-5.762,8.432-7.324,10.938c-1.562,2.507-2.539,4.297-2.93,5.371s-.586,2.002-.586,2.783c0,2.148,1.529,3.223,4.59,3.223,3.841,0,7.894-1.139,12.158-3.418,4.264-2.278,8.479-5.127,12.646-8.545,4.166-3.418,8.008-6.917,11.523-10.498,3.516-3.58,6.494-6.738,8.936-9.473s4.053-4.459,4.834-5.176l1.953,1.66c-.847.847-2.539,2.67-5.078,5.469-2.539,2.8-5.664,6.039-9.375,9.717-3.711,3.679-7.764,7.275-12.158,10.791s-8.92,6.43-13.574,8.74c-4.655,2.312-9.164,3.467-13.525,3.467Z"/>
			<path d="M476.364,166.044c-6.381,0-10.938-1.66-13.672-4.98s-4.167-7.389-4.297-12.207c-.065-3.516.65-7.422,2.148-11.719,1.497-4.297,3.06-7.584,4.688-9.863,4.817-6.705,10.025-12.174,15.625-16.406,5.599-4.231,11.084-7.34,16.455-9.326,5.371-1.985,10.107-2.979,14.209-2.979,3.971,0,6.754.651,8.35,1.953,1.595,1.303,2.425,2.8,2.49,4.492.195,2.539-1.156,5.485-4.053,8.838-2.897,3.354-7.959,6.982-15.186,10.889s-17.318,8.008-30.273,12.305c-2.279,3.646-3.809,6.787-4.59,9.424s-1.172,4.997-1.172,7.08c0,3.061,1.025,5.437,3.076,7.129,2.051,1.693,4.476,2.539,7.275,2.539,6.119,0,11.865-1.155,17.236-3.467,5.371-2.311,10.286-5.225,14.746-8.74,4.459-3.516,8.382-7.08,11.768-10.693,3.385-3.613,6.152-6.771,8.301-9.473,2.148-2.701,3.58-4.378,4.297-5.029l2.051,1.66c-.977.847-2.621,2.702-4.932,5.566-2.312,2.865-5.241,6.152-8.789,9.863-3.549,3.711-7.634,7.324-12.256,10.84-4.623,3.516-9.75,6.445-15.381,8.789-5.632,2.344-11.67,3.516-18.115,3.516ZM475.094,133.622c6.315-2.213,11.963-4.463,16.943-6.75s9.294-4.61,12.94-6.971c7.291-4.72,10.938-9.229,10.938-13.525,0-3.646-1.693-5.469-5.078-5.469-4.362,0-9.082,2.344-14.16,7.031s-11.003,11.491-17.773,20.41c-1.433,1.823-2.702,3.581-3.809,5.273Z"/>
		</g>
		<mask id="stroke2-anime">
			<path class="stroke2-mask1" d="M127.701,33.85c-16.895-4.492-49.924-2.163-70.549,5.328-13.784,5.006-22.284,16.839-20.284,33.339s26.835,30.174,58,26.047,98.5-47.047,80.403-64.547c-22.905-22.15-71.368,48.5-88.598,80.685-10.882,20.328-39.418,50.374-61.188,50.952-23.117.613-22.117-12.887-7.367-23.387"/>
			<path class="stroke2-mask2" d="M173.044,112.333c1.172-5.762-12.401-30.022-46.176,7.184-31.167,34.333-20.511,45.451-14.957,45.705,7.689.351,72.124-63.63,72.124-63.63l4.439-.293c-8.594,21.039-50.6,58.172-38.603,64.195,4.497,2.258,24.237-10.979,36.65-23.619"/>
			<path class="stroke2-mask3" d="M186.52,141.874c16.787-17.261,39.285-45.132,46.514-40.283,9.333,6.259-42.295,66.601-42.295,66.601,27.697-32.707,68.3-73.437,84.628-66.601s-44.333,69.259-44.333,69.259c0,0,58.162-71.857,79.997-69.845s-23.156,48.182-24.664,55.512c-1.305,6.342,19.875,7.75,36.625-22.75"/>
			<path class="stroke2-mask4" d="M394.036,61.616l-129.668,179.401,78.207-99s46.433-54.801,62.793-43.453c23,15.953-38.061,43.018-38,53.76s1.054,9.412,9.191,10.596c4.663.678,20.309-3.902,25.309-26.402"/>
			<path class="stroke2-mask5" d="M516.034,4.517s-103.184,136.771-104.167,147.807,4.83,15.234,12.08,12.548c5.074-1.879,25.545-10.98,30.795-34.23"/>
			<path class="stroke2-mask6" d="M473.993,136.017c8.02,4.862,19.206-3.129,27.375-8.25,12.203-7.65,19.91-16.062,18.258-23.25-2.758-12-32.883-.695-46.383,18.625s-16.285,31.375-9.33,38.375,61.333-1.4,71.924-39.32"/>
		</mask>
	</g>
</svg>

.stroke2-mask1,
.stroke2-mask2,
.stroke2-mask3,
.stroke2-mask4,
.stroke2-mask5,
.stroke2-mask6 {
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 15px;
}
.stroke2-mask1 {
	animation: stroke2-written 1s ease forwards;
	stroke-dasharray: 600px;
	stroke-dashoffset: 600px;
}
.stroke2-mask2 {
	animation: stroke2-written 1s ease 1s forwards;
	stroke-dasharray: 400px;
	stroke-dashoffset: 400px;
}
.stroke2-mask3 {
	animation: stroke2-written 1s ease 2s forwards;
	stroke-dasharray: 600px;
	stroke-dashoffset: 600px;
}
.stroke2-mask4 {
	animation: stroke2-written 1s ease 3s forwards;
	stroke-dasharray: 600px;
	stroke-dashoffset: 600px;
}
.stroke2-mask5 {
	animation: stroke2-written 1s ease 4s forwards;
	stroke-dasharray: 300px;
	stroke-dashoffset: 300px;
}
.stroke2-mask6 {
	animation: stroke2-written 1s ease 5s forwards;
	stroke-dasharray: 300px;
	stroke-dashoffset: 300px;
}
.stroke2-text {
	mask: url(#stroke2-anime);
}
@keyframes stroke2-written {
	to {
		stroke-dashoffset: 0;
	}
}