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
39
40
|
<?xml version="1.0" standalone="no"?>
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="wgradient" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#814F92" />
<stop offset="100%" stop-color="#41285C" />
</linearGradient>
<linearGradient id="ngradient" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#3CD2CC" />
<stop offset="100%" stop-color="#176361" />
</linearGradient>
</defs>
<style type="text/css"><![CDATA[
.path {
stroke-width: 10;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transform-origin: 50% 100%;
}
@keyframes rotate-45-clockwise {
0% { transform: rotate(-45deg); }
25% { transform: rotate(-45deg); }
30% { transform: rotate(0); }
95% { transform: rotate(0); }
100% { transform: rotate(-45deg); }
}
@keyframes rotate-45-anticlockwise {
0% { transform: rotate(45deg); }
25% { transform: rotate(45deg); }
30% { transform: rotate(0); }
95% { transform: rotate(0); }
100% { transform: rotate(45deg); }
}
#w { stroke: url(#wgradient); stroke-opacity: 1; animation: 20s rotate-45-clockwise 0s ease-in-out infinite; }
#n { stroke: url(#ngradient); stroke-opacity: 1; animation: 20s rotate-45-anticlockwise 0s ease-in-out infinite; }
]]></style>
<path id="n" class="path" d="M100,90 L60,50 140,50 100,10" />
<path id="w" class="path" d="M100,10 L60,50 100,50 100,90 140,50" />
</svg>
|
