feat(graphics): landing looks better

This commit is contained in:
Dimitrie Stefanescu
2021-02-22 10:11:49 +00:00
parent fa53ec5e1c
commit b1f4d0c9f0
3 changed files with 42 additions and 142 deletions
+3 -64
View File
@@ -112,7 +112,7 @@
</g>
</g>
</g>
<g transform="matrix(0.63025,0,0,0.63025,-1260.49,812.763)">
{{!-- <g transform="matrix(0.63025,0,0,0.63025,-1260.49,812.763)">
<g opacity="0.85">
<g transform="matrix(0.708588,0,0,0.708588,3243.86,732.695)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z"
@@ -135,7 +135,7 @@
style="fill:rgb(37,99,235);" />
</g>
</g>
</g>
</g> --}}
</g>
<g transform="matrix(1,0,0,1,7643.44,2523.85)">
<g opacity="0.8">
@@ -450,65 +450,4 @@
<stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1" />
</radialGradient>
</defs>
</svg>
<style type="text/css">
.blink-2 {
animation: blink-2 7s infinite both
}
.blink-3 {
animation: blink-3 7s infinite both
}
@-webkit-keyframes blink-3 {
0% {
opacity: 1;
}
10% {
opacity: 1;
}
20% {
opacity: 0.5;
}
30% {
opacity: 1;
}
35% {
opacity: 0.5;
}
40% {
opacity: 1;
}
}
@-webkit-keyframes blink-2 {
0% {
opacity: 1;
}
75% {
opacity: 1;
}
80% {
opacity: 0.5;
}
90% {
opacity: 1;
}
95% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</svg>

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

+3 -65
View File
@@ -112,7 +112,7 @@
</g>
</g>
</g>
<g transform="matrix(0.63025,0,0,0.63025,-1260.49,812.763)">
{{!-- <g transform="matrix(0.63025,0,0,0.63025,-1260.49,812.763)">
<g opacity="0.53">
<g transform="matrix(0.708588,0,0,0.708588,3243.86,732.695)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z"
@@ -135,7 +135,7 @@
style="fill:rgb(37,99,235);" />
</g>
</g>
</g>
</g> --}}
</g>
<g transform="matrix(1,0,0,1,7643.44,3346.58)">
<g opacity="0.54">
@@ -452,66 +452,4 @@
<stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1" />
</radialGradient>
</defs>
</svg>
<style type="text/css">
.blink-2 {
animation: blink-2 7s infinite both
}
.blink-3 {
animation: blink-3 7s infinite both
}
@-webkit-keyframes blink-3 {
0% {
opacity: 1;
}
10% {
opacity: 1;
}
20% {
opacity: 0.5;
}
30% {
opacity: 1;
}
35% {
opacity: 0.5;
}
40% {
opacity: 1;
}
}
@-webkit-keyframes blink-2 {
0% {
opacity: 1;
}
75% {
opacity: 1;
}
80% {
opacity: 0.5;
}
90% {
opacity: 1;
}
95% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</svg>

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

+36 -13
View File
@@ -28,34 +28,57 @@
</g>
</g>
</g>
{{!-- <g class="three" transform="matrix(0.63025,0,0,0.63025,-1260.49,778.859)">
<g opacity="0.82">
<g transform="matrix(0.708588,0,0,0.708588,3243.86,732.695)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z"
style="fill:url(#_Radial11);" />
</g>
<g transform="matrix(0.614533,-0.354801,0.709601,0.409689,3242.15,731.515)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z"
style="fill:rgb(37,99,235);" />
</g>
</g>
</g> --}}
</g>
</g>
</svg>
<style type="text/css">
.one {
transform: matrix(0.63025,0,0,0.63025,-1260.49,812.763);
/*transform: matrix(0.63025,0,0,0.63025,-1260.49,812.763);*/
transform: matrix(0.63025,0,0,0.63025,-1260.49,852.763);
opacity: 0.1;
animation: animOne 10s infinite both;
}
.two {
transform: matrix(0.63025,0,0,0.63025,-1260.49,778.859);
opacity: 0.1;
animation: animTwo 15s infinite both;
}
.hover-me {
animation: hover 20s infinite both
}
@-webkit-keyframes animTwo {
0% {
transform: matrix(0.63025,0,0,0.63025,-1260.49,852.763);
opacity: 0;
}
20%{
transform: matrix(0.63025,0,0,0.63025,-1260.49,778.859);
opacity: 1;
}
100% {
transform: matrix(0.63025,0,0,0.63025,-1260.49,852.763);
opacity: 0;
}
}
@-webkit-keyframes animOne {
0% {
transform: matrix(0.63025,0,0,0.63025,-1260.49,852.763);
opacity: 0.1;
}
50%{
transform: matrix(0.63025,0,0,0.63025,-1260.49,812.763);
opacity: 1;
}
100% {
transform: matrix(0.63025,0,0,0.63025,-1260.49,852.763);
opacity: 0.1;
}
}
@-webkit-keyframes hover {
0% {
transform: matrix(0.63025, 0, 0, 0.63025, -1260.49, 738.859);

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB