@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
544 lines (543 loc) • 19.5 kB
JSX
const React = require("react");
const ClownFaceIcon = ({ 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}
<path
d="M14.0011 4.93292C14.0011 6.58978 12.658 7.93292 11.0011 7.93292C10.9677 7.93292 10.9345 7.93238 10.9014 7.9313C10.5041 9.89174 8.95992 11.436 6.99947 11.8332C7.00055 11.8663 7.0011 11.8996 7.0011 11.9329C7.0011 13.5898 5.65795 14.9329 4.0011 14.9329C2.34424 14.9329 1.0011 13.5898 1.0011 11.9329C1.0011 11.2468 1.23145 10.6144 1.61905 10.109C1.7676 9.91527 1.7942 9.64725 1.67182 9.43604C1.24527 8.6999 1.0011 7.84493 1.0011 6.93292C1.0011 4.1715 3.23967 1.93292 6.0011 1.93292C6.9131 1.93292 7.76808 2.1771 8.50421 2.60364C8.71543 2.72603 8.98345 2.69942 9.17716 2.55087C9.68259 2.16328 10.3149 1.93292 11.0011 1.93292C12.658 1.93292 14.0011 3.27607 14.0011 4.93292Z"
fill="url(#paint0_radial_6815_5251)"
/>
<circle
cx={11.0011}
cy={4.93292}
r={3}
fill="url(#paint1_radial_6815_5251)"
/>
<circle
cx={6.0011}
cy={6.93292}
r={5}
fill="url(#paint2_radial_6815_5251)"
/>
<path
d="M18.0012 4.93292C18.0012 6.58978 19.3443 7.93292 21.0012 7.93292C21.0345 7.93292 21.0678 7.93238 21.1008 7.9313C21.4981 9.89174 23.0423 11.436 25.0028 11.8332C25.0017 11.8663 25.0012 11.8996 25.0012 11.9329C25.0012 13.5898 26.3443 14.9329 28.0012 14.9329C29.658 14.9329 31.0012 13.5898 31.0012 11.9329C31.0012 11.2468 30.7708 10.6144 30.3832 10.109C30.2347 9.91527 30.2081 9.64725 30.3304 9.43604C30.757 8.6999 31.0012 7.84493 31.0012 6.93292C31.0012 4.1715 28.7626 1.93292 26.0012 1.93292C25.0892 1.93292 24.2342 2.1771 23.498 2.60364C23.2868 2.72603 23.0188 2.69942 22.8251 2.55087C22.3197 2.16328 21.6873 1.93292 21.0012 1.93292C19.3443 1.93292 18.0012 3.27607 18.0012 4.93292Z"
fill="url(#paint3_radial_6815_5251)"
/>
<g filter="url(#filter0_f_6815_5251)">
<path
d="M24.683 12.903C25.2248 14.4688 26.9334 15.2988 28.4991 14.7569C30.2547 14.2969 31.1267 12.4829 30.5848 10.9172C30.043 9.35147 28.7552 9.85659 27.1894 10.3985C25.6237 10.9403 24.1411 11.3373 24.683 12.903Z"
fill="url(#paint4_radial_6815_5251)"
/>
</g>
<circle
r={3}
transform="matrix(-1 0 0 1 21.0012 4.93292)"
fill="url(#paint5_radial_6815_5251)"
/>
<circle
r={3}
transform="matrix(-1 0 0 1 21.0012 4.93292)"
fill="url(#paint6_radial_6815_5251)"
/>
<circle
r={5}
transform="matrix(-1 0 0 1 26.0012 6.93292)"
fill="url(#paint7_radial_6815_5251)"
/>
<circle
r={5}
transform="matrix(-1 0 0 1 26.0012 6.93292)"
fill="url(#paint8_radial_6815_5251)"
/>
<g filter="url(#filter1_i_6815_5251)">
<path
d="M16 30.9307C25.3344 30.9307 29.9989 24.6632 29.9989 16.9318C29.9989 9.20044 25.3344 2.93292 16 2.93292C6.66553 2.93292 2.0011 9.20044 2.0011 16.9318C2.0011 24.6632 6.66553 30.9307 16 30.9307Z"
fill="url(#paint9_radial_6815_5251)"
/>
</g>
<path
d="M16.0162 30.9307C25.3506 30.9307 30.015 24.6632 30.015 16.9318C30.015 9.20044 25.3506 2.93292 16.0162 2.93292C6.68171 2.93292 2.01727 9.20044 2.01727 16.9318C2.01727 24.6632 6.68171 30.9307 16.0162 30.9307Z"
fill="url(#paint10_radial_6815_5251)"
/>
<g filter="url(#filter2_f_6815_5251)">
<path
d="M20.2512 17.433C22.3222 17.433 24.0012 15.7541 24.0012 13.683C24.0012 11.6119 22.3222 9.93298 20.2512 9.93298C18.1801 9.93298 16.5012 11.6119 16.5012 13.683C16.5012 15.7541 18.1801 17.433 20.2512 17.433Z"
fill="#8F74A1"
/>
</g>
<path
d="M22.0012 17.933C24.7626 17.933 27.0012 15.6944 27.0012 12.933C27.0012 10.1716 24.7626 7.93298 22.0012 7.93298C19.2397 7.93298 17.0012 10.1716 17.0012 12.933C17.0012 15.6944 19.2397 17.933 22.0012 17.933Z"
fill="url(#paint11_linear_6815_5251)"
/>
<path
d="M10.0012 17.933C12.7626 17.933 15.0012 15.6944 15.0012 12.933C15.0012 10.1716 12.7626 7.93298 10.0012 7.93298C7.23974 7.93298 5.00116 10.1716 5.00116 12.933C5.00116 15.6944 7.23974 17.933 10.0012 17.933Z"
fill="url(#paint12_linear_6815_5251)"
/>
<path
d="M23.7812 19.933C23.7812 24.173 20.2412 26.683 16.0012 26.683C11.7612 26.683 8.25116 24.173 8.25116 19.933C8.25116 19.933 11.0312 21.933 16.0012 21.933C21.5312 21.923 23.7812 19.933 23.7812 19.933Z"
fill="url(#paint13_linear_6815_5251)"
stroke="url(#paint14_linear_6815_5251)"
strokeWidth={2.5}
strokeMiterlimit={10}
strokeLinecap="round"
strokeLinejoin="round"
/>
<g filter="url(#filter3_f_6815_5251)">
<path
d="M16.0012 26.9329C19.5164 26.9329 22.7017 24.6922 23.688 21.5099"
stroke="url(#paint15_linear_6815_5251)"
strokeWidth={1.5}
strokeMiterlimit={10}
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<g filter="url(#filter4_f_6815_5251)">
<path
d="M21.1428 17.0907C23.1193 17.0907 24.7216 15.4884 24.7216 13.5119C24.7216 11.5353 23.1193 9.93298 21.1428 9.93298C19.1662 9.93298 17.5639 11.5353 17.5639 13.5119C17.5639 15.4884 19.1662 17.0907 21.1428 17.0907Z"
fill="#3450A6"
/>
</g>
<g filter="url(#filter5_f_6815_5251)">
<path
d="M10.7512 17.433C12.8222 17.433 14.5012 15.7541 14.5012 13.683C14.5012 11.6119 12.8222 9.93298 10.7512 9.93298C8.68009 9.93298 7.00116 11.6119 7.00116 13.683C7.00116 15.7541 8.68009 17.433 10.7512 17.433Z"
fill="#3450A6"
/>
</g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.0012 13.183C15.0012 15.2541 13.3222 16.933 11.2512 16.933C9.18009 16.933 7.50116 15.2541 7.50116 13.183C7.50116 11.1119 9.18009 9.43298 11.2512 9.43298C13.3222 9.43298 15.0012 11.1119 15.0012 13.183ZM24.5012 13.183C24.5012 15.2541 22.8222 16.933 20.7512 16.933C18.6801 16.933 17.0012 15.2541 17.0012 13.183C17.0012 11.1119 18.6801 9.43298 20.7512 9.43298C22.8222 9.43298 24.5012 11.1119 24.5012 13.183Z"
fill="white"
/>
<path
d="M19.7512 15.433C20.9938 15.433 22.0012 14.4256 22.0012 13.183C22.0012 11.9403 20.9938 10.933 19.7512 10.933C18.5085 10.933 17.5012 11.9403 17.5012 13.183C17.5012 14.4256 18.5085 15.433 19.7512 15.433Z"
fill="#3E2930"
/>
<g filter="url(#filter6_f_6815_5251)">
<path
d="M15.2808 19.5C16.2473 19.5 17.0308 18.7165 17.0308 17.75C17.0308 16.7835 16.2473 16 15.2808 16C14.3143 16 13.5308 16.7835 13.5308 17.75C13.5308 18.7165 14.3143 19.5 15.2808 19.5Z"
fill="url(#paint16_radial_6815_5251)"
/>
</g>
<path
d="M16.0012 18.933C16.9677 18.933 17.7512 18.1495 17.7512 17.183C17.7512 16.2165 16.9677 15.433 16.0012 15.433C15.0347 15.433 14.2512 16.2165 14.2512 17.183C14.2512 18.1495 15.0347 18.933 16.0012 18.933Z"
fill="url(#paint17_linear_6815_5251)"
/>
<g filter="url(#filter7_f_6815_5251)">
<path
d="M16.2824 17.75C16.8355 17.75 17.2839 17.3016 17.2839 16.7485C17.2839 16.1954 16.8355 15.7469 16.2824 15.7469C15.7292 15.7469 15.2808 16.1954 15.2808 16.7485C15.2808 17.3016 15.7292 17.75 16.2824 17.75Z"
fill="url(#paint18_linear_6815_5251)"
/>
</g>
<path
d="M12.2512 15.433C13.4938 15.433 14.5012 14.4256 14.5012 13.183C14.5012 11.9403 13.4938 10.933 12.2512 10.933C11.0085 10.933 10.0012 11.9403 10.0012 13.183C10.0012 14.4256 11.0085 15.433 12.2512 15.433Z"
fill="#3E2930"
/>
<defs>
<filter
id="filter0_f_6815_5251"
x={24.069}
y={9.36749}
width={7.17554}
height={6.05518}
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_6815_5251"
/>
</filter>
<filter
id="filter1_i_6815_5251"
x={2.0011}
y={0.932922}
width={29.9977}
height={29.9977}
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_6815_5251"
/>
</filter>
<filter
id="filter2_f_6815_5251"
x={15.0012}
y={8.43298}
width={10.5}
height={10.5}
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_6815_5251"
/>
</filter>
<filter
id="filter3_f_6815_5251"
x={14.7512}
y={20.2598}
width={10.187}
height={7.92316}
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_6815_5251"
/>
</filter>
<filter
id="filter4_f_6815_5251"
x={16.0639}
y={8.43298}
width={10.1577}
height={10.1577}
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_6815_5251"
/>
</filter>
<filter
id="filter5_f_6815_5251"
x={5.50116}
y={8.43298}
width={10.5}
height={10.5}
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_6815_5251"
/>
</filter>
<filter
id="filter6_f_6815_5251"
x={12.5308}
y={15}
width={5.5}
height={5.5}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.5}
result="effect1_foregroundBlur_6815_5251"
/>
</filter>
<filter
id="filter7_f_6815_5251"
x={14.2808}
y={14.7469}
width={4.00305}
height={4.00305}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.5}
result="effect1_foregroundBlur_6815_5251"
/>
</filter>
<radialGradient
id="paint0_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.0011 1.93292) rotate(124.992) scale(12.2066 16.6709)"
>
<stop stopColor="#FF478C" />
<stop offset={0.364856} stopColor="#FC2E5F" />
<stop offset={1} stopColor="#D02651" />
</radialGradient>
<radialGradient
id="paint1_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.0011 2.93292) rotate(119.745) scale(4.03113)"
>
<stop stopColor="#FF4A90" />
<stop offset={0.538133} stopColor="#EF3062" />
</radialGradient>
<radialGradient
id="paint2_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.45192 4.84948) rotate(154.021) scale(4.75627)"
>
<stop offset={0.183974} stopColor="#FF508A" />
<stop offset={1} stopColor="#FF4885" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint3_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.0012 1.93292) rotate(55.008) scale(12.2066 16.6709)"
>
<stop stopColor="#FF478C" />
<stop offset={0.364856} stopColor="#FC2E5F" />
<stop offset={1} stopColor="#D02651" />
</radialGradient>
<radialGradient
id="paint4_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(28.9186 9.12519) rotate(89.4846) scale(3.8873 3.88729)"
>
<stop offset={0.015625} stopColor="#FF71A8" />
<stop offset={0.832148} stopColor="#EF3062" />
</radialGradient>
<radialGradient
id="paint5_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.1073 1.31318) rotate(20.8693) scale(8.07506 6.20309)"
>
<stop offset={0.015625} stopColor="#FF71A8" />
<stop offset={0.832148} stopColor="#EF3062" />
</radialGradient>
<radialGradient
id="paint6_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(5.75786 2.46674) rotate(-156.613) scale(3.97533 3.24907)"
>
<stop offset={0.505514} stopColor="#D62853" />
<stop offset={1} stopColor="#D62853" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint7_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(7.45083 2.91656) rotate(154.021) scale(4.75627)"
>
<stop offset={0.183974} stopColor="#FF508A" />
<stop offset={1} stopColor="#FF4885" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint8_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.59643 4.11123) rotate(-178.152) scale(5.85065 4.78179)"
>
<stop offset={0.307292} stopColor="#D62853" />
<stop offset={1} stopColor="#D62853" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(25.5011 9.93293) rotate(132.839) scale(37.5033)"
>
<stop offset={0.0740312} stopColor="#F5F3F7" />
<stop offset={0.538751} stopColor="#D6B1D8" />
<stop offset={1} stopColor="#C693ED" />
</radialGradient>
<radialGradient
id="paint10_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.8776 11.2439) rotate(111.564) scale(22.4461 30.4012)"
>
<stop offset={0.601485} stopColor="#CD8BFF" stopOpacity={0} />
<stop offset={1} stopColor="#C477FF" />
</radialGradient>
<linearGradient
id="paint11_linear_6815_5251"
x1={24.0012}
y1={7.93298}
x2={20.0012}
y2={17.433}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4095D9" />
<stop offset={1} stopColor="#3E71C5" />
</linearGradient>
<linearGradient
id="paint12_linear_6815_5251"
x1={12.0012}
y1={7.93298}
x2={8.00116}
y2={17.433}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4095D9" />
<stop offset={1} stopColor="#3E71C5" />
</linearGradient>
<linearGradient
id="paint13_linear_6815_5251"
x1={16.0012}
y1={22.433}
x2={15.5012}
y2={25.933}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C8A7C0" />
<stop offset={1} stopColor="#ECCEDF" />
</linearGradient>
<linearGradient
id="paint14_linear_6815_5251"
x1={5.87765}
y1={23.308}
x2={18.8776}
y2={21.8689}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E31F6A" />
<stop offset={1} stopColor="#F83594" />
</linearGradient>
<linearGradient
id="paint15_linear_6815_5251"
x1={23.688}
y1={17.4314}
x2={16.0012}
y2={26.9329}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.369011} stopColor="#FF7BBC" stopOpacity={0.4} />
<stop offset={1} stopColor="#FB3982" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint16_radial_6815_5251"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.2198 16.9672) rotate(138.31) scale(3.80814 5.18257)"
>
<stop offset={0.208333} stopColor="#914BC7" />
<stop offset={1} stopColor="#CD8BFF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint17_linear_6815_5251"
x1={16.005}
y1={18.9333}
x2={16.005}
y2={15.4338}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E81123" />
<stop offset={0.4437} stopColor="#EA0A4F" />
<stop offset={1} stopColor="#EC008C" />
</linearGradient>
<linearGradient
id="paint18_linear_6815_5251"
x1={16.7526}
y1={15.9314}
x2={15.715}
y2={16.7343}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.369011} stopColor="#FF7BBC" stopOpacity={0.72} />
<stop offset={1} stopColor="#FF7BBC" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
);
module.exports = ClownFaceIcon;