svg文字遮罩动画效果代码-html代码-BFW代码库

svg文字遮罩动画效果代码

代码语言：html

所属分类：动画

代码描述：svg文字遮罩动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

svg {
  flex: 1 1 auto;
  max-width: 90vw;
}
</style>


</head>

<body>

<svg viewBox="0 0 233.7 86.301"  aria-labelledby="myName" role="img">
  <title id="myName">Cassie</title>
   
  <clipPath id="myClip">
    <path d="M 6.3 29.1 L 1 18.4 A 58.3 58.3 0 0 1 8.201 14.396 Q 12.111 12.593 15.752 11.777 A 26.694 26.694 0 0 1 21.6 11.1 A 9.522 9.522 0 0 1 24.465 11.499 Q 27.483 12.45 28.613 15.667 A 10.6 10.6 0 0 1 29 17.1 A 48.253 48.253 0 0 1 37.936 13.067 A 36.01 36.01 0 0 1 49.2 11.2 Q 55.7 11.2 60.6 14.2 Q 66.29 17.634 66.398 25.975 A 25.076 25.076 0 0 1 66.4 26.3 A 19.582 19.582 0 0 1 58.29 42.683 Q 55.116 45.1 50.7 46.9 A 26.247 26.247 0 0 1 57.606 49.023 Q 65.244 52.713 66.467 61.333 A 24.683 24.683 0 0 1 66.7 64.8 A 18.985 18.985 0 0 1 64.921 73.109 Q 62.903 77.319 58.6 80.4 Q 50.5 86.2 40.45 86.2 Q 32.874 86.2 27.542 83.813 A 20.399 20.399 0 0 1 24.3 82 A 23.574 23.574 0 0 1 18.707 85.069 A 18.947 18.947 0 0 1 12 86.3 A 17.171 17.171 0 0 1 8.601 85.987 Q 6.636 85.59 5.156 84.688 A 8.288 8.288 0 0 1 2.8 82.55 A 12.104 12.104 0 0 1 1.04 79.056 Q 0.492 77.386 0.233 75.335 A 31.882 31.882 0 0 1 0 71.35 A 42.318 42.318 0 0 1 0.222 67.595 Q 1.182 57.375 6.3 29.1 Z M 204.6 76.4 L 203.6 75.9 Q 195.8 86.2 185 86.2 A 17.139 17.139 0 0 1 172.243 80.712 A 22.717 22.717 0 0 1 171.45 79.85 A 21.517 21.517 0 0 1 166.852 70.881 Q 166.019 67.636 165.915 63.806 A 40.714 40.714 0 0 1 165.9 62.7 A 36.142 36.142 0 0 1 173.754 40.209 A 46.341 46.341 0 0 1 175.3 38.3 A 30.203 30.203 0 0 1 182.261 32.351 A 39.741 39.741 0 0 1 187.6 29.55 A 40.453 40.453 0 0 1 199.599 26.465 A 49.907 49.907 0 0 1 204.8 26.2 A 27.243 27.243 0 0 1 205.856 26.224 Q 207.293 26.281 209.662 26.471 A 231.286 231.286 0 0 1 211.2 26.6 A 27.488 27.488 0 0 1 211.421 24.899 Q 211.542 24.137 211.712 23.287 A 57.565 57.565 0 0 1 212.1 21.5 L 206.5 13.5 A 92.502 92.502 0 0 1 212.419 10.307 Q 220.8 6.2 226.2 6.2 Q 229.87 6.2 231.617 7.522 A 4.11 4.11 0 0 1 232 7.85 A 4.412 4.412 0 0 1 232.966 9.322 Q 233.537 10.673 233.664 12.781 A 21.123 21.123 0 0 1 233.7 14.05 A 22.235 22.235 0 0 1 233.544 16.338 Q 232.92 22.063 229.805 37.05 A 916.292 916.292 0 0 1 229.25 39.7 Q 224.874 60.45 224.802 69.353 A 36.427 36.427 0 0 0 224.8 69.65 A 39.403 39.403 0 0 0 224.971 73.466 Q 225.527 79.157 227.9 81.3 A 22.6 22.6 0 0 1 223.637 84.286 A 15.578 15.578 0 0 1 216.25 86.2 A 19.017 19.017 0 0 1 213.024 85.945 Q 209.391 85.319 207.4 83.15 A 11.246 11.246 0 0 1 205.489 80.364 A 9.153 9.153 0 0 1 204.6 76.4 Z M 120.3 37.3 L 115.1 29.3 Q 127.6 23.7 132.65 23.7 A 5.605 5.605 0 0 1 134.904 24.119 Q 137.314 25.169 137.647 28.851 A 13.881 13.881 0 0 1 137.7 30.1 Q 137.7 33.14 135.212 41.91 A 232.802 232.802 0 0 1 134.4 44.7 L 135.4 45.2 A 77.47 77.47 0 0 1 138.47 37.353 Q 142.025 29.653 146.287 26.296 A 11.144 11.144 0 0 1 153.3 23.7 A 12.775 12.775 0 0 1 156.333 24.039 A 8.371 8.371 0 0 1 160.8 26.7 A 10.805 10.805 0 0 1 162.77 29.928 A 9.662 9.662 0 0 1 163.4 33.4 A 1.........完整代码请登录后点击上方下载按钮下载查看