<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js">
</script>
<style>@charset "utf-8";
/*=============== レイアウトのためのCSS =================*/
body {
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(255, 209, 67, 0.5) 0%,
rgba(255, 145, 83, 1) 90%
);
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
/*SVGのサイズ*/
svg {
max-width: 800px; /*SVGタグの横幅*/
width: 100%; /* レスポンシブ対応にするため100%を指定*/
height: auto;
}
/*========= 手書き風にするためのCSS ===============*/
/* マスクをするパスの設定*/
#mask .st0 {
fill: none;
stroke: #ffffff;
stroke-width: 90; /*線の太さを指定する*/
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
stroke-dasharray: 1500; /* 線の間隔を指定する */
stroke-dashoffset: 1500; /* 線の位置を指定する */
}</style>
</head>
<body>
<body>
<div class="wrapper">
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="739" height="258.9" viewBox="0 0 739 258.9" style="enable-background:new 0 0 739 258.9;" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://localhost:10072/wp-content/uploads/demos/_assets/text.svg" width="739" height="258.9" mask="url(#clipmask)">
</image>
<mask id="clipmask" maskUnits="objectBoundingBox">
<path class="st0" d="M124.9,73.4c0,0,57.3-46.5,22.9-66.6c-35.2-20.7-87,8.9-90.1,55.4c-3.1,46.6,48.4,84.2,34.7,130.7
s-59.6,47.3-79.7,39.8c-20.1-7.4-14.9-75.1,5.8-79.5l147.1,10.8c0,0,39.2-11.3,38.4-31.1c-0.8-19.8-4.4-35.8-13-35.7
c-25.3,0.3-45.7,63.3-51.4,95.7c-6,34.8,3,35.9,22.5,29c19.5-6.9,102.7-186.4,133.4-79.5c-20-19.8-51.6-34.7-59.9-0.3
c-8.3,34.4-33.7,68.2-6,68s87-105.9,85.5-98C299.1,153.4,265.3,228,298,221.9c32.7-6.1,74.4-118.2,74.4-118.2
c4.2,56.7,21.2,122.4,0,133.3c-21.2,10.9-51.2,37.6-47.6,9.6c3.6-27.9,126.1-113.8,131.5-118.6c-16.2,48.5-21.8,70.8-0.3,64.9
s46.7-83.1,69.7-71.6c22.9,11.5,27.1,16.3,27.1,16.3s-70.8,32-62.3,72.6s143.6-109.4,151.2-147c7.6-37.7,17.8-50.1-10.8-50.1
c-34.5,0-107.4,268.4-65.2,224c41.9-44.1,140.1-100.1,141.2-124.8c1.1-24.7-11.1-15-25.2-8.5c-14.1,6.5-48.7,31.3-42.3,62.8
s2.8,66.1,26,55.4s73.6-79.8,73.6-79.8" />
<line class="st0" x1="490.5" y1="50.6" x2="459.9" y2="103.6" />
</mask>
</svg>
</div>
<!--/wrapper-->
<script>new Vivus("mask", {
//svgに指定したid名
type: "scenario-sync", // アニメーションのタイプを設定
duration: 130, //アニメーションの時間。数字が小さくなれば速くなり、大きくなれば遅くなる
forceRender: false, //パスが更新された場合に再レンダリングさせない
animTimingFunction: Vivus.EASE_OUT //動きの加速減速設定
});
//# sourceURL=pen.js</script>
</body>
</html>