primevue-mirror/apps/showcase/components/template/TemplateHeroRectangle.vue

19 lines
1.1 KiB
Vue

<template>
<svg width="1152" height="457" viewBox="0 0 1152 457" fill="none" xmlns="http://www.w3.org/2000/svg" class="template-hero-rectangle">
<g :style="{ mixBlendMode: 'overlay' }" filter="url(#filter0_f_956_37561)">
<path d="M264.08 -96H547.881L952 470H-163L264.08 -96Z" fill="url(#paint0_linear_956_37561)" />
</g>
<defs>
<filter id="filter0_f_956_37561" x="-363" y="-296" width="1515" height="966" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_956_37561" />
</filter>
<linearGradient id="paint0_linear_956_37561" x1="394.5" y1="-96" x2="394.5" y2="470" gradientUnits="userSpaceOnUse">
<stop stopColor="var(--primary-50)" />
<stop offset="1" stopColor="var(--primary-50)" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</template>