SVG_gradient_animation_loop.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body{height: 100%;}
body{position: relative;}
svg{display: block; margin: 0 auto; position: relative; top: 40%; transform: translateY(-50%);}
.page-foot{background: #ededed; bottom: 0; color: #222; position: fixed; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start;}
.page-foot-column{order: 0; flex: 1 1 auto; align-self: auto; padding: 1em;
</style>
</head>
<body>
<h1>SVG gradient animation loop</h1>
<svg width="336px" height="195px">
<defs>
<linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" >
<stop offset="0%" stop-color="#7A5FFF">
<animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#01FF89">
<animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="4s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d="M315.69646,6.17948262 C328.855897,-3.88648819 332.169516,-0.795739865 323.113707,13.0582738 L217.327474,174.895153 C208.264469,188.760175 193.218185,188.990964 183.71996,175.409636 L126.769111,93.9767151 L12.5417619,181.728698 C-0.593710633,191.81966 -3.91947426,188.74917 5.1230211,174.855879 L110.403975,13.0975513 C119.44219,-0.789163345 134.468377,-1.03753706 143.966601,12.5437917 L200.917445,93.9767151 L315.69646,6.17948262 Z"></path>
</g>
</svg>
<div class="page-foot">
<div class="page-foot-column">Made for <a href="http://nicknoordijk.me" target="_blank">this website</a></div>
<div class="page-foot-column"><a href="https://codepen.io/NickNoordijk/pen/QbEZQG" target="_blank">Underline gradient animation</a></div>
</div>
</body>
</html>
'Front End > source' 카테고리의 다른 글
| [소스] Pure CSS3 Animated Gradient Background (0) | 2018.02.21 |
|---|---|
| input file up load preview (0) | 2018.02.06 |