react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
297 lines (292 loc) • 13.6 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawCreditCardPayments = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="03854386-909d-4c5e-a40c-cbc0e2c8086d"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1084 830.5"
>
<defs>
<linearGradient
id="90f0dbd4-e0cf-4508-b8ac-47d2cbf1c993"
x1={637.43}
y1={864.75}
x2={637.43}
y2={34.75}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="gray" stopOpacity={0.25} />
<stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
<stop offset={1} stopColor="gray" stopOpacity={0.1} />
</linearGradient>
<linearGradient
id="21e38948-19ad-47ba-be29-9a74b5c58390"
x1={981.72}
y1={454.26}
x2={981.72}
y2={316.75}
xlinkHref="#90f0dbd4-e0cf-4508-b8ac-47d2cbf1c993"
/>
</defs>
<title>credit card payment</title>
<path
d="M152.13,418.6c-15,4.9-29,16.76-32.78,33.21-4.29,18.9,5.59,38,7,57.38,4.61,63.61-79.13,108.49-67.19,171C63.91,705,83.09,723.29,102,738.34c30.27,24.11,63.85,45.4,101,51.42,56.44,9.13,115.42-17.73,170.29-.75,44.25,13.69,78.11,53.83,122.06,68.64,33.46,11.28,69.49,6.83,104.28,2.27,18.71-2.45,38.37-5.29,53.5-17.44,28.17-22.62,29.87-67.28,48.71-99.29,29.07-49.41,92.81-59.06,146.26-49.46S953.42,727,1007.57,725c11.57-.41,23.44-2.12,33.52-8.25,12.27-7.46,20.57-20.59,27.9-33.59,45.68-81,71.13-175.22,72.94-270.07.31-16.39-.22-33.49-7.35-48-9-18.31-27-29.24-45-36.62C1046.5,310.85,998.91,308,956.68,288c-40.73-19.27-73.73-53.08-109.19-82-70.33-57.45-153-97.21-239.52-115.26-20.37-4.25-41.51-7.29-61.75-2.38-23.32,5.66-43.42,21.37-61.49,38.27-48.09,45-86.62,100.48-130.92,149.78A765.11,765.11,0,0,1,254.32,369c-16.43,12.77-33.83,27.93-52.1,37.37C185.51,415,169.8,412.83,152.13,418.6Z"
transform="translate(-58 -34.75)"
fill={props.primaryColor}
opacity={0.1}
/>
<path
d="M1072.55,451c-22-4.6-63.65-13.23-110.79-22.79-69.79-14.15-88,39.41-88,39.41,0,27.28-91,140.44-91,140.44l-27.14-60.8a28.62,28.62,0,0,0,12.48-.84c15.54-4.64,23.22-22.17,25.71-38.18a125.46,125.46,0,0,0-9.77-71c-4.63-10.14-10.63-19.68-14.35-30.18C754,363,781.18,312,764.74,268.11c-6.79-18.11-20.33-32.8-29.69-49.72-21-38.05-20.1-85.65-43-122.61-21.48-34.65-63.81-55.19-104.36-50.61-23.91,2.7-41,11.24-63.28,1-18.81-8.62-41.39-18.26-60.76-4.68-16.52,11.58-19.33,34.39-28.35,52.42-15.84,31.67-53.42,52.34-57.84,87.47-1.09,8.66,0,17.64-2.53,26-7.22,23.63-38.66,30.61-51.54,51.7-12.61,20.64.13,51.85,23.59,57.8,10,2.54,20.76,1,30.75,3.69,9.37,2.5,18.46,11.26,16.84,20.41l-20.78,3.78L314,351.4l-9.25.58s0,.16,0,.45l-.5.06.49.4c0,.71,0,1.82,0,3.28-16.83,6.59-44.1,24.18-54.4,70.32a69.84,69.84,0,0,1-13.93,28.75c-15.33,18.9-40.77,55.81-39.35,91.24,2,50.52,2,70.73,68.78,56.58,16.87-3.57,35.22-10.89,53.23-19.83,1.05,21.06,3.78,41.71,9.48,57.21,18.21,49.51-20.23,224.31-20.23,224.31H679.55s-31.36-103.06-61.7-155.6c-21.49-37.22-13.55-59.73-7.09-69.7a93.56,93.56,0,0,0,12.39-27.62c1.1-4.31,2.17-9.2,3.09-14.62,6.83,5.59,14.12,10.61,22.37,13.61,7.64,2.77,16.33,3.53,24.06,1.39,15.82,19.34,33.49,40.55,52.4,62.59,72.83,84.87,93.06,32.33,93.06,32.33s73.84-140.44,84-182.88,32.37-40.42,32.37-40.42c60.88,15.39,114.84-6.95,139.91-20.39A6.67,6.67,0,0,0,1072.55,451ZM321.43,476.39a96.07,96.07,0,0,0,13-19l.19,0a144.31,144.31,0,0,1-7.11,20.68c-5.67,1.09-9.09,1.66-9.09,1.66Z"
transform="translate(-58 -34.75)"
fill="url(#90f0dbd4-e0cf-4508-b8ac-47d2cbf1c993)"
/>
<path
d="M461,50.48c-16.33,11.46-19.11,34-28,51.88-15.66,31.34-52.81,51.81-57.18,86.57-1.08,8.57,0,17.46-2.5,25.72-7.13,23.39-38.22,30.3-51,51.17-12.47,20.42.13,51.31,23.32,57.2,9.91,2.52,20.52,1,30.4,3.65s19.45,12.33,16.18,22c-2.43,7.2-11,11.3-12.56,18.74-1.36,6.4,3,12.5,7.22,17.48,5.36,6.3,11.08,12.5,18.25,16.63,19.72,11.36,44.32,4.54,67.06,3.79a121.17,121.17,0,0,1,76.47,24.31c6.29,4.77,12.21,10.28,16.11,17.15,12.71,22.38.69,50.47,3.39,76.06,3.06,29.08,24.78,52.42,46.71,71.75,8.76,7.72,18,15.33,29,19.32s24.15,3.77,33.4-3.35c9.72-7.48,13.1-20.73,13.16-33s-2.52-24.48-1.9-36.73c.3-6,2.49-13.13,8.34-14.31,2.93-.59,5.9.6,8.57,1.94C724.1,537.83,742,556.2,762,550.24c15.37-4.59,23-21.94,25.42-37.79a124.29,124.29,0,0,0-9.66-70.24c-4.58-10-10.51-19.47-14.19-29.87-15.46-43.69,11.39-94.18-4.85-137.59-6.71-17.92-20.1-32.46-29.35-49.21-20.8-37.66-19.87-84.77-42.52-121.35-21.23-34.3-63.09-54.62-103.17-50.09-23.64,2.67-40.53,11.13-62.56,1C502.52,46.59,480.2,37,461,50.48Z"
transform="translate(-58 -34.75)"
fill="#40243e"
/>
<path
d="M619.5,367.25s65-20,91,96l66,148s90-112,90-139c0,0,18-53,87-39,46.61,9.46,87.74,18,109.53,22.55a6.6,6.6,0,0,1,1.79,12.27c-24.78,13.3-78.13,35.41-138.32,20.18,0,0-22-2-32,40s-83,181-83,181-20,52-92-32-126-156-126-156Z"
transform="translate(-58 -34.75)"
fill="#ffbcc8"
/>
<path
d="M619.5,381.25l-8.62,28.39-8.52,28.08L585.5,493.25l-80,15-26.07-16.63L447.5,471.25l-27.53-19-40.47-28-33-69s9.1-1.61,37.47-6.77l39.53-7.23c27.3-5,37.62-25.32,40.77-46,3.77-24.76-2.77-50-2.77-50h101s11.3,17,9.53,46.36a117.53,117.53,0,0,1-4.53,25.64c-8.88,30.74,11.17,41,24.77,44.33a56.37,56.37,0,0,0,11.23,1.67Z"
transform="translate(-58 -34.75)"
fill="#ffbcc8"
/>
<path
d="M572,291.61a95.06,95.06,0,0,1-107.76,3.66c3.77-24.76-2.77-50-2.77-50h101S573.8,262.2,572,291.61Z"
transform="translate(-58 -34.75)"
opacity={0.1}
/>
<circle cx={457.5} cy={177.5} r={95} fill="#ffbcc8" />
<path
d="M619.5,381.25l-8.62,28.39-8.52,28.08L585.5,493.25l-80,15-26.07-16.63L447.5,471.25l-27.53-19-40.47-28-33-69s9.1-1.61,37.47-6.77c20,55.65,45.3,76.37,68.13,83.09,13.65,4,26.41,3,36.58,1.5a94.39,94.39,0,0,1,39.23,2c30.7,8.54,46.86-7.81,55.35-28.56,6.28-15.35,8.36-33.12,9-45a56.37,56.37,0,0,0,11.23,1.67Z"
transform="translate(-58 -34.75)"
opacity={0.1}
/>
<path
d="M307.5,865.25s38-173,20-222c-5.15-14-7.85-32.32-9.06-51.28-3-47.27,3.06-98.72,3.06-98.72.86-1.67,1.67-3.33,2.45-5q3-6.4,5.28-12.52C350.66,418.07,324,379.68,310.48,365a67.33,67.33,0,0,0-7-6.73l76.5-8.5c20.11,57.71,45.9,79,69.1,85.82,13.65,4,26.41,3,36.58,1.5a94.39,94.39,0,0,1,39.23,2c30.7,8.54,46.86-7.81,55.35-28.56,10.54-25.76,9.24-58.29,9.24-58.29l44,13s-3.88,24.1-7.39,55.77c-.83,7.43-1.64,15.27-2.37,23.32-3,33.58-4.78,70.71-1.24,95.91a194.05,194.05,0,0,1-3.77,74.68,92.61,92.61,0,0,1-12.24,27.34c-6.39,9.86-14.24,32.15,7,69,30,52,61,154,61,154Z"
transform="translate(-58 -34.75)"
fill="#ff808e"
/>
<path
d="M633,365.75s36.33,57-11.34,106-28.66-20-28.66-20l12-80Z"
transform="translate(-58 -34.75)"
fill="#ff808e"
/>
<path
d="M310.48,365a49.46,49.46,0,0,1,8.31-1.86c13,6.2,20.2,23.41,24.11,41.38a93.06,93.06,0,0,1-13.67,71.26C350.66,418.07,324,379.68,310.48,365Z"
transform="translate(-58 -34.75)"
opacity={0.1}
/>
<path
d="M623.74,444.34c-21.35,1.41-49.24-1.09-49.24-1.09,3.76,17.2-4,30.64-12,39.4a27.26,27.26,0,0,1-24.66,8.63c-46.14-8-116.3,34-116.3,34S371.36,565.81,318.44,592c-3-47.27,3.06-98.72,3.06-98.72.86-1.67,1.67-3.33,2.45-5,21.38-4,99.06-19.8,114.55-43,2.3-3.45,6-6.68,10.6-9.68,13.23-8.56,34.4-15.27,54.53-20.17a217.78,217.78,0,0,1,76.63-4.86,211.39,211.39,0,0,1,32.56,6.35c4.66,1.29,9.16,2.68,13.29,4.13,11.32,4,19.9,8.47,21.39,13.23C649.51,440.68,638.1,443.4,623.74,444.34Z"
transform="translate(-58 -34.75)"
opacity={0.1}
/>
<path
d="M602.36,437.72c-15.39-.26-28.86-1.47-28.86-1.47,3.76,17.2-4,30.64-12,39.4a27.26,27.26,0,0,1-24.66,8.63c-17.39-3-38.2,1.09-57.37,7.34L447.5,471.25l-27.53-19c8-4.29,14.19-9,17.53-14,8.88-13.32,38-23.23,65.13-29.85a216.08,216.08,0,0,1,108.25,1.24l.94.25c17.39,4.85,32.65,10.86,34.68,17.36C649.42,436.6,624,438.1,602.36,437.72Z"
transform="translate(-58 -34.75)"
opacity={0.1}
/>
<path
d="M317.79,358.12s-52.31,5.32-67.56,73.13a70.25,70.25,0,0,1-13.9,28.8c-15.16,18.73-40.23,55.2-38.83,90.21,2,50,2,70,68,56s155-86,155-86,70.16-41.93,116.3-34a27.28,27.28,0,0,0,24.66-8.63c8-8.76,15.81-22.2,12-39.4,0,0,78,7,73-9-2-6.5-17.29-12.51-34.68-17.35a216.23,216.23,0,0,0-109.19-1.5c-27.18,6.63-56.25,16.54-65.13,29.85-18,27-120,44-120,44l3-3.37A93.43,93.43,0,0,0,341.9,399.5C338,381.53,330.83,364.32,317.79,358.12Z"
transform="translate(-58 -34.75)"
fill="#ffbcc8"
/>
<path
d="M304,357.75s-3,121,42,103,10-103,10-103l-20-2Z"
transform="translate(-58 -34.75)"
fill="#ff808e"
/>
<path
d="M438.67,213.88A442.28,442.28,0,0,0,526,195.11c7.3-2.36,15.23-5.5,18.64-12.36.88-1.77,1.54-3.87,3.27-4.84,1.47-.83,3.29-.57,4.94-.19,9.75,2.31,18.12,8.42,27.41,12.17s21.12,4.63,28.26-2.41c8.43-8.32,5.64-22.62.09-33.07C588,115.53,539.72,97.78,495.8,101c-6.17.45-12.44,1.28-18,4-11.76,5.65-18.2,18.22-24.57,29.61C440.84,156.7,375.33,220.89,438.67,213.88Z"
transform="translate(-58 -34.75)"
opacity={0.1}
/>
<path
d="M438.67,210.88A442.28,442.28,0,0,0,526,192.11c7.3-2.36,15.23-5.5,18.64-12.36.88-1.77,1.54-3.87,3.27-4.84,1.47-.83,3.29-.57,4.94-.19,9.75,2.31,18.12,8.42,27.41,12.17s21.12,4.63,28.26-2.41c8.43-8.32,5.64-22.62.09-33.07C588,112.53,539.72,94.78,495.8,98c-6.17.45-12.44,1.28-18,4-11.76,5.65-18.2,18.22-24.57,29.61C440.84,153.7,375.33,217.89,438.67,210.88Z"
transform="translate(-58 -34.75)"
fill="#40243e"
/>
<path
d="M1083.24,316.75h-203a9.25,9.25,0,0,0-9.25,9.25V445a9.25,9.25,0,0,0,9.25,9.25h203a9.25,9.25,0,0,0,9.25-9.25V326A9.25,9.25,0,0,0,1083.24,316.75Z"
transform="translate(-58 -34.75)"
fill="url(#21e38948-19ad-47ba-be29-9a74b5c58390)"
/>
<rect
x={815.56}
y={283.62}
width={216.33}
height={134.27}
rx={11.91}
ry={11.91}
fill={props.primaryColor}
/>
<rect x={815.56} y={307.12} width={216.33} height={24.62} fill={props.primaryColor} />
<rect x={815.56} y={307.12} width={216.33} height={24.62} opacity={0.3} />
<rect x={836.07} y={350.01} width={175.3} height={11.94} fill="#d6d6e3" />
<circle cx={850.62} cy={391.78} r={17.16} fill={props.primaryColor} />
<circle cx={850.62} cy={391.78} r={17.16} opacity={0.3} />
<path
d="M311,484.75s-19,10.09-22.15,22.42S282,521.75,282,521.75"
transform="translate(-58 -34.75)"
opacity={0.05}
/>
<path
d="M777,610.75s-9,31,0,35"
transform="translate(-58 -34.75)"
opacity={0.05}
/>
<path
d="M328,645.75s78,17,136-18h25s75,38,111,27"
transform="translate(-58 -34.75)"
opacity={0.05}
/>
<rect
x={888.96}
y={580.8}
width={37.81}
height={73.68}
transform="translate(-79.34 1167.92) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={907.67}
cy={618.08}
rx={7.76}
ry={15.51}
transform="translate(-79.87 1168.01) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={907.67}
cy={618.08}
rx={7.76}
ry={15.51}
transform="translate(-79.87 1168.01) rotate(-66.42)"
opacity={0.1}
/>
<rect
x={987.98}
y={457.34}
width={37.81}
height={73.68}
transform="translate(93.23 1184.6) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={1006.69}
cy={494.62}
rx={7.76}
ry={15.51}
transform="translate(92.7 1184.69) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={1006.69}
cy={494.62}
rx={7.76}
ry={15.51}
transform="translate(92.7 1184.69) rotate(-66.42)"
opacity={0.1}
/>
<rect
x={1070.29}
y={590.58}
width={37.81}
height={73.68}
transform="translate(-158.33 186.42) rotate(-11.09)"
fill="#8ed16f"
/>
<ellipse
cx={1088.72}
cy={627.51}
rx={7.76}
ry={15.51}
transform="translate(-158.35 186.33) rotate(-11.09)"
fill="#8ed16f"
/>
<ellipse
cx={1088.72}
cy={627.51}
rx={7.76}
ry={15.51}
transform="translate(-158.35 186.33) rotate(-11.09)"
opacity={0.1}
/>
<rect
x={974.46}
y={750.41}
width={37.81}
height={73.68}
transform="translate(-183.5 1348.06) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={993.17}
cy={787.7}
rx={7.76}
ry={15.51}
transform="translate(-184.02 1348.15) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={993.17}
cy={787.7}
rx={7.76}
ry={15.51}
transform="translate(-184.02 1348.15) rotate(-66.42)"
opacity={0.1}
/>
<rect
x={807.61}
y={717.67}
width={37.81}
height={73.68}
transform="translate(-253.6 1175.49) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={826.32}
cy={754.96}
rx={7.76}
ry={15.51}
transform="translate(-254.13 1175.58) rotate(-66.42)"
fill="#8ed16f"
/>
<ellipse
cx={826.32}
cy={754.96}
rx={7.76}
ry={15.51}
transform="translate(-254.13 1175.58) rotate(-66.42)"
opacity={0.1}
/>
</svg>
);
UndrawCreditCardPayments.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawCreditCardPayments.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawCreditCardPayments;