react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
266 lines (261 loc) • 6.9 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawContrast = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="c9ac9d6c-7cdc-4c94-8232-f936da68e97d"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 912.5 703.5"
>
<defs>
<linearGradient
id="a1217de1-da1b-4bbe-8b6b-df359b856d80"
x1={424.5}
y1={675}
x2={424.5}
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="50b3c8bc-dd0e-4375-8727-34e41ad39fa8"
x1={191.5}
y1={281}
x2={191.5}
y2={256}
xlinkHref="#a1217de1-da1b-4bbe-8b6b-df359b856d80"
/>
<linearGradient
id="dfaf505b-dd53-4c52-bb27-3f20233ae8bb"
x1={627.5}
y1={281}
x2={627.5}
y2={256}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="99ed4748-145a-4422-a012-b3270fb87fdc"
x1={198}
y1={328}
x2={198}
y2={312}
xlinkHref="#a1217de1-da1b-4bbe-8b6b-df359b856d80"
/>
<linearGradient
id="69284a17-3a7e-4461-bc9d-ec72dd0f9019"
x1={634}
y1={328}
x2={634}
y2={312}
xlinkHref="#dfaf505b-dd53-4c52-bb27-3f20233ae8bb"
/>
<linearGradient
id="d24cd686-1bb3-48c3-bb03-45084e2445d7"
x1={634}
y1={353}
x2={634}
y2={337}
xlinkHref="#dfaf505b-dd53-4c52-bb27-3f20233ae8bb"
/>
<linearGradient
id="0a34c182-11cb-46d2-9bee-306516ed3b5b"
x1={634}
y1={378}
x2={634}
y2={362}
xlinkHref="#dfaf505b-dd53-4c52-bb27-3f20233ae8bb"
/>
<linearGradient
id="34f95aaf-f4ca-4e12-941d-7adca9e033d3"
x1={634}
y1={403}
x2={634}
y2={387}
xlinkHref="#dfaf505b-dd53-4c52-bb27-3f20233ae8bb"
/>
<linearGradient
id="17dbb2a6-67e8-413e-95fb-50e0c7aab595"
x1={634}
y1={428}
x2={634}
y2={412}
xlinkHref="#dfaf505b-dd53-4c52-bb27-3f20233ae8bb"
/>
<linearGradient
id="50b6b42e-ba1d-4234-9b3e-ec3a0df448c2"
x1={198}
y1={353}
x2={198}
y2={337}
xlinkHref="#a1217de1-da1b-4bbe-8b6b-df359b856d80"
/>
<linearGradient
id="a1fc3972-393a-4ce3-8d80-f122a3c0b7bb"
x1={198}
y1={378}
x2={198}
y2={362}
xlinkHref="#a1217de1-da1b-4bbe-8b6b-df359b856d80"
/>
<linearGradient
id="194d01da-8667-4b3e-85ff-e74ede087b08"
x1={198}
y1={403}
x2={198}
y2={387}
xlinkHref="#a1217de1-da1b-4bbe-8b6b-df359b856d80"
/>
<linearGradient
id="4ae13924-7169-46dd-a41b-c9ba3b889a05"
x1={198}
y1={428}
x2={198}
y2={412}
xlinkHref="#a1217de1-da1b-4bbe-8b6b-df359b856d80"
/>
</defs>
<title>contrast</title>
<rect
x={66.5}
y={79.5}
width={846}
height={624}
fill={props.primaryColor}
opacity={0.2}
/>
<polygon
points="0 0 0 34.06 0 675 849 675 849 34.06 849 0 0 0"
fill="url(#a1217de1-da1b-4bbe-8b6b-df359b856d80)"
/>
<rect x={12} y={42} width={828} height={621} fill="#fff" />
<rect x={12} y={9} width={828} height={33} fill="#f5f5f5" />
<circle cx={36} cy={25} r={8} fill="#ff5252" />
<circle cx={58} cy={25} r={8} fill="#ff0" />
<circle cx={80} cy={25} r={8} fill="#69f0ae" />
<rect x={426} y={42} width={414} height={621} fill={props.primaryColor} />
<rect
x={78}
y={256}
width={227}
height={25}
fill="url(#50b3c8bc-dd0e-4375-8727-34e41ad39fa8)"
/>
<rect
x={514}
y={256}
width={227}
height={25}
fill="url(#dfaf505b-dd53-4c52-bb27-3f20233ae8bb)"
/>
<rect x={82} y={259} width={220} height={18} fill={props.primaryColor} />
<rect
x={47}
y={312}
width={302}
height={16}
fill="url(#99ed4748-145a-4422-a012-b3270fb87fdc)"
/>
<rect
x={483}
y={312}
width={302}
height={16}
fill="url(#69284a17-3a7e-4461-bc9d-ec72dd0f9019)"
/>
<rect
x={483}
y={337}
width={302}
height={16}
fill="url(#d24cd686-1bb3-48c3-bb03-45084e2445d7)"
/>
<rect
x={483}
y={362}
width={302}
height={16}
fill="url(#0a34c182-11cb-46d2-9bee-306516ed3b5b)"
/>
<rect
x={483}
y={387}
width={302}
height={16}
fill="url(#34f95aaf-f4ca-4e12-941d-7adca9e033d3)"
/>
<rect
x={483}
y={412}
width={302}
height={16}
fill="url(#17dbb2a6-67e8-413e-95fb-50e0c7aab595)"
/>
<rect
x={47}
y={337}
width={302}
height={16}
fill="url(#50b6b42e-ba1d-4234-9b3e-ec3a0df448c2)"
/>
<rect
x={47}
y={362}
width={302}
height={16}
fill="url(#a1fc3972-393a-4ce3-8d80-f122a3c0b7bb)"
/>
<rect
x={47}
y={387}
width={302}
height={16}
fill="url(#194d01da-8667-4b3e-85ff-e74ede087b08)"
/>
<rect
x={47}
y={412}
width={302}
height={16}
fill="url(#4ae13924-7169-46dd-a41b-c9ba3b889a05)"
/>
<rect x={50} y={314} width={297} height={11} fill={props.primaryColor} />
<rect x={50} y={339} width={297} height={11} fill={props.primaryColor} />
<rect x={50} y={364} width={297} height={11} fill={props.primaryColor} />
<rect x={50} y={389} width={297} height={11} fill={props.primaryColor} />
<rect x={50} y={414} width={297} height={11} fill={props.primaryColor} />
<rect x={517} y={259} width={220} height={18} fill="#fff" />
<rect x={485} y={314} width={297} height={11} fill="#fff" />
<rect x={485} y={339} width={297} height={11} fill="#fff" />
<rect x={485} y={364} width={297} height={11} fill="#fff" />
<rect x={485} y={389} width={297} height={11} fill="#fff" />
<rect x={485} y={414} width={297} height={11} fill="#fff" />
</svg>
);
UndrawContrast.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawContrast.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawContrast;