react-undraw-illustrations/src/node_modules/components/UndrawNotes/UndrawNotes.js

unDraw: MIT licensed illustrations for every project you can imagine and create...for React!

import React from "react";
import PropTypes from "prop-types";

const UndrawNotes = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="ef4d1e10-640d-406d-ab29-0014e28ba91d"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 910.74 527.39"
  >
    <defs>
      <linearGradient
        id="5b26331d-1310-4294-a782-4ee218ce8a93"
        x1={209.98}
        y1={290.83}
        x2={209.98}
        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="1766677a-11bf-41c4-a6a5-863d2cac0045"
        x1={356.48}
        y1={409.11}
        x2={356.48}
        y2={118.28}
        xlinkHref="#5b26331d-1310-4294-a782-4ee218ce8a93"
      />
      <linearGradient
        id="aae5fb14-dd79-43d0-b7e4-6e2579fdfd08"
        x1={502.98}
        y1={527.39}
        x2={502.98}
        y2={236.57}
        xlinkHref="#5b26331d-1310-4294-a782-4ee218ce8a93"
      />
      <linearGradient
        id="66874382-e7df-403e-944e-b16abddffc78"
        x1={912.16}
        y1={688.94}
        x2={912.16}
        y2={281.8}
        xlinkHref="#5b26331d-1310-4294-a782-4ee218ce8a93"
      />
    </defs>
    <title>notes1</title>
    <g opacity={0.5}>
      <rect
        width={419.96}
        height={290.83}
        fill="url(#5b26331d-1310-4294-a782-4ee218ce8a93)"
      />
    </g>
    <rect x={4.34} y={4.34} width={412.36} height={283.23} fill="#f7f7f7" />
    <g opacity={0.5}>
      <circle cx={71.35} cy={100.38} r={7.6} fill={props.primaryColor} />
      <circle cx={71.35} cy={145.96} r={7.6} fill={props.primaryColor} />
      <circle cx={71.35} cy={191.53} r={7.6} fill={props.primaryColor} />
    </g>
    <rect x={127.24} y={96.04} width={230.06} height={8.68} fill="#e0e0e0" />
    <rect x={127.24} y={141.61} width={230.06} height={8.68} fill="#e0e0e0" />
    <rect x={127.24} y={187.19} width={230.06} height={8.68} fill="#e0e0e0" />
    <g opacity={0.5}>
      <rect
        x={146.5}
        y={118.28}
        width={419.96}
        height={290.83}
        fill="url(#1766677a-11bf-41c4-a6a5-863d2cac0045)"
      />
    </g>
    <rect x={150.84} y={122.62} width={412.36} height={283.23} fill="#f7f7f7" />
    <g opacity={0.5}>
      <circle cx={217.85} cy={218.66} r={7.6} fill={props.primaryColor} />
      <circle cx={217.85} cy={264.24} r={7.6} fill={props.primaryColor} />
      <circle cx={217.85} cy={309.82} r={7.6} fill={props.primaryColor} />
    </g>
    <rect x={273.73} y={214.32} width={230.06} height={8.68} fill="#e0e0e0" />
    <rect x={273.73} y={259.9} width={230.06} height={8.68} fill="#e0e0e0" />
    <rect x={273.73} y={305.47} width={230.06} height={8.68} fill="#e0e0e0" />
    <g opacity={0.5}>
      <rect
        x={293}
        y={236.57}
        width={419.96}
        height={290.83}
        fill="url(#aae5fb14-dd79-43d0-b7e4-6e2579fdfd08)"
      />
    </g>
    <rect x={297.34} y={240.91} width={412.36} height={283.23} fill="#eee" />
    <circle cx={364.35} cy={336.94} r={7.6} fill={props.primaryColor} />
    <circle cx={364.35} cy={382.52} r={7.6} fill={props.primaryColor} />
    <circle cx={364.35} cy={428.1} r={7.6} fill={props.primaryColor} />
    <rect x={420.23} y={332.6} width={230.06} height={8.68} fill="#dfdfdf" />
    <rect x={420.23} y={378.18} width={230.06} height={8.68} fill="#dfdfdf" />
    <rect x={420.23} y={423.76} width={230.06} height={8.68} fill="#dfdfdf" />
    <g opacity={0.5}>
      <path
        d="M1046.74,419c-3-.19-6.09-2.26-6.39-5.24-.36-3.56,3-6.17,5.13-9.08,3.72-5.18,3.27-12.63-.09-18s-9.18-9-15.29-10.8c-5.07-1.51-11-2.35-14-6.77-4.74-7.18,2.59-16.19,3.22-24.77.6-8.17-6.16-16.18-14.32-17-4.72-.45-10.26,1-13.68-2.3a9.28,9.28,0,0,1-2.1-3.4c-2.2-5.71-1.17-12.07-.89-18.18s-.56-13-5.27-16.89c-2.72-2.27-6.32-3.16-9.81-3.73-10.59-1.73-21.44-1.14-32.06.42-14.79,2.17-30.21,6.77-40,18.06s-11.07,30.89.75,40c-1-.8-.56-2.57.87-4.69,0,.2,0,.39,0,.59a30,30,0,0,0,19.69,28.2v2.11a20.58,20.58,0,0,0-6.08,2.57C896.28,375.07,856,399.89,856,399.89l-59.15,10s-29,4.46-27.9,8.93,27.9,1.12,27.9,1.12h59.81a32.26,32.26,0,0,0,15.52-4l32.7-18c-.16,2.6-.24,5.28-.26,8-5.17,3.7-10.23,11.78.4,28.42l.08-.46c0,.15,0,.31,0,.46l-11.89,54.82c-3.62,2.68-6.1,5.15-5.24,6.47.5.76,1.84.9,3.67.65l-16.46,76L921.3,628l7.7,44.1-7.25,6.95-26.9,5a2.44,2.44,0,0,0,.45,4.84h58.94V677.78h.54l-1-13.34,18.63-12.18-6.11-9.34-.87.57L950.55,622.7,948,589.94,975.2,491.4h0v-.11h0l-6.68-27.49,11.71-5.94A17.17,17.17,0,0,0,988.7,437c-1.79-5.19-4-11.31-6.58-17.53a50,50,0,0,0,13.24,9.47c19.38,9.11,42.62.43,60-12.07C1052.61,418,1049.73,419.2,1046.74,419Zm-83.48,23.13-4.15-17.06,5.64,14.42C964,440.8,963.44,441.78,963.25,442.14Zm-23.16-74.44v-1.28a29.9,29.9,0,0,0,10.68-5,42.77,42.77,0,0,0,1.29,13.36C949.44,371.36,945.64,369,940.09,367.71ZM908.78,564.27l23.84-68.93L918,577.17Z"
        transform="translate(-144.63 -186.3)"
        fill="url(#66874382-e7df-403e-944e-b16abddffc78)"
      />
    </g>
    <path
      d="M964.78,638.57l-20.89,13.66-24.08,23.09a2.37,2.37,0,0,0-.34,3h0a2.37,2.37,0,0,0,3.28.69l48-31.36Z"
      transform="translate(-144.63 -186.3)"
      fill="#333"
    />
    <path
      d="M921.61,391.4l-48.29,26.51a31.36,31.36,0,0,1-15.09,3.87H800.07V412l57.51-9.77S922.7,362.1,927,375.12,921.61,391.4,921.61,391.4Z"
      transform="translate(-144.63 -186.3)"
      fill={props.primaryColor}
    />
    <path
      d="M973.48,491.24H893.33l12-55.34c0-30.12-6-65.89,24.13-65.89h0c30.12,0,26.87,20.58,26.87,50.69Z"
      transform="translate(-144.63 -186.3)"
      fill={props.primaryColor}
    />
    <path
      d="M777.61,162.68h17.08a0,0,0,0,1,0,0v23.67a7.87,7.87,0,0,1-7.87,7.87h-1.34a7.87,7.87,0,0,1-7.87-7.87V162.68A0,0,0,0,1,777.61,162.68Z"
      fill="#fda57d"
    />
    <polygon
      points="748.7 304.82 731.62 383.66 801.26 467.76 819.65 453.31 764.24 375.78 788.78 304.82 748.7 304.82"
      fill="#e0e0e0"
    />
    <polygon
      points="748.7 304.82 731.62 383.66 801.26 467.76 819.65 453.31 764.24 375.78 788.78 304.82 748.7 304.82"
      opacity={0.04}
    />
    <polygon
      points="788.12 304.82 770.47 403.68 784.86 486.15 808.97 486.15 802.4 400.75 828.85 304.82 788.12 304.82"
      fill="#e0e0e0"
    />
    <path
      d="M915.1,405.51"
      transform="translate(-144.63 -186.3)"
      fill={props.primaryColor}
    />
    <path
      d="M961.76,443.49l-53.17,38,4.34,7.6,62.16-31.53a16.69,16.69,0,0,0,8.24-20.32C975.92,415.74,961.76,443.49,961.76,443.49Z"
      transform="translate(-144.63 -186.3)"
      opacity={0.05}
    />
    <path
      d="M947.46,399.72,965,444.57,910.76,476l5.43,14.11,62.16-31.53a16.69,16.69,0,0,0,8.24-20.32c-7.41-21.47-22.72-59.41-35.71-50.49A10,10,0,0,0,947.46,399.72Z"
      transform="translate(-144.63 -186.3)"
      opacity={0.05}
    />
    <path
      d="M946.38,397.55l17.55,44.86-53.17,35.81L914,488l63.24-31.53a16.69,16.69,0,0,0,8.24-20.32c-7.41-21.47-22.72-59.41-35.71-50.49A10,10,0,0,0,946.38,397.55Z"
      transform="translate(-144.63 -186.3)"
      fill={props.primaryColor}
    />
    <path
      d="M953.08,672.46h-25l-32.79,6.15a2.37,2.37,0,0,0-1.93,2.33h0a2.37,2.37,0,0,0,2.37,2.37h57.31Z"
      transform="translate(-144.63 -186.3)"
      fill="#333"
    />
    <path
      d="M948.74,400.08s13,17.36,10.85,30.38"
      transform="translate(-144.63 -186.3)"
      opacity={0.05}
    />
    <path
      d="M922.24,371a29.29,29.29,0,0,0,17.08.92V351.15H922.24Z"
      transform="translate(-144.63 -186.3)"
      opacity={0.05}
    />
    <circle cx={787.66} cy={155.08} r={29.2} fill="#fda57d" />
    <path
      d="M800.07,412s-28.21,4.34-27.13,8.68,27.13,1.09,27.13,1.09Z"
      transform="translate(-144.63 -186.3)"
      fill="#fda57d"
    />
    <path
      d="M911.48,478.42s-25.25,13.32-22.8,17.07,26-7.84,26-7.84Z"
      transform="translate(-144.63 -186.3)"
      fill="#fda57d"
    />
    <path
      d="M910.76,405.51s-21.87,4.78-5.51,30.38"
      transform="translate(-144.63 -186.3)"
      fill={props.primaryColor}
    />
    <path
      d="M936.8,407.68s-21.87,4.78-5.51,30.38"
      transform="translate(-144.63 -186.3)"
      opacity={0.05}
    />
    <path
      d="M937.89,407.68s-21.87,4.78-5.51,30.38"
      transform="translate(-144.63 -186.3)"
      fill={props.primaryColor}
    />
    <path
      d="M954,350.75c-5.77,9.35-5.42,21.49-1.6,31.79s10.73,19.12,17.73,27.59c6.56,7.94,13.59,15.95,22.91,20.33,18.85,8.86,41.44.42,58.35-11.73-2.68,1.14-5.49,2.31-8.39,2.12s-5.92-2.2-6.22-5.09c-.35-3.46,3-6,5-8.83,3.62-5,3.18-12.28-.08-17.55s-8.92-8.72-14.87-10.5c-4.93-1.47-10.73-2.29-13.57-6.58-4.6-7,2.52-15.74,3.13-24.08.59-7.94-6-15.73-13.92-16.49-4.59-.44-10,1-13.3-2.24a9,9,0,0,1-2-3.31c-2.14-5.55-1.14-11.74-.87-17.68s-.55-12.62-5.12-16.42c-2.65-2.2-6.14-3.07-9.54-3.62-10.3-1.68-20.85-1.11-31.17.41-14.39,2.11-29.37,6.58-38.9,17.56s-10.77,30,.73,38.94c-4.07-3.15,15.77-21.7,25.09-16C938,335.81,938.22,351.37,954,350.75Z"
      transform="translate(-144.63 -186.3)"
      fill="#333"
    />
  </svg>
);

UndrawNotes.propTypes = {
  /**
   * Hex color
   */
  primaryColor: PropTypes.string,
  /**
   * percentage
   */
  height: PropTypes.string,
  /**
   * custom class for svg
   */
  class: PropTypes.string
};

UndrawNotes.defaultProps = {
  primaryColor: "#6c68fb",
  height: "250px",
  class: ""
};

export default UndrawNotes;