react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
243 lines (238 loc) • 12.5 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawReadingList = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="5e1838a0-6e06-4e3f-aa75-de6d8e6cdfa0"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1007.04 858"
>
<defs>
<linearGradient
id="cc082665-c41a-43d9-8451-73726d32e49c"
x1={569.66}
y1={824.63}
x2={569.66}
y2={70.6}
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>
</defs>
<title>reading list</title>
<g opacity={0.1}>
<path
d="M693.73,37.32c-9.33,7.66-13.5,19.8-17.14,31.31q-12.24,38.74-22.89,78C643.35,184.65,633.95,223.51,615,258.1s-46.56,63.26-73.87,91.59l-98.38,102c-30.4,31.53-62.83,67.92-62.25,111.72.5,38,27.06,71.71,59.56,91.33s70.48,27.65,107.65,35.37c18.87,3.92,38.9,7.77,57,1.25,21.74-7.82,35.91-28.77,55.78-40.56,35.65-21.17,80.82-9.26,120.76,1.84s87,19.52,119.39-6.34c47-37.53,26.74-113.14,47.73-169.5,19.92-53.49,75-84.25,111.15-128.41,80.76-98.63,45.45-235.63-66-290.93C957,39.39,921,40.32,881.39,37.47,832,33.93,736.3,2.35,693.73,37.32Z"
transform="translate(-96.48 -21)"
fill={props.primaryColor}
/>
</g>
<g opacity={0.5}>
<path
d="M389.41,607.83s-165.2-83.6-94.6-270.33S109.8,86,109.8,86s-50.07,181.82,44,302.9S284.16,711,389.41,607.83Z"
transform="translate(-96.48 -21)"
fill={props.primaryColor}
/>
<path
d="M109.8,86s69.7,120.77,104.87,277.87,92.43,286.74,173.89,241"
transform="translate(-96.48 -21)"
fill="none"
stroke="#fff"
strokeMiterlimit={10}
/>
</g>
<g opacity={0.5}>
<path
d="M353.92,638.37s-66.06-94.83,21.58-186.24-31.83-199.82-31.83-199.82S268.32,346.43,286.31,444,270.07,670.7,353.92,638.37Z"
transform="translate(-96.48 -21)"
fill={props.primaryColor}
/>
<path
d="M343.68,252.31s5,90.72-18.1,193.52-27.13,195.38,28.67,190.57"
transform="translate(-96.48 -21)"
fill="none"
stroke="#fff"
strokeMiterlimit={10}
/>
</g>
<g opacity={0.1}>
<path
d="M159.19,787.86c1.16,7.13,5.29,12.56,9.21,17.54l46.65,59.14c3.75,4.76,7.78,9.71,12.82,11,10.53,2.79,19-10.73,28-18.64,32-28.12,75.73,14.69,111.9-1.68,14.47-6.55,26.19-22.11,40.94-27.38,39.05-14,72.14,47.85,112.46,51,13.24,1,26.23-4.44,38.88-9.85l84.38-36.12c5.86-2.51,11.82-5,18-5.15,10.38-.18,20.05,6.5,29.82,11.31,39.33,19.38,83,8.92,123.4-5.76s81.09-33.57,122.85-30.44c10.87.82,25.23.13,28.2-14.13,1.77-8.48-22.12.41-27.65-4.16s7.63-23.64,1.18-24.45c-37.53-4.7-75.77-4.83-112.45,7-19,6.12-37.69,15.44-57.2,17.35-20.34,2-40.57-4.16-60.54-9.76-50.57-14.18-102-25-153.63-22.8-91.76,4-182.14,49.26-273.44,36.14a232.69,232.69,0,0,1-77.4-25.92c-12.32-6.65-11.77,16.9-24.34,24.83-4.09,2.58-14.8-21.48-18-16.85A23.52,23.52,0,0,0,159.19,787.86Z"
transform="translate(-96.48 -21)"
fill={props.primaryColor}
/>
</g>
<path
d="M946.12,673.83l-145.85-191c-11.39-53.62-28.49-53.62-28.49-53.62-116.22-15.64-148.12-35.75-148.12-35.75l-26-10.18L595.49,382c-.1-.57-.21-1.14-.31-1.73s-.2-1.37-.28-2.06a125.45,125.45,0,0,0,57-76.8c.21-.84.4-1.7.6-2.55a32.84,32.84,0,0,0,13.59-12.11c11.17-18.31.56-41.49.8-62.82.15-13.48,4.8-26.69,4.27-40.16-.44-11.28-4.48-22.11-8.89-32.53-2.14-5.07-4.5-10.25-8.6-14-10.87-9.87-28.47-5.64-42.43-10.5-18.06-6.29-26.47-25.89-36.91-41.65-4-6.08-11.28-12.5-17.85-9.17-7.71,3.9-5.62,17.25-13.41,21-4.72,2.27-10.49-.59-13.86-4.55s-5.3-8.93-8.62-12.93A25.34,25.34,0,0,0,496,71.2a8.53,8.53,0,0,0-4.67,2.39c-2.49,2.9-.93,7.22-.76,11,.59,12.73-15,19.8-27.88,21.15s-28.06,1.51-35.77,11.76c-4.08,5.43-4.95,12.5-7.7,18.68-6.38,14.33-21.81,22.18-35.37,30.41s-27.52,20.23-27.4,35.87c.12,15,13.36,27.15,15.69,42,1.24,7.87-.69,16,.85,23.83,2.83,14.36,16.25,24,28.63,32.15.84.55,1.69,1.1,2.56,1.62.22.88.44,1.75.68,2.62a125.91,125.91,0,0,0,64.36,78c.2.84.39,1.69.58,2.56.59,2.68,1.14,5.47,1.63,8.33l-.38.1,0-.28L327,430.12a6.24,6.24,0,0,0-2.71-.34c-5.9-.48-24.35,5.88-45.88,92.13L186.13,685s-53.55,51.39-12.53,95c20.91,22.21,44.49,27.58,62.58,27.51A86.36,86.36,0,0,0,267,802.29s-.74-1.14-1.88-3.16l12.2,1.49c24,26.68,64.88,17.31,64.88,17.31s58.15-.66,60.29-31.07L507,818.92l.42,5.71h54.88l-.09-3.64,115.46-34.78c9,16.64,31,24.87,31,24.87s67.76,2.85,89.06-9.49a95.17,95.17,0,0,1,28.86-11.11l.59-.06-.14.14,130.46-14C1016.76,725.21,946.12,673.83,946.12,673.83ZM289.45,719.25l-2.87-1.66a106.09,106.09,0,0,1,15.77-4.66l25.38-31.33,4.39,30.9A57.72,57.72,0,0,0,289.45,719.25ZM780.32,719a53.22,53.22,0,0,0-32.85-10.75l1-76.06C758,638.28,766,645,768.37,651.48c6.84,19,39.88,49.15,39.88,49.15l-17.16,14.1h0l-2.67,2.19c-.72.17-1.44.34-2.16.53Z"
transform="translate(-96.48 -21)"
fill="url(#cc082665-c41a-43d9-8451-73726d32e49c)"
/>
<polygon
points="166.28 782 192.91 785.33 208.44 708.77 178.48 691.01 139.65 733.18 166.28 782"
fill="#efb7b9"
/>
<polygon
points="166.28 782 192.91 785.33 208.44 708.77 178.48 691.01 139.65 733.18 166.28 782"
opacity={0.03}
/>
<path
d="M620,426.86l-64.35,57.7s-124.27,27.74-93.2-11.1c17.6-22,15.26-55.39,9.92-80.21a208.09,208.09,0,0,0-9.92-33S622.25,263.76,600.06,337c-6.58,21.72-7.5,38.47-5.55,51.27C599.17,418.63,620,426.86,620,426.86Z"
transform="translate(-96.48 -21)"
fill="#efb7b9"
/>
<path
d="M600.06,337c-6.58,21.72-7.5,38.47-5.55,51.27a124.41,124.41,0,0,1-122.12,5,208.09,208.09,0,0,0-9.92-33S622.25,263.76,600.06,337Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M653.32,280.4A124.27,124.27,0,1,1,529,156.13,123.91,123.91,0,0,1,653.32,280.4Z"
transform="translate(-96.48 -21)"
fill="#efb7b9"
/>
<polygon
points="347.13 420.29 347.13 647.74 565.71 629.99 529.1 398.1 432.57 455.79 347.13 420.29"
fill="#e1e7ef"
/>
<path
d="M562.33,581.09,538,512.3H539c25.52-27.74,14.42-44.38,14.42-44.38H518c-22.55,16-6.9,36.73-1.59,42.7l-10.62,70.47Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M562.33,578.87,538,510.08H539c25.52-27.74,14.42-44.38,14.42-44.38H518c-22.55,16-6.9,36.73-1.59,42.7l-10.62,70.47Z"
transform="translate(-96.48 -21)"
fill="#444053"
/>
<path
d="M594.81,392.2s-7,32.44-55.77,75.71c0,0,15,5,17.2,44.94l18.31,25s14.42-52.15,39.94-69.9,0-64.35,0-64.35Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M594.81,390s-7,32.44-55.77,75.71c0,0,15,5,17.2,44.94l18.31,25s14.42-52.15,39.94-69.9,0-64.35,0-64.35Z"
transform="translate(-96.48 -21)"
fill="#e1e7ef"
/>
<path
d="M529,467.91S508,484.56,506.86,511.19s-12.2,26.63-12.2,26.63-27.74-85.43-36.61-93.2,16-40.54,16-40.54S488,450.16,529,467.91Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M529,465.7S508,482.34,506.86,509s-12.2,26.63-12.2,26.63S466.91,450.16,458,442.4s16-40.54,16-40.54S488,447.94,529,465.7Z"
transform="translate(-96.48 -21)"
fill="#e1e7ef"
/>
<path
d="M593.4,390.25l27.74,11.1s31.07,20,144.24,35.51c0,0,16.64,0,27.74,53.26l142,189.73s68.79,51,11.1,102.08l-127,13.87s73.23-69.9-37.72-72.12L802,706.47s-32.18-30-38.83-48.82-61-39.94-61-39.94l6.66,159.77L608.93,793l-14.4-297.3a197.44,197.44,0,0,1,2.4-41.93C600.69,431.22,604.66,395.5,593.4,390.25Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M594.51,390.25l27.74,11.1s31.07,20,144.24,35.51c0,0,16.64,0,27.74,53.26l142,189.73s68.79,51,11.1,102.08l-127,13.87s73.23-69.9-37.72-72.12l20.53-17.2s-32.18-30-38.83-48.82-61-39.94-61-39.94l6.66,159.77L610,793l-14.4-297.3a197.44,197.44,0,0,1,2.4-41.93C601.8,431.22,605.77,395.5,594.51,390.25Z"
transform="translate(-96.48 -21)"
fill="#67647e"
/>
<path
d="M474.68,401.34,333.77,438s-21.08-13.31-46.6,91l-89.87,162s-52.15,51-12.2,94.31S275,807.43,275,807.43s-45.49-71,34.4-88.76l30-37.72,135.36,15.53L471.35,501.2l3.79-22.76a226,226,0,0,0,0-74.31Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M473.57,401.34,332.66,438s-21.08-13.31-46.6,91l-89.87,162S144,742,184,785.24s89.87,22.19,89.87,22.19-45.49-71,34.4-88.76l30-37.72,135.36,15.53L470.24,501.2,474,478.44a226,226,0,0,0,0-74.31Z"
transform="translate(-96.48 -21)"
fill="#67647e"
/>
<polygon
points="238.4 489.08 225.08 499.06 425.91 550.1 425.91 530.13 238.4 489.08"
fill="#e4e6ed"
/>
<polygon
points="626.74 485.75 640.05 495.74 425.91 550.1 425.91 530.13 626.74 485.75"
fill="#e4e6ed"
/>
<polygon
points="212.88 489.08 399.28 532.35 412.59 803.08 249.49 752.04 212.88 489.08"
fill={props.primaryColor}
/>
<polygon
points="648.93 489.08 450.32 534.57 461.41 806.41 645.6 749.82 648.93 489.08"
fill={props.primaryColor}
/>
<path
d="M489.1,553.35s32.54,20,66.75,0l6.66,276.28H509.08Z"
transform="translate(-96.48 -21)"
fill={props.primaryColor}
/>
<path
d="M489.1,553.35s32.54,20,66.75,0l6.66,276.28H509.08Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M339.32,506.75v7.77l183.07,36.61S429.19,516.73,339.32,506.75Z"
transform="translate(-96.48 -21)"
fill="#d8d9e5"
/>
<path
d="M719.89,502.31v7.77l-197.5,41.05S630,512.3,719.89,502.31Z"
transform="translate(-96.48 -21)"
fill="#d8d9e5"
/>
<path
d="M780.58,723.18l-5.79,1.56s-37.71-33-85.78,17,16,74.47,16,74.47,66,2.83,86.73-9.43a91.23,91.23,0,0,1,28.89-11.19,29.52,29.52,0,0,0,16.18-9.13h0a38.61,38.61,0,0,0,9.66-31.84h0A38.61,38.61,0,0,0,818.07,723h0A73.16,73.16,0,0,0,780.58,723.18Z"
transform="translate(-96.48 -21)"
fill="#efb7b9"
/>
<path
d="M291.61,728.66s44.38-39.94,98.75,26.63S348.19,823,348.19,823,296,835.17,276.07,791.9,291.61,728.66,291.61,728.66Z"
transform="translate(-96.48 -21)"
fill="#efb7b9"
/>
<path
d="M785.28,720.47s51.59,15.06,40.53,74.59l31.18-3.4,6.58-30.27-13.31-42.16-25.52-10Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M786.39,720.47s51.59,15.06,40.53,74.59l31.18-3.4,6.58-30.27-13.31-42.16-25.52-10Z"
transform="translate(-96.48 -21)"
fill="#67647e"
/>
<path
d="M653.32,280.4a123.91,123.91,0,0,1-3.54,29.52,43.16,43.16,0,0,1-25.06,3.68c-14.7-2.25-27.68-11-38.43-21.27s-19.77-22.22-30.14-32.9c-9.4-9.68-21-18.73-34.48-19.12-12.24-.36-23.39,6.48-35.19,9.72-12.36,3.4-37.26-5.88-43.29,4.6-3.54,6.16-2.29,19.71-4.38,27a105.93,105.93,0,0,1-9.53,22.85c-3,5.27-7.41,10.86-13.46,10.81a13.61,13.61,0,0,1-6.64-2.12,124.28,124.28,0,1,1,244.15-32.8Z"
transform="translate(-96.48 -21)"
opacity={0.1}
/>
<path
d="M486.47,247.83c11.81-3.24,23-10.08,35.19-9.72,13.48.39,25.09,9.44,34.48,19.12,10.36,10.67,19.38,22.62,30.14,32.9s23.73,19,38.43,21.27,31.25-3.26,38.88-16c10.87-18.18.55-41.21.78-62.39.15-13.39,4.67-26.51,4.16-39.89-.43-11.2-4.36-22-8.65-32.31-2.09-5-4.38-10.18-8.38-13.89-10.59-9.8-27.72-5.6-41.32-10.43-17.58-6.25-25.78-25.72-35.94-41.37-3.92-6-11-12.41-17.38-9.11-7.51,3.88-5.47,17.14-13.06,20.86-4.6,2.25-10.22-.59-13.5-4.52s-5.17-8.87-8.39-12.84a24.4,24.4,0,0,0-24-8.19,8.25,8.25,0,0,0-4.55,2.37c-2.42,2.88-.91,7.17-.74,10.93.58,12.64-14.57,19.66-27.15,21s-27.33,1.5-34.83,11.69c-4,5.39-4.82,12.41-7.5,18.55-6.22,14.24-21.24,22-34.45,30.21s-26.8,20.1-26.68,35.63c.12,14.93,13,27,15.28,41.73,1.2,7.82-.67,15.9.83,23.67,2.75,14.26,15.82,23.83,27.88,31.93,3,2,6.2,4.09,9.8,4.12,6,.05,10.49-5.54,13.46-10.81a106,106,0,0,0,9.53-22.85c2.09-7.31.84-20.86,4.38-27C449.21,241.95,474.11,251.22,486.47,247.83Z"
transform="translate(-96.48 -21)"
fill="#585268"
/>
</svg>
);
UndrawReadingList.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawReadingList.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawReadingList;