Загрузка...

SVG-иллюстрация карточки с градиентным смут-эффектом и диаграммой. Идеально для виджета аналитики, дашборда.
<svg width="400" height="293" viewBox="0 0 400 293" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_70964_13680)">
<foreignObject x="0" y="0" width="0" height="0">
<div xmlns="http://www.w3.org/1999/xhtml"
style="backdrop-filter:blur(10px);clip-path:url(#bgblur_1_70964_13680_clip_path);height:100%;width:100%"></div>
</foreignObject>
<g data-figma-bg-blur-radius="20">
<rect x="130.5" y="28.9624" width="154" height="236" rx="20" fill="url(#paint0_linear_70964_13680)"
fill-opacity="0.5" />
<rect x="131" y="29.4624" width="153" height="235" rx="19.5" stroke="url(#paint1_linear_70964_13680)"
stroke-opacity="0.15" />
</g>
<foreignObject x="70.5" y="-1.0376" width="274" height="356">
<div xmlns="http://www.w3.org/1999/xhtml"
style="backdrop-filter:blur(10px);clip-path:url(#bgblur_2_70964_13680_clip_path);height:100%;width:100%"></div>
</foreignObject>
<g filter="url(#filter0_dddi_70964_13680)" data-figma-bg-blur-radius="20">
<rect x="130.5" y="28.9624" width="154" height="236" rx="20" fill="url(#paint2_linear_70964_13680)"
fill-opacity="0.5" shape-rendering="crispEdges" />
<rect x="130.5" y="28.9624" width="154" height="236" rx="20" fill="url(#paint3_radial_70964_13680)"
fill-opacity="0.1" shape-rendering="crispEdges" />
<rect x="131" y="29.4624" width="153" height="235" rx="19.5" stroke="url(#paint4_linear_70964_13680)"
stroke-opacity="0.15" shape-rendering="crispEdges" />
</g>
<mask id="mask0_70964_13680" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="27" width="157"
height="239">
<rect x="130" y="28.4624" width="155" height="237" rx="24.5" fill="#369FFF" stroke="black" />
</mask>
<g mask="url(#mask0_70964_13680)">
<foreignObject x="-743.311" y="168.962" width="1145.78" height="135.182">
<div xmlns="http://www.w3.org/1999/xhtml"
style="backdrop-filter:blur(10px);clip-path:url(#bgblur_3_70964_13680_clip_path);height:100%;width:100%">
</div>
</foreignObject>
<path data-figma-bg-blur-radius="20" fill-rule="evenodd" clip-rule="evenodd"
d="M-723.311 284.144L-705.475 278.144C-687.64 273.144 -648.997 262.144 -613.327 249.144C-574.684 235.144 -539.014 221.144 -503.344 213.144C-464.701 206.144 -429.03 206.144 -390.387 211.144C-354.717 217.144 -319.047 228.144 -280.404 235.144C-244.734 243.144 -206.091 247.144 -170.42 237.144C-134.75 228.144 -96.1072 206.144 -60.4369 200.144C-21.7941 194.144 13.8763 206.144 49.5466 213.144C88.1895 221.144 123.86 224.144 162.503 217.144C198.173 209.144 233.843 191.144 272.486 189.144C308.156 187.144 346.799 202.144 364.635 209.144L382.47 217.144V284.144H364.635C346.799 284.144 308.156 284.144 272.486 284.144C233.843 284.144 198.173 284.144 162.503 284.144C123.86 284.144 88.1895 284.144 49.5466 284.144C13.8763 284.144 -21.7941 284.144 -60.4369 284.144C-96.1072 284.144 -134.75 284.144 -170.42 284.144C-206.091 284.144 -244.734 284.144 -280.404 284.144C-319.047 284.144 -354.717 284.144 -390.387 284.144C-429.03 284.144 -464.701 284.144 -503.344 284.144C-539.014 284.144 -574.684 284.144 -613.327 284.144C-648.997 284.144 -687.64 284.144 -705.475 284.144H-723.311Z"
fill="url(#paint5_linear_70964_13680)" fill-opacity="0.2" />
<foreignObject x="5.21484" y="158.962" width="1145.78" height="135.182">
<div xmlns="http://www.w3.org/1999/xhtml"
style="backdrop-filter:blur(10px);clip-path:url(#bgblur_4_70964_13680_clip_path);height:100%;width:100%">
</div>
</foreignObject>
<path data-figma-bg-blur-radius="20" fill-rule="evenodd" clip-rule="evenodd"
d="M1131 274.144L1113.16 268.144C1095.32 263.144 1056.68 252.144 1021.01 239.144C982.369 225.144 946.698 211.144 911.028 203.144C872.385 196.144 836.715 196.144 798.072 201.144C762.402 207.144 726.731 218.144 688.089 225.144C652.418 233.144 613.775 237.144 578.105 227.144C542.435 218.144 503.792 196.144 468.121 190.144C429.479 184.144 393.808 196.144 358.138 203.144C319.495 211.144 283.825 214.144 245.182 207.144C209.512 199.144 173.841 181.144 135.198 179.144C99.5281 177.144 60.8853 192.144 43.05 199.144L25.2148 207.144V274.144H43.05C60.8853 274.144 99.5281 274.144 135.198 274.144C173.841 274.144 209.512 274.144 245.182 274.144C283.825 274.144 319.495 274.144 358.138 274.144C393.808 274.144 429.479 274.144 468.121 274.144C503.792 274.144 542.435 274.144 578.105 274.144C613.775 274.144 652.418 274.144 688.089 274.144C726.731 274.144 762.402 274.144 798.072 274.144C836.715 274.144 872.385 274.144 911.028 274.144C946.698 274.144 982.369 274.144 1021.01 274.144C1056.68 274.144 1095.32 274.144 1113.16 274.144H1131Z"
fill="url(#paint6_linear_70964_13680)" fill-opacity="0.45" />
</g>
<path opacity="0.3"
d="M154.5 91.4624C154.5 90.0817 155.619 88.9624 157 88.9624C158.381 88.9624 159.5 90.0817 159.5 91.4624V168.962H154.5V91.4624Z"
fill="#8EDCFC" />
<path opacity="0.3"
d="M168.5 91.9624C168.5 90.3056 169.843 88.9624 171.5 88.9624C173.157 88.9624 174.5 90.3055 174.5 91.9624V168.962H168.5V91.9624Z"
fill="#8EDCFC" />
<path opacity="0.3"
d="M183.5 91.9624C183.5 90.3056 184.843 88.9624 186.5 88.9624C188.157 88.9624 189.5 90.3055 189.5 91.9624V168.962H183.5V91.9624Z"
fill="#8EDCFC" />
<path opacity="0.3"
d="M196.5 91.9624C196.5 90.3056 197.843 88.9624 199.5 88.9624C201.157 88.9624 202.5 90.3055 202.5 91.9624V168.962H196.5V91.9624Z"
fill="#8EDCFC" />
<path opacity="0.3"
d="M211.5 91.9624C211.5 90.3056 212.843 88.9624 214.5 88.9624C216.157 88.9624 217.5 90.3055 217.5 91.9624V168.962H211.5V91.9624Z"
fill="#8EDCFC" />
<path
d="M154.5 137.582C154.5 135.925 155.843 134.582 157.5 134.582C159.157 134.582 160.5 135.925 160.5 137.582V168.962H154.5V137.582Z"
fill="#5DCCFC" />
<path
d="M168.5 162.355C168.5 160.698 169.843 159.355 171.5 159.355C173.157 159.355 174.5 160.698 174.5 162.355V168.962H168.5V162.355Z"
fill="#5DCCFC" />
<path
d="M183.5 147.732C183.5 146.075 184.843 144.732 186.5 144.732C188.157 144.732 189.5 146.075 189.5 147.732V168.962H183.5V147.732Z"
fill="#5DCCFC" />
<path
d="M196.5 157.091C196.5 155.434 197.843 154.091 199.5 154.091C201.157 154.091 202.5 155.434 202.5 157.091V168.962H196.5V157.091Z"
fill="#5DCCFC" />
<path
d="M211.5 166.334C211.5 164.677 212.843 163.334 214.5 163.334C216.157 163.334 217.5 164.677 217.5 166.334V168.962H211.5V166.334Z"
fill="#5DCCFC" />
<path opacity="0.3"
d="M225.5 91.9624C225.5 90.3056 226.843 88.9624 228.5 88.9624C230.157 88.9624 231.5 90.3055 231.5 91.9624V168.962H225.5V91.9624Z"
fill="#8EDCFC" />
<path
d="M225.5 144.209C225.5 142.552 226.843 141.209 228.5 141.209C230.157 141.209 231.5 142.552 231.5 144.209V168.962H225.5V144.209Z"
fill="#5DCCFC" />
<path
d="M239.5 135.962C239.5 134.306 240.843 132.962 242.5 132.962C244.157 132.962 245.5 134.306 245.5 135.962V168.962H239.5V135.962Z"
fill="#5DCCFC" />
<path
d="M254.5 153.034C254.5 151.377 255.843 150.034 257.5 150.034C259.157 150.034 260.5 151.377 260.5 153.034V168.962H254.5V153.034Z"
fill="#5DCCFC" />
<path opacity="0.3"
d="M239.5 91.9624C239.5 90.3056 240.843 88.9624 242.5 88.9624C244.157 88.9624 245.5 90.3055 245.5 91.9624V168.962H239.5V91.9624Z"
fill="#8EDCFC" />
<path opacity="0.3"
d="M254.5 91.9624C254.5 90.3056 255.843 88.9624 257.5 88.9624C259.157 88.9624 260.5 90.3055 260.5 91.9624V168.962H254.5V91.9624Z"
fill="#8EDCFC" />
<path d="M142.5 168.962H266.5" stroke="#3089DB" stroke-opacity="0.33" />
<path d="M38 62.9624H125L157.5 92.9624" stroke="#37C9E9" />
<path d="M39 56.9624H93.5" stroke="#37C9E9" />
<circle cx="131" cy="56.4624" r="4" transform="rotate(-90 131 56.4624)" fill="#C8F5FF" />
<g filter="url(#filter3_f_70964_13680)">
<circle cx="157" cy="92.4624" r="21" transform="rotate(-90 157 92.4624)" fill="#3CE5FC" fill-opacity="0.3" />
</g>
<circle cx="157" cy="92.4624" r="12.5" transform="rotate(-90 157 92.4624)" stroke="#3CE5FC" />
<g filter="url(#filter4_f_70964_13680)">
<circle cx="157" cy="92.4624" r="12.5" transform="rotate(-90 157 92.4624)" stroke="#3CE5FC" />
</g>
<path d="M362 42.9624H275L242.5 72.9624" stroke="#37C9E9" />
<path d="M361 36.9624H306.5" stroke="#37C9E9" />
<circle cx="4" cy="4" r="4" transform="matrix(0 -1 -1 0 221 40.4624)" fill="#C8F5FF" />
<g filter="url(#filter5_f_70964_13680)">
<circle cx="21" cy="21" r="21" transform="matrix(0 -1 -1 0 264 93.4624)" fill="#3CE5FC" fill-opacity="0.3" />
</g>
<circle cx="12" cy="12" r="12.5" transform="matrix(0 -1 -1 0 255 84.4624)" stroke="#3CE5FC" />
<g filter="url(#filter6_f_70964_13680)">
<circle cx="12" cy="12" r="12.5" transform="matrix(0 -1 -1 0 255 84.4624)" stroke="#3CE5FC" />
</g>
</g>
<defs>
<clipPath id="bgblur_1_70964_13680_clip_path" transform="translate(0 0)">
<rect x="130.5" y="28.9624" width="154" height="236" rx="20" />
</clipPath>
<filter id="filter0_dddi_70964_13680" x="70.5" y="-1.0376" width="274" height="356" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="30" />
<feGaussianBlur stdDeviation="30" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_70964_13680" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="15" />
<feGaussianBlur stdDeviation="15" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
<feBlend mode="normal" in2="effect1_dropShadow_70964_13680" result="effect2_dropShadow_70964_13680" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="5" />
<feGaussianBlur stdDeviation="5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
<feBlend mode="normal" in2="effect2_dropShadow_70964_13680" result="effect3_dropShadow_70964_13680" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_70964_13680" result="shape" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="50" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0.800553 0 0 0 0 0.844432 0 0 0 0 1 0 0 0 0.15 0" />
<feBlend mode="normal" in2="shape" result="effect4_innerShadow_70964_13680" />
</filter>
<clipPath id="bgblur_2_70964_13680_clip_path" transform="translate(-70.5 1.0376)">
<rect x="130.5" y="28.9624" width="154" height="236" rx="20" />
</clipPath>
<clipPath id="bgblur_3_70964_13680_clip_path" transform="translate(743.311 -168.962)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M-723.311 284.144L-705.475 278.144C-687.64 273.144 -648.997 262.144 -613.327 249.144C-574.684 235.144 -539.014 221.144 -503.344 213.144C-464.701 206.144 -429.03 206.144 -390.387 211.144C-354.717 217.144 -319.047 228.144 -280.404 235.144C-244.734 243.144 -206.091 247.144 -170.42 237.144C-134.75 228.144 -96.1072 206.144 -60.4369 200.144C-21.7941 194.144 13.8763 206.144 49.5466 213.144C88.1895 221.144 123.86 224.144 162.503 217.144C198.173 209.144 233.843 191.144 272.486 189.144C308.156 187.144 346.799 202.144 364.635 209.144L382.47 217.144V284.144H364.635C346.799 284.144 308.156 284.144 272.486 284.144C233.843 284.144 198.173 284.144 162.503 284.144C123.86 284.144 88.1895 284.144 49.5466 284.144C13.8763 284.144 -21.7941 284.144 -60.4369 284.144C-96.1072 284.144 -134.75 284.144 -170.42 284.144C-206.091 284.144 -244.734 284.144 -280.404 284.144C-319.047 284.144 -354.717 284.144 -390.387 284.144C-429.03 284.144 -464.701 284.144 -503.344 284.144C-539.014 284.144 -574.684 284.144 -613.327 284.144C-648.997 284.144 -687.64 284.144 -705.475 284.144H-723.311Z" />
</clipPath>
<clipPath id="bgblur_4_70964_13680_clip_path" transform="translate(-5.21484 -158.962)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1131 274.144L1113.16 268.144C1095.32 263.144 1056.68 252.144 1021.01 239.144C982.369 225.144 946.698 211.144 911.028 203.144C872.385 196.144 836.715 196.144 798.072 201.144C762.402 207.144 726.731 218.144 688.089 225.144C652.418 233.144 613.775 237.144 578.105 227.144C542.435 218.144 503.792 196.144 468.121 190.144C429.479 184.144 393.808 196.144 358.138 203.144C319.495 211.144 283.825 214.144 245.182 207.144C209.512 199.144 173.841 181.144 135.198 179.144C99.5281 177.144 60.8853 192.144 43.05 199.144L25.2148 207.144V274.144H43.05C60.8853 274.144 99.5281 274.144 135.198 274.144C173.841 274.144 209.512 274.144 245.182 274.144C283.825 274.144 319.495 274.144 358.138 274.144C393.808 274.144 429.479 274.144 468.121 274.144C503.792 274.144 542.435 274.144 578.105 274.144C613.775 274.144 652.418 274.144 688.089 274.144C726.731 274.144 762.402 274.144 798.072 274.144C836.715 274.144 872.385 274.144 911.028 274.144C946.698 274.144 982.369 274.144 1021.01 274.144C1056.68 274.144 1095.32 274.144 1113.16 274.144H1131Z" />
</clipPath>
<filter id="filter3_f_70964_13680" x="106" y="41.4624" width="102" height="102" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_70964_13680" />
</filter>
<filter id="filter4_f_70964_13680" x="140" y="75.4624" width="34" height="34" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_70964_13680" />
</filter>
<filter id="filter5_f_70964_13680" x="192" y="21.4624" width="102" height="102" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_70964_13680" />
</filter>
<filter id="filter6_f_70964_13680" x="226" y="55.4624" width="34" height="34" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_70964_13680" />
</filter>
<linearGradient id="paint0_linear_70964_13680" x1="223.353" y1="28.9624" x2="223.353" y2="264.962"
gradientUnits="userSpaceOnUse">
<stop stop-color="#2E335A" stop-opacity="0" />
<stop offset="1" stop-color="#1C1B33" stop-opacity="0.2" />
</linearGradient>
<linearGradient id="paint1_linear_70964_13680" x1="207.5" y1="28.9624" x2="207.5" y2="264.962"
gradientUnits="userSpaceOnUse">
<stop stop-color="currentColor" />
<stop offset="1" stop-color="currentColor" stop-opacity="0.3" />
</linearGradient>
<linearGradient id="paint2_linear_70964_13680" x1="223.353" y1="28.9624" x2="223.353" y2="264.962"
gradientUnits="userSpaceOnUse">
<stop stop-color="#2E335A" stop-opacity="0" />
<stop offset="1" stop-color="#1C1B33" stop-opacity="0.2" />
</linearGradient>
<radialGradient id="paint3_radial_70964_13680" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(207.5 -7.61068) rotate(90) scale(279.474 225.047)">
<stop stop-color="currentColor" stop-opacity="0.8" />
<stop offset="0.995871" stop-color="currentColor" stop-opacity="0" />
</radialGradient>
<linearGradient id="paint4_linear_70964_13680" x1="207.5" y1="28.9624" x2="207.5" y2="264.962"
gradientUnits="userSpaceOnUse">
<stop stop-color="currentColor" />
<stop offset="1" stop-color="currentColor" stop-opacity="0.3" />
</linearGradient>
<linearGradient id="paint5_linear_70964_13680" x1="327.571" y1="484.667" x2="-174.081" y2="914.517"
gradientUnits="userSpaceOnUse">
<stop stop-color="#5DCCFC" />
<stop offset="0.149318" stop-color="#5DA6FC" stop-opacity="0.850682" />
<stop offset="1" stop-color="#5DCCFC" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint6_linear_70964_13680" x1="474.161" y1="144.248" x2="514.175" y2="362.022"
gradientUnits="userSpaceOnUse">
<stop stop-color="#3FA1CB" />
<stop offset="0.560867" stop-color="#5350E6" stop-opacity="0.76" />
<stop offset="1" stop-color="#5DCCFC" stop-opacity="0" />
</linearGradient>
<clipPath id="clip0_70964_13680">
<rect width="400" height="292" fill="currentColor" transform="translate(0 0.962402)" />
</clipPath>
</defs>
</svg>