react-undraw-illustrations/src/node_modules/components/UndrawNotebook/UndrawNotebook.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 UndrawNotebook = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="b6fc12fe-ef8e-4547-9b80-cc65bddfbdcc"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 808.12 716.61"
  >
    <defs>
      <linearGradient
        id="ed96248d-4698-486b-a4de-994c4b868212"
        x1={404.06}
        y1={716.61}
        x2={404.06}
        y2={268.61}
        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="19e667c4-6f71-4983-83f3-bdc836fc61a1"
        x1={210.22}
        y1={700.35}
        x2={210.22}
        y2={285.07}
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
      <linearGradient
        id="a9513409-4da2-43cc-9c76-afee4a38ce48"
        x1={428.16}
        y1={792.05}
        x2={428.16}
        y2={376.77}
        gradientTransform="matrix(-1, 0, 0, 1, 1026.06, -91.7)"
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
      <linearGradient
        id="7ac6efeb-e6e1-46af-b5fe-b7efb8ee1379"
        x1={175.09}
        y1={610.02}
        x2={175.09}
        y2={495.85}
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
      <linearGradient
        id="14a2a5b5-64cc-4fe8-b0e6-f15ac830e947"
        x1={662.51}
        y1={626.33}
        x2={662.51}
        y2={594.97}
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
      <linearGradient
        id="e2bd95a9-e695-4a74-8d7c-3533af243856"
        x1={872.5}
        y1={269.91}
        x2={872.5}
        y2={127.91}
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
      <linearGradient
        id="a6752e00-ae16-4d29-b62a-f8206f0a04a1"
        x1={458.97}
        y1={247.52}
        x2={458.97}
        y2={101.87}
        gradientTransform="translate(634.16 -275.97) rotate(90)"
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
      <linearGradient
        id="f9b0df9c-8115-4cd0-ada0-65f11e2c9179"
        x1={359.97}
        y1={267.52}
        x2={359.97}
        y2={121.87}
        gradientTransform="translate(553.22 -173.51) rotate(90)"
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
      <linearGradient
        id="3de726b5-1495-4a3c-a21e-83c396d56dc7"
        x1={395.06}
        y1={492.11}
        x2={413.06}
        y2={492.11}
        gradientUnits="userSpaceOnUse"
      >
        <stop offset={0} stopColor="#fff" stopOpacity={0.12} />
        <stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
        <stop offset={1} stopColor="#fff" stopOpacity={0.12} />
      </linearGradient>
      <linearGradient
        id="1dcf2d63-9f57-411e-ae8f-263acd821179"
        x1={360.06}
        y1={473.61}
        x2={360.06}
        y2={291.61}
        xlinkHref="#ed96248d-4698-486b-a4de-994c4b868212"
      />
    </defs>
    <title>notebook</title>
    <rect
      y={268.61}
      width={808.12}
      height={448}
      fill="url(#ed96248d-4698-486b-a4de-994c4b868212)"
    />
    <rect x={8.55} y={274.55} width={791.03} height={436.12} fill="#f5f5f5" />
    <rect
      x={16.37}
      y={285.07}
      width={387.68}
      height={415.29}
      fill="url(#19e667c4-6f71-4983-83f3-bdc836fc61a1)"
    />
    <rect
      x={404.06}
      y={285.07}
      width={387.68}
      height={415.29}
      fill="url(#a9513409-4da2-43cc-9c76-afee4a38ce48)"
    />
    <rect x={22.65} y={291.34} width={381.41} height={402.74} fill="#fff" />
    <rect x={404.06} y={291.34} width={381.41} height={402.74} fill="#fff" />
    <rect
      x={56.52}
      y={318.94}
      width={268.49}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={56.52}
      y={351.56}
      width={100.37}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={194.53}
      y={351.56}
      width={100.37}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect x={224.64} y={638.88} width={100.37} height={15.06} fill={props.primaryColor} />
    <rect x={224.64} y={638.88} width={100.37} height={15.06} opacity={0.2} />
    <rect
      x={56.52}
      y={384.19}
      width={268.49}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={56.52}
      y={416.81}
      width={160.59}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={463.03}
      y={318.94}
      width={268.49}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={463.03}
      y={351.56}
      width={100.37}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={601.04}
      y={351.56}
      width={100.37}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={463.03}
      y={384.19}
      width={268.49}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={463.03}
      y={416.81}
      width={160.59}
      height={15.06}
      fill={props.primaryColor}
      opacity={0.2}
    />
    <rect
      x={52.76}
      y={495.85}
      width={244.66}
      height={114.17}
      fill="url(#7ac6efeb-e6e1-46af-b5fe-b7efb8ee1379)"
    />
    <rect x={56.52} y={500.87} width={238.38} height={105.39} fill={props.primaryColor} />
    <polygon
      points="781.22 599.9 766.09 600.23 766.43 594.97 728.06 595.79 758.42 600.39 590.7 604.02 590.78 607.96 568.29 608.44 568.45 615.59 568.36 611.72 543.32 616.86 568.53 619.6 568.63 624.19 591.13 623.71 591.18 626.33 781.71 622.21 781.22 599.9"
      fill="url(#14a2a5b5-64cc-4fe8-b0e6-f15ac830e947)"
    />
    <rect
      x={792.06}
      y={694.95}
      width={180.67}
      height={21.33}
      transform="translate(1584.02 1300.14) rotate(178.75)"
      fill="#3ad29f"
    />
    <rect
      x={770.77}
      y={700.88}
      width={25.09}
      height={15.06}
      transform="translate(1385.95 1307.87) rotate(178.75)"
      fill="#3ad29f"
    />
    <polygon
      points="574.9 620.12 551 617.5 574.74 612.59 574.9 620.12"
      fill={props.primaryColor}
    />
    <polyline
      points="762.11 602.86 762.52 596.57 726.14 597.37"
      fill="none"
      stroke="#3ad29f"
      strokeMiterlimit={10}
      strokeWidth={3}
    />
    <line
      x1={648}
      y1={569.33}
      x2={664.32}
      y2={578.71}
      fill="#fccc63"
      stroke="#37474f"
      strokeLinecap="round"
      strokeMiterlimit={10}
      strokeWidth={5}
    />
    <line
      x1={462.51}
      y1={462.78}
      x2={478.83}
      y2={472.15}
      fill="#fccc63"
      stroke="#37474f"
      strokeLinecap="round"
      strokeMiterlimit={10}
      strokeWidth={5}
    />
    <circle
      cx={804.78}
      cy={638.53}
      r={45.17}
      transform="translate(-345.71 926.61) rotate(-60.12)"
      fill="#cfd8dc"
    />
    <circle
      cx={714.25}
      cy={585.81}
      r={45.17}
      transform="translate(-345.43 821.65) rotate(-60.12)"
      fill="#cfd8dc"
    />
    <circle
      cx={714.25}
      cy={585.81}
      r={38.89}
      transform="translate(-345.43 821.65) rotate(-60.12)"
      fill="#fff"
      opacity={0.2}
    />
    <circle
      cx={805.63}
      cy={638.3}
      r={38.89}
      transform="translate(-345.08 927.23) rotate(-60.12)"
      fill="#fff"
      opacity={0.2}
    />
    <line
      x1={557.24}
      y1={515.75}
      x2={570.29}
      y2={523.25}
      fill="#fccc63"
      stroke="#37474f"
      strokeMiterlimit={10}
      strokeWidth={5}
    />
    <path
      d="M685.64,575.16a38.9,38.9,0,0,1,64.42-4.51,38.89,38.89,0,1,0-66.51,39A38.83,38.83,0,0,1,685.64,575.16Z"
      transform="translate(-195.94 -91.7)"
      fill="#fff"
      opacity={0.2}
    />
    <path
      d="M777,627.65a38.9,38.9,0,0,1,64.42-4.51,38.89,38.89,0,1,0-66.51,39A38.83,38.83,0,0,1,777,627.65Z"
      transform="translate(-195.94 -91.7)"
      fill="#fff"
      opacity={0.2}
    />
    <path
      d="M950.92,188.37h-24.5c-4.66-34.7-34.37-60.46-70.34-60.46a71,71,0,0,0,0,142c36.34,0,66.29-26.31,70.48-61.52h24.36c5,0,9-5.05,9-10S955.87,188.37,950.92,188.37Z"
      transform="translate(-195.94 -91.7)"
      fill="url(#e2bd95a9-e695-4a74-8d7c-3533af243856)"
    />
    <path
      d="M946.5,189.91H923.38a67,67,0,1,0,.13,17h23a8.5,8.5,0,0,0,0-17Z"
      transform="translate(-195.94 -91.7)"
      fill="#f2f2f2"
    />
    <circle cx={663.06} cy={107.21} r={52} fill="#985454" />
    <path
      d="M867,155.91s35,2,32,46"
      transform="translate(-195.94 -91.7)"
      fill="none"
      stroke="#fff"
      strokeMiterlimit={10}
      strokeWidth={4}
      opacity={0.2}
    />
    <rect
      x={386.64}
      y={64.51}
      width={145.65}
      height={236.99}
      transform="translate(7.51 514.45) rotate(-80.54)"
      fill="url(#a6752e00-ae16-4d29-b62a-f8206f0a04a1)"
    />
    <rect
      x={392.79}
      y={67.49}
      width={135.93}
      height={228.96}
      transform="translate(9.61 514.86) rotate(-80.54)"
      fill="#fff"
    />
    <g opacity={0.6}>
      <rect
        x={542.67}
        y={139.79}
        width={29.13}
        height={21.56}
        transform="translate(-163.62 -181.22) rotate(9.46)"
        fill={props.primaryColor}
      />
      <rect
        x={428.86}
        y={184.91}
        width={111.86}
        height={6.99}
        transform="translate(-158.39 -168.8) rotate(9.46)"
        fill={props.primaryColor}
      />
      <rect
        x={426.38}
        y={199.67}
        width={81.56}
        height={4.66}
        transform="translate(-156.4 -165.72) rotate(9.46)"
        fill={props.primaryColor}
      />
    </g>
    <rect
      x={285.7}
      y={67.97}
      width={145.65}
      height={236.99}
      transform="translate(-80.26 417.78) rotate(-80.54)"
      fill="url(#f9b0df9c-8115-4cd0-ada0-65f11e2c9179)"
    />
    <rect
      x={291.85}
      y={70.95}
      width={135.93}
      height={228.96}
      transform="translate(-78.16 418.18) rotate(-80.54)"
      fill="#fff"
    />
    <g opacity={0.6}>
      <rect
        x={441.73}
        y={143.25}
        width={29.13}
        height={21.56}
        transform="translate(-164.43 -164.58) rotate(9.46)"
        fill={props.primaryColor}
      />
      <rect
        x={327.92}
        y={188.37}
        width={111.86}
        height={6.99}
        transform="translate(-159.2 -152.16) rotate(9.46)"
        fill={props.primaryColor}
      />
      <rect
        x={325.44}
        y={203.13}
        width={81.56}
        height={4.66}
        transform="translate(-157.2 -149.08) rotate(9.46)"
        fill={props.primaryColor}
      />
    </g>
    <rect
      x={395.06}
      y={290.61}
      width={18}
      height={403}
      fill="url(#3de726b5-1495-4a3c-a21e-83c396d56dc7)"
    />
    <polygon
      points="395.06 473.61 360.63 443.62 325.06 473.61 325.06 291.61 395.06 291.61 395.06 473.61"
      fill="url(#1dcf2d63-9f57-411e-ae8f-263acd821179)"
    />
    <polygon
      points="390.06 467.61 360.06 438.61 329.06 467.61 329.06 291.61 390.06 291.61 390.06 467.61"
      fill="#3ad29f"
    />
  </svg>
);

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

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

export default UndrawNotebook;