@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
584 lines (583 loc) • 17.5 kB
JSX
const React = require("react");
const FaceInCloudsIcon = ({ title, titleId, ...props }) => (
<svg
width="1em"
height="1em"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<g clipPath="url(#clip0_30_40)">
<g filter="url(#filter0_i_30_40)">
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint0_radial_30_40)"
/>
</g>
<path
d="M15 14.5C15 16.9853 12.9853 19 10.5 19C8.01472 19 6 16.9853 6 14.5C6 12.0147 8.01472 10 10.5 10C12.9853 10 15 12.0147 15 14.5Z"
fill="white"
/>
<path
d="M26 14.5C26 16.9853 23.9853 19 21.5 19C19.0147 19 17 16.9853 17 14.5C17 12.0147 19.0147 10 21.5 10C23.9853 10 26 12.0147 26 14.5Z"
fill="white"
/>
<path
d="M11 18C12.6569 18 14 16.6569 14 15C14 13.3431 12.6569 12 11 12C9.34315 12 8 13.3431 8 15C8 16.6569 9.34315 18 11 18Z"
fill="url(#paint1_linear_30_40)"
/>
<path
d="M21 18C22.6569 18 24 16.6569 24 15C24 13.3431 22.6569 12 21 12C19.3431 12 18 13.3431 18 15C18 16.6569 19.3431 18 21 18Z"
fill="url(#paint2_linear_30_40)"
/>
<circle cx={29} cy={27} r={7} fill="url(#paint3_radial_30_40)" />
<g filter="url(#filter1_f_30_40)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M26.1143 20.6206C26.9942 20.222 27.9712 20 29 20C31.6432 20 33.9442 21.465 35.1354 23.6273C34.1662 24.4817 32.8936 25 31.5 25C28.8464 25 26.6318 23.1208 26.1143 20.6206Z"
fill="#BAA6BA"
/>
</g>
<circle cx={32.5} cy={19.5} r={5.5} fill="url(#paint4_linear_30_40)" />
<g filter="url(#filter2_f_30_40)">
<circle
cx={32.5}
cy={19.5}
r={5.25}
stroke="url(#paint5_radial_30_40)"
strokeWidth={0.5}
/>
</g>
<circle cx={6} cy={28} r={8} fill="url(#paint6_linear_30_40)" />
<g filter="url(#filter3_f_30_40)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.8397 29.2183C10.6208 28.6889 10.5 28.1085 10.5 27.5C10.5 25.0147 12.5147 23 15 23C17.0305 23 18.747 24.3449 19.3071 26.1925C23.1334 27.0209 26 30.4257 26 34.5C26 39.1944 22.1944 43 17.5 43C12.8056 43 9 39.1944 9 34.5C9 32.504 9.68797 30.6687 10.8397 29.2183Z"
fill="#AC8CC6"
/>
</g>
<circle cx={15.5} cy={25.5} r={4.5} fill="url(#paint7_radial_30_40)" />
<circle cx={0.5} cy={20.5} r={5.5} fill="url(#paint8_linear_30_40)" />
<g filter="url(#filter4_f_30_40)">
<circle
cx={0.5}
cy={20.5}
r={5.25}
stroke="url(#paint9_radial_30_40)"
strokeWidth={0.5}
/>
</g>
<circle cx={19.5} cy={32.5} r={8.5} fill="url(#paint10_linear_30_40)" />
<circle cx={29} cy={4} r={7} fill="url(#paint11_radial_30_40)" />
<circle cx={6.5} cy={2.5} r={7.5} fill="url(#paint12_radial_30_40)" />
<g filter="url(#filter5_f_30_40)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.3342 6.36951C13.0708 5.26107 13.5 3.93066 13.5 2.50001C13.5 1.21769 13.1552 0.015898 12.5532 -1.0177L11 -0.499951C11.6667 4.8995e-05 12.9 1.50005 12.5 3.50005C12.2362 4.81891 12.2479 5.77539 12.3342 6.36951Z"
fill="#9A7FA9"
/>
</g>
<g filter="url(#filter6_f_30_40)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M35.6853 6.08197C34.7989 8.93125 32.1411 11 29.0001 11C28.27 11 27.566 10.8882 26.9043 10.6809C28.303 7.90449 31.1791 6 34.5 6C34.9023 6 35.2979 6.02794 35.6853 6.08197Z"
fill="#BAA8C4"
/>
</g>
<circle cx={36.5} cy={11.5} r={8.5} fill="url(#paint13_linear_30_40)" />
<circle
opacity={0.08}
cx={36.5}
cy={11.5}
r={8.375}
stroke="url(#paint14_radial_30_40)"
strokeWidth={0.25}
/>
<g filter="url(#filter7_f_30_40)">
<circle
cx={36.5}
cy={11.5}
r={8.25}
stroke="url(#paint15_radial_30_40)"
strokeWidth={0.5}
/>
</g>
<circle cx={19.5} cy={-0.5} r={6.5} fill="url(#paint16_radial_30_40)" />
<circle cx={-2} cy={10} r={7} fill="url(#paint17_linear_30_40)" />
<g opacity={0.8} filter="url(#filter8_f_30_40)">
<circle cx={3} cy={6} r={3} fill="white" />
</g>
<g opacity={0.8} filter="url(#filter9_f_30_40)">
<ellipse
cx={27.1357}
cy={29.507}
rx={2}
ry={3.52487}
transform="rotate(-15 27.1357 29.507)"
fill="white"
/>
</g>
<g filter="url(#filter10_f_30_40)">
<ellipse cx={0.5} cy={26} rx={2.5} ry={1} fill="#AC84D3" />
</g>
</g>
<defs>
<filter
id="filter0_i_30_40"
x={2}
y={0}
width={29.9978}
height={29.9978}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
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 dx={2} dy={-2} />
<feGaussianBlur stdDeviation={2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_30_40" />
</filter>
<filter
id="filter1_f_30_40"
x={24.1143}
y={18}
width={13.0212}
height={9}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter2_f_30_40"
x={25.5}
y={12.5}
width={14}
height={14}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.75}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter3_f_30_40"
x={7}
y={21}
width={21}
height={24}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter4_f_30_40"
x={-5.5}
y={14.5}
width={12}
height={12}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.25}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter5_f_30_40"
x={9}
y={-3.0177}
width={6.5}
height={11.3872}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter6_f_30_40"
x={24.9043}
y={4}
width={12.781}
height={9}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter7_f_30_40"
x={26.5}
y={1.5}
width={20}
height={20}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.75}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter8_f_30_40"
x={-3}
y={0}
width={12}
height={12}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1.5}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter9_f_30_40"
x={21.9988}
y={23.0626}
width={10.2739}
height={12.8887}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1.5}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<filter
id="filter10_f_30_40"
x={-4}
y={23}
width={9}
height={6}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_30_40"
/>
</filter>
<radialGradient
id="paint0_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(18.5 9) rotate(123.93) scale(33.1436)"
>
<stop stopColor="#F8A940" />
<stop offset={0.394071} stopColor="#F48C50" />
<stop offset={1} stopColor="#F70A8D" />
</radialGradient>
<linearGradient
id="paint1_linear_30_40"
x1={16.5}
y1={11}
x2={15.5}
y2={18}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<linearGradient
id="paint2_linear_30_40"
x1={16.5}
y1={11}
x2={15.5}
y2={18}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<radialGradient
id="paint3_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(29 27) rotate(90) scale(8)"
>
<stop stopColor="#F4ECFD" />
<stop offset={1} stopColor="#C3B7C1" />
</radialGradient>
<linearGradient
id="paint4_linear_30_40"
x1={32.5}
y1={14}
x2={32.5}
y2={25}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#BCB1C1" />
<stop offset={1} stopColor="#C8B3DF" />
</linearGradient>
<radialGradient
id="paint5_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(28.6176 23.7059) rotate(-56.3099) scale(4.66601)"
>
<stop stopColor="white" />
<stop offset={1} stopColor="white" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint6_linear_30_40"
x1={6}
y1={20}
x2={6}
y2={36}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F0E2F0" />
<stop offset={1} stopColor="#D4C4E4" />
</linearGradient>
<radialGradient
id="paint7_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.5 24) rotate(159.444) scale(8.544)"
>
<stop offset={0.117572} stopColor="#E9E1F0" />
<stop offset={1} stopColor="#BBA2D3" />
</radialGradient>
<linearGradient
id="paint8_linear_30_40"
x1={0.499999}
y1={16.1786}
x2={-3}
y2={25.5}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FCFBFD" />
<stop offset={1} stopColor="#BC96E3" />
</linearGradient>
<radialGradient
id="paint9_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(5.5 23.5) rotate(-135) scale(4.24264 2.96972)"
>
<stop stopColor="white" />
<stop offset={1} stopColor="white" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint10_linear_30_40"
x1={26}
y1={30.5}
x2={13}
y2={34}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFFCFF" />
<stop offset={1} stopColor="#D3C5E0" />
</linearGradient>
<radialGradient
id="paint11_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(30 2) rotate(110.854) scale(11.2361 18.9982)"
>
<stop offset={0.133331} stopColor="#F4EFFB" />
<stop offset={1} stopColor="#B499C0" />
</radialGradient>
<radialGradient
id="paint12_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(4 -1) rotate(53.8418) scale(16.1012)"
>
<stop offset={0.185363} stopColor="#DDDBE0" />
<stop offset={0.570992} stopColor="#D4C3E1" />
<stop offset={0.820021} stopColor="#B897CD" />
</radialGradient>
<linearGradient
id="paint13_linear_30_40"
x1={36.5}
y1={3}
x2={36.5}
y2={20}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EBE9ED" />
<stop offset={1} stopColor="#BDA7D3" />
</linearGradient>
<radialGradient
id="paint14_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(30.5 18) rotate(-56.3099) scale(7.2111)"
>
<stop stopColor="white" />
<stop offset={1} stopColor="white" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint15_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(30.5 18) rotate(-56.3099) scale(7.2111)"
>
<stop stopColor="white" />
<stop offset={1} stopColor="white" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint16_radial_30_40"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(25 -0.500001) rotate(135) scale(11.3137)"
>
<stop stopColor="#FFFDFF" />
<stop offset={0.55587} stopColor="#D4CDDB" />
<stop offset={1} stopColor="#C1AFD1" />
</radialGradient>
<linearGradient
id="paint17_linear_30_40"
x1={-2}
y1={4.5}
x2={-2}
y2={17}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FCFBFD" />
<stop offset={1} stopColor="#BC96E3" />
</linearGradient>
<clipPath id="clip0_30_40">
<path
d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z"
fill="white"
/>
</clipPath>
</defs>
</svg>
);
module.exports = FaceInCloudsIcon;