Skip to content

Instantly share code, notes, and snippets.

@lzpel

lzpel/index.html

Last active August 4, 2021 04:18
Show Gist options
  • Save lzpel/e37ba09fb5e11bb336670daeabb3abfb to your computer and use it in GitHub Desktop.
Save lzpel/e37ba09fb5e11bb336670daeabb3abfb to your computer and use it in GitHub Desktop.
Download ZIP
Character Transition SVG
Raw
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="480"
height="480">
<filter id="myFilter">
<feGaussianBlur stdDeviation="5">
<animate attributeName="stdDeviation" values="0;30;0;30;0" dur="1s" repeatCount="indefinite"/>
</feGaussianBlur>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 1 1 1 1"></feFuncA>
</feComponentTransfer>
</filter>
<g filter="url(#myFilter)" transform="translate(240,240)" text-anchor="middle" dominant-baseline="central" style="font-size: 200px; font-family: serif;">
<text >
令
<animate attributeName="fill-opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
</text>
<text>
和
<animate attributeName="fill-opacity" values="0;1;0" dur="1s" repeatCount="indefinite"/>
</text>
</g>
</svg>
</body>
</html>
@lzpel
Copy link
Author

lzpel commented Aug 4, 2021

live demo
http://bl.ocks.org/lzpel/e37ba09fb5e11bb336670daeabb3abfb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment