react-undraw-illustrations/src/node_modules/components/UndrawLogin/UndrawLogin.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 UndrawLogin = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="1c1a0a4e-a918-44e9-86b5-128e360d364d"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 576.43 733.94"
  >
    <defs>
      <linearGradient
        id="b949346c-a93e-41e4-9400-5d42d50a4d6b"
        x1={657.92}
        y1={287.71}
        x2={657.92}
        y2={197.91}
        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="39be1328-9991-40e1-9fe5-ebb1d9df66f0"
        x1={772.98}
        y1={816.94}
        x2={772.98}
        y2={144.06}
        xlinkHref="#b949346c-a93e-41e4-9400-5d42d50a4d6b"
      />
    </defs>
    <title>login</title>
    <rect y={17.06} width={444} height={657} fill="#535461" />
    <polygon
      points="323 691.06 0 674.06 0 17.06 323 0.06 323 691.06"
      fill={props.primaryColor}
    />
    <circle cx={296} cy={377.06} r={4} fill="#535461" />
    <polygon
      points="296 377.66 298.77 382.46 301.55 387.26 296 387.26 290.45 387.26 293.23 382.46 296 377.66"
      fill="#535461"
    />
    <polygon
      points="337 691.06 317.22 691 318 0.06 337 0.06 337 691.06"
      fill={props.primaryColor}
    />
    <g opacity={0.1}>
      <polygon
        points="337.22 691 317.22 691 318.22 0 337.22 0 337.22 691"
        fill="#fff"
      />
    </g>
    <circle cx={296} cy={348.06} r={13} opacity={0.1} />
    <circle cx={296} cy={346.06} r={13} fill="#535461" />
    <path
      d="M657.74,280.55v7.16L688,268.61l-3.18-4-1.48.87-23.41-34.3v-19.9l-8.91.8v-3.18c-23.5-27.06-25.93,3.18-21.07,11.94S643.7,236,643.7,236c5,4.17,13.62,35.67,15.73,43.57Z"
      transform="translate(-311.78 -83)"
      fill="url(#b949346c-a93e-41e4-9400-5d42d50a4d6b)"
    />
    <path
      d="M854.06,264.64l-4.13-2.8h-.18L846,250.7l-1.36.05-4.66-9.31a38.43,38.43,0,0,0,10.75-7.89c7.28-7.18,13.92-19.5,12.28-40.33-.34-4.31,6.77-15.47-14.51-21.27a29.28,29.28,0,0,0-22.38-25.44,81.15,81.15,0,0,0-25.17-2.2c-16.33,1.39-30.65,13.39-30.65,29.78,0,0-4.93,1.52-5.2,17.69l.63,0a46.43,46.43,0,0,0,33.87,56.22l.28,1.68c.29.16.59.3.89.44l3,7.82-9.69,5.82-19.44.64a76,76,0,0,0-26.1,5.59C730.74,277.14,698.33,284,698.33,284L688,269.23l-30.24,20.84,19.9,30.39a46.06,46.06,0,0,0,10.35,5.9h0l.09,0,.11,0,.9.36a81.84,81.84,0,0,0,15.21,4.26c12,2.41,30,4.2,52.53.81l-.16-.05.56-.07,6.76,137h.44l-3.23,23.46C729.37,532,720.61,647.43,720.61,647.43l47.13,135.51c-.89,3.87-4.47,12.23-18.86,18.09-19.29,7.85,13.68,13.54,13.68,13.54l30-9.21c2.48,5,16.41,11.59,16.41,11.59l59.69-1.59V785.9h-.8s5.57-53.32,1.59-64.46,0-65.26,0-65.26l3.18-115.4c11.14-22.28,11.14-41.38,2.39-59.69a55.38,55.38,0,0,1-5-17.64c2.4-5.65,3.41-14.93,1-30.11C863.86,388.2,886.94,343,886.94,343h0A77.76,77.76,0,0,0,854.06,264.64ZM818.46,792.76l-6.72-24.11-1.53.43L781.09,646.63l27.06-56.5v54.12l15.12,105.85V785.9A15.84,15.84,0,0,1,818.46,792.76Z"
      transform="translate(-311.78 -83)"
      fill="url(#39be1328-9991-40e1-9fe5-ebb1d9df66f0)"
    />
    <path
      d="M663.75,221.85V241l22.77,33.36-22.77,14.81s-10.12-39-15.57-43.59c0,0-8.57-6.12-13.24-14.53s-2.34-37.47,20.25-11.47v3.06Z"
      transform="translate(-311.78 -83)"
      fill="#fda57d"
    />
    <path
      d="M845,267.44l-9-18a3.34,3.34,0,0,0-2.82-1.84L799,245.82a3.34,3.34,0,0,0-3.29,4.54l8.83,22.83a3.34,3.34,0,0,0,3.41,2.12l34.42-3.06A3.34,3.34,0,0,0,845,267.44Z"
      transform="translate(-311.78 -83)"
      fill="#fda57d"
    />
    <polygon
      points="530.73 176.7 536.54 193.75 476.82 191.61 499.76 177.84 530.73 176.7"
      fill="#edeef9"
    />
    <polygon
      points="378.94 193.9 375.88 190.08 349.88 205.37 349.88 212.26 378.94 193.9"
      fill="#edeef9"
    />
    <path
      d="M866.39,446.07s-4.37,17.41,4,35,8.41,35.94-2.29,57.35L865.07,649.3s-3.82,52,0,62.7-1.53,61.94-1.53,61.94H820.72V739.54l-14.53-101.7v-52l-26,54.29L810,765.54l-39,16.06-48.94-140.7s8.41-110.88,39-149.11l5.74-41.68Z"
      transform="translate(-311.78 -83)"
      fill="#7a7478"
    />
    <path
      d="M864.31,802.24V773.95H820.72s-3.06,11.47-22.94,13.76S807,803.77,807,803.77Z"
      transform="translate(-311.78 -83)"
      fill="#333"
    />
    <path
      d="M817.23,784.63l-7.59-27.26-42,11.69s.13,11.87-18.41,19.41,13.15,13,13.15,13Z"
      transform="translate(-311.78 -83)"
      fill="#333"
    />
    <path
      d="M766.81,452.4l99.58-4a55.71,55.71,0,0,0-.75,18.05c-4.56,10.72-14.33,7.78-14.33,7.78l-87.13-2.68Z"
      transform="translate(-311.78 -83)"
      opacity={0.1}
    />
    <path
      d="M846.34,270.4l4,2.69a74.71,74.71,0,0,1,31.59,75.33h0s-22.18,43.39-15.29,86.78-15.29,36.71-15.29,36.71l-87.56-2.69-6.5-131.65s-52.76,7.51-76.47-10.85l-19.12-29.2,29.06-20,9.94,14.18s31.14-6.58,48.24-13.51A73.07,73.07,0,0,1,774,272.8Z"
      transform="translate(-311.78 -83)"
      fill="#252a62"
    />
    <path
      d="M845.57,482.22s5.35,26.76-25.23,71.12"
      transform="translate(-311.78 -83)"
      opacity={0.1}
    />
    <path
      d="M756.87,337.7s-36.7-12.23-52.76-12.23-13.38,6.94-13.38,6.94S716.34,343.81,756.87,337.7Z"
      transform="translate(-311.78 -83)"
      opacity={0.1}
    />
    <path
      d="M798.49,247.35l14.61,1.75c.46.06.88.64,1.13,1.54-3.21,5.79-7.23,9.25-11.59,9.25a9,9,0,0,1-4.43-1.23l-1.12-6.76C796.71,249.64,797.46,247.23,798.49,247.35Z"
      transform="translate(-311.78 -83)"
      opacity={0.1}
    />
    <circle cx={496.9} cy={130.75} r={44.6} fill="#fda57d" />
    <path
      d="M770.75,188.5h0l2.25,2.06a7.71,7.71,0,0,1-2.25,12.81h0s20,20,22.76,23.69-.46,13.47-.46,13.47-8.83,16.26,37.63,12.54c0,0,30.66-6.5,27.41-47.85-.33-4.14,6.5-14.87-13.94-20.44h0a28.13,28.13,0,0,0-21.5-24.45,78,78,0,0,0-24.18-2.12A30.36,30.36,0,0,0,770.75,188.5Z"
      transform="translate(-311.78 -83)"
      opacity={0.1}
    />
    <path
      d="M769.78,186.06h0s-4.73,1.46-5,17l6.73-.46s15.58,41.67,13.94,36.24c-6-20,6-16.26,8.83-12.54s-.46,13.47-.46,13.47S785,256,831.45,252.31c0,0,30.66-6.5,27.41-47.85-.33-4.14,6.5-14.87-13.94-20.44h0a28.13,28.13,0,0,0-21.5-24.45,78,78,0,0,0-24.18-2.12C783.54,158.79,769.78,170.31,769.78,186.06Z"
      transform="translate(-311.78 -83)"
      fill="#72351c"
    />
    <line
      x1={52.82}
      y1={16.11}
      x2={52.82}
      y2={677.16}
      fill="none"
      stroke="#000"
      strokeMiterlimit={10}
      strokeWidth={2}
      opacity={0.1}
    />
    <line
      x1={109.82}
      y1={12.11}
      x2={109.82}
      y2={679.16}
      fill="none"
      stroke="#000"
      strokeMiterlimit={10}
      strokeWidth={2}
      opacity={0.1}
    />
    <line
      x1={166.82}
      y1={9.11}
      x2={166.82}
      y2={683}
      fill="none"
      stroke="#000"
      strokeMiterlimit={10}
      strokeWidth={2}
      opacity={0.1}
    />
    <line
      x1={223.82}
      y1={6.11}
      x2={223.82}
      y2={687.16}
      fill="none"
      stroke="#000"
      strokeMiterlimit={10}
      strokeWidth={2}
      opacity={0.1}
    />
    <line
      x1={280.82}
      y1={3.11}
      x2={280.82}
      y2={688}
      fill="none"
      stroke="#000"
      strokeMiterlimit={10}
      strokeWidth={2}
      opacity={0.1}
    />
  </svg>
);

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

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

export default UndrawLogin;