react-undraw-illustrations/src/node_modules/components/UndrawPenTool/UndrawPenTool.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 UndrawPenTool = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="b9db6c67-941f-4cc2-b17c-4ec7dbc0da14"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 907.88 641.74"
  >
    <defs>
      <linearGradient
        id="6dbd394d-3147-4710-ae5b-040c9889b819"
        x1={444.99}
        y1={641.74}
        x2={444.99}
        y2={550.42}
        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="25611293-a7d7-4bef-9ea8-eef2963e34c7"
        x1={586.17}
        y1={702.27}
        x2={586.17}
        y2={250.71}
        xlinkHref="#6dbd394d-3147-4710-ae5b-040c9889b819"
      />
      <linearGradient
        id="f7aa0426-c3ad-4d3b-8596-50aa38a87e77"
        x1={448.88}
        y1={71.08}
        x2={448.88}
        y2={1.14}
        xlinkHref="#6dbd394d-3147-4710-ae5b-040c9889b819"
      />
      <linearGradient
        id="170327e1-c007-4bc3-aecd-c22d9d8756ba"
        x1={41}
        y1={82.01}
        x2={41}
        y2={0}
        xlinkHref="#6dbd394d-3147-4710-ae5b-040c9889b819"
      />
      <linearGradient
        id="35baff6c-edbd-4d6b-969d-bf3825558dc6"
        x1={866.87}
        y1={82.01}
        x2={866.87}
        y2={0}
        xlinkHref="#6dbd394d-3147-4710-ae5b-040c9889b819"
      />
    </defs>
    <title>pen</title>
    <polygon
      points="531.57 550.42 358.41 550.42 358.41 611.3 377.65 611.3 377.65 641.74 512.33 641.74 512.33 611.3 531.57 611.3 531.57 550.42"
      fill="url(#6dbd394d-3147-4710-ae5b-040c9889b819)"
    />
    <path
      d="M596.87,251.71V460.23c20.73,6.22,29.81,12.58,34.91,26.13a65.58,65.58,0,0,1,2.18,38c-3.27,14-9.28,21.47-25.65,25.81a62.53,62.53,0,0,1-28.41,1c-22.62-4.59-34.51-20-34.51-45.56,0-24.46,8.4-37.44,31.5-45.16V421.29l-1-170.59L406.09,503.22s81.27,67.93,111,199.05H655.23s41.59-152.22,111-189.69Z"
      transform="translate(-146.06 -129.13)"
      fill="url(#25611293-a7d7-4bef-9ea8-eef2963e34c7)"
    />
    <path
      d="M599.93,261.88v193.5a55,55,0,1,1-27.52,2.37V261.88l-156,238.55s82.57,73.4,110.1,201.85H645.81s45.87-156,110.1-192.67Z"
      transform="translate(-146.06 -129.13)"
      fill="#eceff1"
    />
    <rect x={59.35} y={31.83} width={366.99} height={18.35} fill="#eceff1" />
    <rect x={472.22} y={31.83} width={366.99} height={18.35} fill="#eceff1" />
    <rect x={380.47} y={591.49} width={128.45} height={45.87} fill={props.primaryColor} />
    <rect
      x={413.91}
      y={1.14}
      width={69.93}
      height={69.93}
      fill="url(#f7aa0426-c3ad-4d3b-8596-50aa38a87e77)"
    />
    <rect x={417.17} y={4.3} width={64.22} height={64.22} fill={props.primaryColor} />
    <circle
      cx={41}
      cy={41}
      r={41}
      fill="url(#170327e1-c007-4bc3-aecd-c22d9d8756ba)"
    />
    <circle
      cx={866.87}
      cy={41}
      r={41}
      fill="url(#35baff6c-edbd-4d6b-969d-bf3825558dc6)"
    />
    <circle cx={41} cy={41} r={36.7} fill={props.primaryColor} />
    <circle cx={866.74} cy={41} r={36.7} fill={props.primaryColor} />
    <rect x={362.12} y={554.79} width={165.15} height={55.05} fill={props.primaryColor} />
    <rect x={362.12} y={554.79} width={165.15} height={55.05} opacity={0.2} />
  </svg>
);

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

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

export default UndrawPenTool;