/
kute_test.html
38 lines (32 loc) · 1.68 KB
/
kute_test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style type="text/css">
svg {overflow: visible}
body {background: #333; color: #ccc; font-family: Helvetica, Arial, sans-serif; overflow: hidden}
#wrapper {width: 200px; float: left; margin: 0 20px 0 10px}
a {color: lime}
</style><!-- A demo of the SVG Plugin -->
<!-- SVG Morph -->
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle" fill="teal" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z" />
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
</div>
<h1>SVG Morph with KUTE.js</h1>
<p>A high quality SVG morphing showcase.</p>
<p>Open your browser console and start playing around.</p>
<p>Click to replay, <a href="https://codepen.io/thednp/pen/YGayLg" target="_blank">click here</a> to experiment or <a href="https://thednp.github.io/kute.js/svg.html" href="https://codepen.io/thednp/pen/YGayLg" target="_blank"> here</a> to learn :)</p>
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script>
<script src='https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js'></script>
<script type="text/javascript">
// write a simple tween object
var tween = KUTE.fromTo('#rectangle', // target shape
{ path: '#rectangle' }, // from shape
{ path: '#star' }, // to shape
{ // options
easing: 'easingCubicInOut',
yoyo: true, repeat: 1, duration: 2500,
morphIndex: 127
}
).start();
</script>