RuralDatabase/apps/web/components/background.vue

138 lines
7.4 KiB
Vue

<template>
<div class="mx-auto w-fit">
<svg xmlns="http://www.w3.org/2000/svg" class=" h-[133px] w-fit" width="2895" height="133" fill="none" viewBox="0 0 2895 133">
<path fill="url(#a)" d="M10 10h2880v116H10z" />
<path
class=""
fill="url(#b)" fill-rule="evenodd"
d="M82.818 13.858 2.933 95.613a4 4 0 0 0 .207 5.787l14.971 13.283a4.996 4.996 0 0 0 3.452 1.258l73.13-1.953a50.003 50.003 0 0 0 24.14-6.96l11.321-6.704a51.006 51.006 0 0 1 24.887-7.104L583 84h1278.74l1008.31.5V0H95.165L82.818 13.858Z"
clip-rule="evenodd"
/>
<path
fill="url(#c)" fill-rule="evenodd"
d="m102.818 23.858-74.751 76.501c-4.391 4.494-4.133 11.746.567 15.916l9.477 8.408a4.996 4.996 0 0 0 3.452 1.258l73.129-1.953a50.004 50.004 0 0 0 24.141-6.96l11.321-6.704a51.011 51.011 0 0 1 24.887-7.104L603 94h1278.74l1008.31.5V10H115.165l-12.347 13.858Z"
clip-rule="evenodd" opacity=".7"
/>
<path
stroke="url(#d)"
d="M2890.05 95h.5V9.5H114.941l-.149.167-12.339 13.85-80.61 82.497a3.5 3.5 0 0 0 .18 5.064l15.756 13.979a5.494 5.494 0 0 0 3.797 1.384l73.13-1.954a50.504 50.504 0 0 0 24.382-7.028l11.321-6.704a50.499 50.499 0 0 1 24.643-7.035L603 94.5h1278.74l1008.31.5Z"
opacity=".488"
/>
<g opacity=".762">
<mask id="f" width="2885" height="123" x="6" y="10" maskUnits="userSpaceOnUse" style="mask-type:alpha">
<path fill="url(#e)" fill-opacity=".5" d="M6.5 10h2884v123H6.5z" />
</mask>
<g mask="url(#f)" class="">
<path
fill="url(#g)" fill-opacity=".5" fill-rule="evenodd"
d="M102.818 23.858 37.696 90.504c-9.632 9.858-9.065 25.768 1.244 34.915.417.37.958.567 1.515.552l74.237-1.983a50.004 50.004 0 0 0 24.141-6.96l11.028-6.53a51.004 51.004 0 0 1 25.523-7.115L603.388 99.5H2890.05V10H115.165l-12.347 13.858Z"
clip-rule="evenodd"
/>
<path
fill="url(#h)" fill-rule="evenodd"
d="M102.818 23.858 37.696 90.504c-9.632 9.858-9.065 25.768 1.244 34.915.417.37.958.567 1.515.552l74.237-1.983a50.004 50.004 0 0 0 24.141-6.96l11.028-6.53a51.004 51.004 0 0 1 25.523-7.115L603.388 99.5H2890.05V10H115.165l-12.347 13.858Z"
clip-rule="evenodd"
/>
<path
fill="url(#i)" fill-rule="evenodd"
d="M102.818 23.858 37.696 90.504c-9.632 9.858-9.065 25.768 1.244 34.915.417.37.958.567 1.515.552l74.237-1.983a50.004 50.004 0 0 0 24.141-6.96l11.028-6.53a51.004 51.004 0 0 1 25.523-7.115L603.388 99.5H2890.05V10H115.165l-12.347 13.858Z"
clip-rule="evenodd"
/>
<path
fill="url(#j)" fill-rule="evenodd"
d="M102.818 23.858 37.696 90.504c-9.632 9.858-9.065 25.768 1.244 34.915.417.37.958.567 1.515.552l74.237-1.983a50.004 50.004 0 0 0 24.141-6.96l11.028-6.53a51.004 51.004 0 0 1 25.523-7.115L603.388 99.5H2890.05V10H115.165l-12.347 13.858Z"
clip-rule="evenodd" style="mix-blend-mode:soft-light"
/>
</g>
</g>
<mask id="l" width="2885" height="123" x="10" y="10" maskUnits="userSpaceOnUse" style="mask-type:alpha">
<path fill="url(#k)" d="M10.5 10h2884v123H10.5z" />
</mask>
<g mask="url(#l)">
<path
fill="url(#m)" fill-opacity=".5" fill-rule="evenodd"
d="m106.818 23.858-79.885 81.755a4 4 0 0 0 .207 5.787l14.971 13.283a4.996 4.996 0 0 0 3.452 1.258l73.129-1.953a50.004 50.004 0 0 0 24.141-6.96l11.028-6.53a51.004 51.004 0 0 1 25.523-7.115L607.388 99.5H2894.05V10H137.725a41.396 41.396 0 0 0-30.907 13.858Z"
clip-rule="evenodd" opacity=".478"
/>
</g>
<mask id="o" width="2885" height="123" x="10" y="10" maskUnits="userSpaceOnUse" style="mask-type:alpha">
<path fill="url(#n)" d="M10.5 10h2884v123H10.5z" />
</mask>
<g mask="url(#o)">
<path
stroke="#DEFCFC" stroke-width="2"
d="M134.725 9a42.396 42.396 0 0 0-31.638 14.175l-77.669 79.487c-3.193 3.268-3.005 8.543.413 11.575l12.616 11.194a5.997 5.997 0 0 0 4.143 1.51l73.129-1.954a51.007 51.007 0 0 0 24.624-7.098l11.028-6.531a50 50 0 0 1 25.022-6.975l427.995-3.883H2892.05V9H134.725Z"
/>
</g>
<defs>
<linearGradient id="a" x1="10" x2="10" y1="10" y2="126" gradientUnits="userSpaceOnUse">
<stop stop-color="#1A2531" />
<stop offset="1" stop-color="#0B1016" stop-opacity=".01" />
</linearGradient>
<linearGradient id="b" x1="-530.728" x2="-530.403" y1="45.685" y2="91.411" gradientUnits="userSpaceOnUse">
<stop stop-color="#526A8B" />
<stop offset=".43" stop-color="#0D1219" stop-opacity=".785" />
<stop offset="1" stop-color="#111821" />
</linearGradient>
<linearGradient id="c" x1="20" x2="20" y1="10" y2="125.994" gradientUnits="userSpaceOnUse">
<stop stop-color="#171F2C" />
<stop offset=".43" stop-color="#0D1219" stop-opacity=".785" />
<stop offset="1" stop-color="#111821" />
</linearGradient>
<linearGradient id="d" x1="1990.75" x2="1986.94" y1="25.904" y2="143.261" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff" />
<stop offset="1" stop-color="#fff" stop-opacity=".01" />
</linearGradient>
<linearGradient id="e" x1="1909.39" x2="1911.12" y1="152.221" y2="-13.685" gradientUnits="userSpaceOnUse">
<stop stop-color="#313136" />
<stop offset="1" stop-color="#161619" stop-opacity=".01" />
</linearGradient>
<linearGradient id="k" x1="1106.91" x2="1106.97" y1="133.81" y2="46.092" gradientUnits="userSpaceOnUse">
<stop stop-color="#313136" />
<stop offset="1" stop-color="#161619" stop-opacity=".01" />
</linearGradient>
<linearGradient id="n" x1="1057.05" x2="1057.08" y1="121.718" y2="39.194" gradientUnits="userSpaceOnUse">
<stop stop-color="#313136" />
<stop offset="1" stop-color="#161619" stop-opacity=".01" />
</linearGradient>
<radialGradient
id="g" cx="0" cy="0" r="1"
gradientTransform="matrix(-15.79932 138.77654 -5319.5869 -605.62013 188.243 45.762)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#506096" />
<stop offset="1" stop-color="#A0A7D7" />
</radialGradient>
<radialGradient
id="h" cx="0" cy="0" r="1" gradientTransform="matrix(0 156.784 -13149.4 0 716.251 10)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#94CAEB" />
<stop offset="1" stop-color="#456182" />
</radialGradient>
<radialGradient
id="i" cx="0" cy="0" r="1" gradientTransform="scale(9269.85 115.994) rotate(90 -.28 .306)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#80E0FD" />
<stop offset="1" stop-color="#456182" stop-opacity=".01" />
</radialGradient>
<radialGradient
id="j" cx="0" cy="0" r="1" gradientTransform="matrix(0 115.641 -6024.05 0 172.809 20.1)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#44F6D9" />
<stop offset="1" stop-color="#A4FFF0" />
</radialGradient>
<radialGradient
id="m" cx="0" cy="0" r="1" gradientTransform="matrix(0 132.119 -5129.91 0 192.243 45.76)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#68C3D5" />
<stop offset="1" stop-color="#A8EDD7" />
</radialGradient>
</defs>
</svg>
</div>
</template>