文本描边动画
查看代码
vue
<template>
<svg ref="svgRef" style="--color: #6c5ce7; width: 400px; height: 40px; margin: 16px auto">
<g>
<path
d="M34 36L34 36Q33 37 32 37L32 37Q24 33 20 28L20 28Q15 33 8 36L8 36Q8 36 7 36L7 36Q6 36 6 36L6 36Q6 36 6 35L6 35Q6 34 7 34L7 34Q13 31 18 26L18 26Q14 22 12 18L12 18L10 21Q10 21 9 21Q8 21 8 21L8 21Q8 21 8 20Q8 19 8 19L8 19Q11 16 12 14L12 14Q12 13 12 13Q13 13 13 13L13 13Q14 14 14 14L14 14Q14 15 14 15Q14 15 14 15L14 15Q16 20 19 24L19 24Q24 19 26 11L26 11L7 11Q7 11 6 10Q6 10 6 9L6 9Q6 9 6 9Q7 8 7 8L7 8L18 8L18 5Q18 4 19 4Q19 4 20 4L20 4Q20 4 21 4Q21 4 21 5L21 5L21 8L33 8Q33 8 34 9Q34 9 34 9L34 9Q34 10 34 10Q33 11 33 11L33 11L28 11Q26 20 21 26L21 26Q26 31 33 34L33 34Q34 35 34 35Q34 36 34 36Z"
/>
<path
d="M76 33L76 33Q76 34 75 34L75 34Q74 34 74 34L74 34Q69 30 67 25Q65 20 63 13L63 13L61 13L61 28L68 28Q69 28 69 29L69 29Q69 30 68 30L68 30L61 30L61 36Q61 36 61 37Q61 37 60 37L60 37Q60 37 59 37Q59 36 59 36L59 36L59 30L53 30Q52 30 52 30Q52 29 52 29L52 29Q52 28 53 28L53 28L59 28L59 13L56 13Q55 20 53 25Q50 30 46 34L46 34Q46 34 45 34L45 34Q45 34 44 34Q44 33 45 32L45 32Q48 28 50 24Q53 19 54 13L54 13L46 13Q45 13 45 12L45 12Q45 11 45 11Q45 10 46 10L46 10L59 10L59 4Q59 4 59 3Q60 3 60 3L60 3Q61 3 61 3Q61 4 61 4L61 4L61 10L74 10Q75 10 75 11Q75 11 75 12L75 12Q75 12 75 13Q75 13 74 13L74 13L66 13Q67 19 69 24Q72 28 76 32L76 32Q76 32 76 33Z"
/>
<path
d="M93 13L91 13L91 20L93 19Q93 19 94 19L94 19Q95 20 95 20L95 20Q95 21 94 21L94 21L91 23L91 32Q91 34 90 35Q88 37 86 37L86 37Q86 37 84 36L84 36Q83 36 83 35Q83 35 83 34L83 34Q84 33 85 34L85 34Q86 34 86 34L86 34Q88 34 88 32L88 32L88 24L85 25L84 25Q84 25 83 24L83 24L83 24Q83 23 84 23L84 23Q87 22 88 21L88 21L88 13L84 13Q84 13 83 13Q83 12 83 12L83 12Q83 11 84 11L84 11L88 11L88 4Q88 4 89 3Q89 3 89 3L89 3Q90 3 90 3Q91 4 91 4L91 4L91 11L93 11Q95 11 95 12L95 12Q95 13 93 13L93 13ZM117 9L117 9Q117 11 116 11L116 11L112 11L112 14Q112 14 112 15Q111 15 111 15L111 15Q110 15 110 15Q109 14 109 14L109 14L109 11L102 11L102 14Q102 14 101 15Q101 15 100 15L100 15Q99 15 99 14L99 14L99 11L95 11Q95 11 94 10Q94 10 94 9L94 9Q94 8 95 8L95 8L99 8L99 6Q99 5 100 5Q100 4 100 4L100 4Q101 4 101 5Q102 5 102 6L102 6L102 8L109 8L109 6Q109 5 110 5Q110 4 111 4L111 4Q111 4 112 5Q112 5 112 6L112 6L112 8L116 8Q117 8 117 9ZM115 20L115 20L115 32Q115 34 114 36Q113 37 111 37L111 37L100 37Q98 37 97 36Q96 34 96 32L96 32L96 20Q96 18 97 17Q98 16 100 16L100 16L111 16Q113 16 114 17Q115 18 115 20ZM98 20L98 20L98 24L99 24L104 24L104 19L104 18L100 18Q98 18 98 20ZM111 18L111 18L107 18L107 19L107 24L112 24L112 24L112 20Q112 19 112 19Q112 18 111 18ZM100 34L100 34L104 34L104 34L104 27L99 27L98 27L98 33Q98 34 100 34ZM112 33L112 33L112 27L112 27L107 27L107 34L107 34L111 34Q112 34 112 34Q112 33 112 33Z"
/>
<path
d="M137 32L137 32Q136 32 135 32Q135 31 136 30L136 30Q139 27 140 24Q142 21 142 17L142 17L142 12L138 12Q137 12 137 12Q136 11 136 11L136 11Q136 9 138 9L138 9L143 9L143 5Q143 4 144 4L144 4Q145 4 145 4Q145 4 145 5L145 5L145 9L150 9Q152 9 153 10Q155 12 155 13L155 13Q155 20 154 27L154 27Q154 30 153 31Q151 32 149 32L149 32Q149 32 147 32L147 32Q147 32 147 32Q146 31 146 31L146 31Q146 30 147 30Q147 29 148 29L148 29Q148 30 149 30L149 30Q151 30 152 27L152 27Q152 19 152 13L152 13Q152 12 150 12L150 12L145 12L145 17Q145 21 143 25Q141 28 137 32L137 32Q137 32 137 32ZM126 5L126 5Q127 4 128 5L128 5Q129 6 132 9L132 9Q132 10 132 10Q132 11 132 11L132 11Q131 12 131 12Q130 11 130 11L130 11Q128 8 126 7L126 7Q126 6 126 6Q126 5 126 5ZM157 35L157 35Q157 36 156 36Q156 36 155 36L155 36Q153 37 148 37L148 37Q146 37 137 36L137 36Q135 36 133 34L133 34Q131 33 130 33L130 33Q128 33 126 36L126 36Q126 36 125 36Q124 36 124 36L124 36Q124 36 124 35Q124 34 124 34L124 34Q127 30 129 30L129 30L129 18Q129 17 129 17Q128 16 128 16L128 16L125 16Q124 16 124 16Q123 16 123 15L123 15Q123 14 124 14Q124 14 125 14L125 14L128 14Q129 14 131 15Q132 16 132 18L132 18L132 30L132 30Q133 31 134 32Q135 33 136 33Q137 34 139 34L139 34Q143 34 146 34L146 34Q150 34 155 34L155 34Q156 34 156 34Q157 35 157 35Z"
/>
<path
d="M194 32L194 32Q194 34 193 35Q192 37 189 37L189 37L188 37Q187 36 187 35L187 35Q187 35 188 34Q188 34 189 34L189 34L189 34Q191 34 192 32L192 32Q192 22 192 14L192 14Q192 12 191 12L191 12L187 12L187 20Q187 25 186 28Q184 32 182 36L182 36Q181 37 180 37L180 37Q180 37 179 36Q179 36 179 35L179 35Q182 31 183 27Q184 24 184 20L184 20L185 12L182 12Q181 12 181 12Q180 12 180 11L180 11Q180 11 181 10Q181 10 182 10L182 10L185 10L185 5Q185 4 185 4Q186 3 186 3L186 3Q187 3 187 4Q188 4 188 5L188 5L188 10L191 10Q192 10 194 11Q195 12 195 14L195 14Q195 22 194 32ZM167 8L167 8Q167 7 168 7Q168 6 169 6L169 6L178 6Q178 6 179 7Q179 7 179 8L179 8Q179 8 179 8Q178 9 178 9L178 9L169 9Q168 9 168 8Q167 8 167 8ZM180 33L180 33Q179 33 178 32L178 32L178 29L178 29Q173 31 167 32L167 32L167 32Q166 32 166 31L166 31L166 31Q166 30 167 29L167 29Q167 29 168 29L168 29Q169 24 170 17L170 17L166 17Q166 17 165 17Q165 17 165 16L165 16Q165 16 165 15Q166 15 166 15L166 15L180 15Q180 15 181 15Q181 16 181 16L181 16Q181 17 181 17Q180 17 180 17L180 17L173 17L173 17Q172 25 171 29L171 29Q177 27 177 27L177 27L177 27L175 24Q175 24 175 23L175 23Q175 22 176 22L176 22L176 22Q177 22 178 23L178 23Q180 27 181 31L181 31L181 31Q181 32 181 32Q180 33 180 33L180 33Z"
/>
<path
d="M234 6L234 6Q234 8 233 8L233 8L207 8Q206 8 206 6L206 6Q206 5 207 5L207 5L233 5Q234 5 234 6ZM211 26L211 26L211 14Q211 12 212 11Q213 10 215 10L215 10L225 10Q226 10 228 11Q229 12 229 14L229 14L229 26Q229 28 228 29Q226 30 225 30L225 30L215 30Q213 30 212 29Q211 28 211 26ZM214 14L214 14L214 18L214 18L219 18L219 13L219 12L215 12Q214 12 214 14ZM225 12L225 12L221 12L221 13L221 18L225 18L226 18L226 14Q226 12 225 12ZM233 15L233 15L233 30Q233 33 231 34Q230 36 227 36L227 36L212 36Q210 36 208 34Q207 33 207 30L207 30L207 15Q207 13 208 13L208 13Q209 13 209 15L209 15L209 30Q209 33 212 33L212 33L227 33Q230 33 230 30L230 30L230 15Q230 13 232 13L232 13Q233 13 233 15ZM215 27L215 27L219 27L219 27L219 21L214 21L214 21L214 26Q214 27 215 27ZM226 26L226 26L226 21L225 21L221 21L221 27L221 27L225 27Q226 27 226 26Z"
/>
<path
d="M275 35L275 35Q274 36 274 36Q273 36 273 35L273 35Q268 33 265 30Q262 27 260 24L260 24Q260 24 260 23L260 23L256 23L256 23L256 32Q258 31 260 30L260 30Q261 29 262 30L262 30Q262 30 262 31L262 31Q262 31 261 32L261 32Q258 35 253 36L253 36Q253 36 252 36L252 36Q251 36 251 35L251 35L251 35Q251 34 253 34L253 34Q253 34 254 34L254 34L254 33L254 23L254 23L251 23Q251 23 250 23L250 23Q250 28 248 34L248 34Q247 36 246 36L246 36Q245 36 245 35Q245 34 245 33L245 33Q248 27 248 20L248 20L248 7Q248 4 250 4L250 4L270 4Q272 4 273 5Q273 6 273 7L273 7L273 9Q273 10 273 11Q272 12 270 12L270 12L267 12Q268 12 268 13L268 13L268 15L271 15Q273 15 273 16L273 16Q273 17 271 17L271 17L268 17L268 20L268 20L273 20Q275 20 275 22L275 22Q275 23 273 23L273 23L263 23Q264 26 266 28L266 28Q267 28 267 27L267 27Q268 26 268 26L268 26Q269 25 270 25L270 25Q271 25 271 25Q271 26 271 27L271 27Q270 29 268 29L268 29Q270 31 274 33L274 33Q275 34 275 35ZM250 8L250 8L250 9L250 9L270 9Q271 9 271 8L271 8L271 7Q271 7 270 7L270 7L251 7Q250 7 250 8ZM251 20L251 20L256 20L256 20L256 17L253 17Q251 17 251 16L251 16Q251 15 253 15L253 15L256 15L256 13Q256 12 257 12L257 12L250 12L250 11L250 20L250 21Q250 20 251 20ZM266 12L266 12L258 12Q259 12 259 13L259 13L259 15L265 15L265 13Q265 12 266 12ZM265 20L265 20L265 17L259 17L259 20Q259 20 259 20L259 20L265 20Z"
/>
<path
d="M289 7L289 7Q289 6 290 6L290 6L309 6Q311 6 311 7L311 7Q311 8 309 8L309 8L290 8Q289 8 289 7ZM314 16L314 16Q314 17 313 17L313 17L301 17L301 17L301 30Q301 33 300 35Q298 37 295 37L295 37Q293 37 293 35L293 35Q293 34 294 34L294 34Q297 34 298 33Q299 32 299 30L299 30L299 17L299 17L287 17Q285 17 285 16L285 16Q285 14 287 14L287 14L313 14Q314 14 314 16ZM314 29L314 29Q314 30 314 30L314 30Q314 31 313 31L313 31L313 32Q312 32 311 30L311 30Q310 26 308 23L308 23Q307 22 307 21Q307 21 307 21L307 21Q308 20 308 20L308 20Q309 20 309 21L309 21Q312 25 314 29ZM293 22L293 22Q291 28 288 32L288 32Q287 33 286 32L286 32Q286 32 286 31L286 31Q286 31 286 30L286 30Q290 26 291 22L291 22Q292 20 292 20L292 20Q293 20 293 21Q294 22 293 22Z"
/>
</g>
</svg>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
const svgRef = ref<SVGElement>()
onMounted(() => {
/*
在这里通过文本生成svg的paths
api 说明: https://apifox.com/apidoc/shared-fec1e84e-5b26-438f-8024-d64b4da91c67
快捷生成(by wsl): https://vercel-serverless.cmzjxs.top/api/tools/textToSvgPath?y=36&text=文本描边动画展示&fontSize=40
*/
svgRef.value?.querySelectorAll('g path').forEach(dom => {
const el = dom as SVGPathElement
el.style.setProperty('--len', el.getTotalLength() + 1 + '')
el.classList.add('svg-stroke-animation')
el.parentElement?.classList.add('svg-opacity-animation')
})
})
</script>
<style lang="less" scoped>
.svg-opacity-animation {
fill: var(--color);
fill-opacity: 0;
animation: svg-opacity 5s infinite;
}
.svg-stroke-animation {
stroke-width: 0.5px;
stroke: var(--color);
stroke-dashoffset: var(--len);
stroke-dasharray: var(--len);
animation: svg-stroke 5s infinite;
}
@keyframes svg-stroke {
to {
stroke-dashoffset: 0;
}
}
@keyframes svg-opacity {
to {
fill-opacity: 1;
}
}
</style>