This commit is contained in:
Hazem Krimi
2020-06-29 16:56:45 +01:00
commit aceeada8c4
16 changed files with 181 additions and 0 deletions
+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1163.5 136">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-2);
}
</style>
<linearGradient id="linear-gradient" x1="1204.93" y1="810.25" x2="-37.07" y2="808.25" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#eacc56"/>
<stop offset="1" stop-color="#ee64d1"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="1205" y1="766.82" x2="-37" y2="764.82" xlink:href="#linear-gradient"/>
</defs>
<title>page 2 wave</title>
<g>
<path class="cls-1" d="M214,782.5c-83.1,3-152.76,22.34-214,52H456.5C368.08,801.5,286.08,781.77,214,782.5Z" transform="translate(0 -698.5)"/>
<path class="cls-2" d="M1072.5,736c-85.67-.62-158.27,41.05-226,98.48h317v-136C1150.79,717.78,1133.67,736,1072.5,736Z" transform="translate(0 -698.5)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 979 B

@@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1163.5 834.5">
<defs>
<style>
svg path {
fill: url(#linear-gradient);
box-shadow: ;
d: path("M756,1080l1163.5-.5v-834c-1.91,92.4-58.33,172.83-124.5,199.5-67,27-131,81-180,190-56.5,136.5-231,170-403.5,191.5S888,893,756,1080Z");
animation: morph 5s alternate infinite linear;
}
@keyframes morph {
from {
d: path("M756,1080l1163.5-.5v-834c-1.91,92.4-58.33,172.83-124.5,199.5-67,27-131,81-180,190-56.5,136.5-231,170-403.5,191.5S888,893,756,1080Z");
}
to {
d: path("M756,1080l1163.5-.5v-834C1900,264,1831,314,1808,386c-29,79,31,219-193,249-153,9-270,14-403.5,191.5S1139,998,756,1080Z");
}
}
</style>
<linearGradient id="linear-gradient" x1="1733.54" y1="394.22" x2="1141.12" y2="1420.33" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#eacc56">
<animate attributeName="stop-color" values="#eacc56; #ee64d1; #eacc56" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#ee64d1">
<animate attributeName="stop-color" values="#ee64d1; #eacc56; #ee64d1" dur="5s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<path d="M756,1080l1163.5-.5v-834c-1.91,92.4-58.33,172.83-124.5,199.5-67,27-131,81-180,190-56.5,136.5-231,170-403.5,191.5S888,893,756,1080Z" transform="translate(-756 -245.5)" />
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1163.5 87">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-2);
}
</style>
<linearGradient id="linear-gradient" x1="-94.64" y1="812.53" x2="1573.28" y2="676.04" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#eacc56"/>
<stop offset="1" stop-color="#ee64d1"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-87.93" y1="894.49" x2="1579.98" y2="757.99" xlink:href="#linear-gradient"/>
</defs>
<title>page wave</title>
<g>
<path class="cls-1" d="M90.34,783.36C74.5,741.5,14.51,765.47,0,747.5v87H337C264.06,783.85,120.67,863.49,90.34,783.36Z" transform="translate(0 -747.5)"/>
<path class="cls-2" d="M951.5,767c-71.82,6.2-172.37,17.17-249.83,67.5H1163.5V786C1029.5,785.5,1034.5,762,951.5,767Z" transform="translate(0 -747.5)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 995 B