react-undraw-illustrations/src/node_modules/components/UndrawVault/UndrawVault.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 UndrawVault = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="7148f5f1-8839-4464-a941-0c8a08d3460a"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 678.3 733"
  >
    <defs>
      <linearGradient
        id="4ca4b65a-1144-4de1-8925-6a62bc294928"
        x1={585.48}
        y1={733}
        x2={585.48}
        y2={673.63}
        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="266d8c0d-4533-41a2-a7bc-3c0f98c2c2fa"
        x1={93.98}
        x2={93.98}
        y2={673.63}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="deb99f58-9fb9-4a93-aaf8-4b4cb68821c1"
        x1={339.15}
        y1={681.8}
        x2={339.15}
        y2={0}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="c4ad51c6-ffe9-4991-94f6-4a02d4a38b0c"
        x1={339.15}
        y1={569.14}
        x2={339.15}
        y2={111.49}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="b91b9d0a-3c7c-4b7e-8301-556f9b68b111"
        x1={806.95}
        y1={427.79}
        x2={806.95}
        y2={354.24}
        gradientTransform="translate(-0.46 -24.57)"
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="8f58feb2-c461-4934-9419-72f8b76f5e61"
        x1={780.89}
        y1={503.2}
        x2={780.89}
        y2={429.65}
        gradientTransform="translate(1269.92 -306.54) rotate(90)"
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="d83c7eb3-9930-4e8e-abfa-53b87d59f968"
        x1={565.48}
        y1={376.26}
        x2={565.48}
        y2={302.71}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="3d971d9d-e0fc-4263-8761-c1789934eb12"
        x1={339.15}
        y1={423.21}
        x2={339.15}
        y2={255.09}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="18a30a45-ec9b-4146-ae9c-2a8eabf3bdf2"
        x1={290.11}
        y1={525.36}
        x2={290.11}
        y2={499.67}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="98f2a4d5-9270-4ece-b23b-fefaca1fb56f"
        x1={322.8}
        y1={525.36}
        x2={322.8}
        y2={499.67}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="a36f1bde-d0b8-4d42-abdf-c9e597afa610"
        x1={355.49}
        y1={525.36}
        x2={355.49}
        y2={499.67}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="a4e6c30c-4fa5-4c93-a462-54244d7638b4"
        x1={388.18}
        y1={525.36}
        x2={388.18}
        y2={499.67}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="bb8b14ca-ea5c-42e9-a47f-d810d565e441"
        x1={339.15}
        y1={389.93}
        x2={339.15}
        y2={288.36}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="c7b6fbbe-7ded-4a5e-a460-2ea21f819315"
        x1={377.6}
        y1={380.54}
        x2={377.6}
        y2={283.64}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
      <linearGradient
        id="b424414b-c049-456f-9819-be23a4131db6"
        x1={377.6}
        y1={563.83}
        x2={377.6}
        y2={466.93}
        xlinkHref="#4ca4b65a-1144-4de1-8925-6a62bc294928"
      />
    </defs>
    <title>vault</title>
    <rect
      x={560.38}
      y={673.63}
      width={50.2}
      height={59.37}
      fill="url(#4ca4b65a-1144-4de1-8925-6a62bc294928)"
    />
    <rect
      x={822.4}
      y={757.63}
      width={47.87}
      height={57.21}
      transform="translate(1431.82 1488.46) rotate(-180)"
      fill="#f5f5f5"
    />
    <rect
      x={68.88}
      y={673.63}
      width={50.2}
      height={59.37}
      fill="url(#266d8c0d-4533-41a2-a7bc-3c0f98c2c2fa)"
    />
    <rect x={70.05} y={673.63} width={47.87} height={57.21} fill="#f5f5f5" />
    <rect
      width={678.3}
      height={681.8}
      rx={14.86}
      ry={14.86}
      fill="url(#deb99f58-9fb9-4a93-aaf8-4b4cb68821c1)"
    />
    <rect
      x={4.67}
      y={3.5}
      width={670.12}
      height={670.12}
      rx={14.86}
      ry={14.86}
      fill="#fafafa"
    />
    <rect
      x={112.66}
      y={111.49}
      width={452.98}
      height={457.65}
      fill="url(#c4ad51c6-ffe9-4991-94f6-4a02d4a38b0c)"
    />
    <rect
      x={731.19}
      y={329.67}
      width={150.6}
      height={73.55}
      transform="translate(-327.85 135.06) rotate(-14.86)"
      fill="url(#b91b9d0a-3c7c-4b7e-8301-556f9b68b111)"
    />
    <rect
      x={732.35}
      y={330.84}
      width={148.27}
      height={71.22}
      transform="translate(-327.85 135.06) rotate(-14.86)"
      fill="#fff"
    />
    <rect
      x={737.22}
      y={333.17}
      width={138.55}
      height={66.55}
      transform="translate(-327.85 135.06) rotate(-14.86)"
      fill="#69f0ae"
    />
    <ellipse
      cx={805.77}
      cy={366.03}
      rx={25.68}
      ry={14.01}
      transform="translate(-327.77 134.87) rotate(-14.86)"
      fill="#fff"
    />
    <rect
      x={766.71}
      y={399.05}
      width={73.55}
      height={150.6}
      transform="translate(-167.04 996.12) rotate(-71.04)"
      fill="url(#8f58feb2-c461-4934-9419-72f8b76f5e61)"
    />
    <rect
      x={729.35}
      y={438.74}
      width={148.27}
      height={71.22}
      transform="translate(-63.14 -319.33) rotate(18.96)"
      fill="#fff"
    />
    <rect
      x={734.22}
      y={441.08}
      width={138.55}
      height={66.55}
      transform="translate(-63.14 -319.33) rotate(18.96)"
      fill="#69f0ae"
    />
    <ellipse
      cx={803.13}
      cy={473.61}
      rx={14.01}
      ry={25.68}
      transform="translate(-166.58 995.28) rotate(-71.04)"
      fill="#fff"
    />
    <rect
      x={490.18}
      y={302.71}
      width={150.6}
      height={73.55}
      fill="url(#d83c7eb3-9930-4e8e-abfa-53b87d59f968)"
    />
    <rect x={491.35} y={303.88} width={148.27} height={71.22} fill="#fff" />
    <rect x={496.21} y={306.21} width={138.55} height={66.55} fill="#69f0ae" />
    <ellipse cx={564.9} cy={338.9} rx={25.68} ry={14.01} fill="#fff" />
    <rect x={116.16} y={116.16} width={445.97} height={445.97} fill="#fff" />
    <circle
      cx={339.15}
      cy={339.15}
      r={84.06}
      fill="url(#3d971d9d-e0fc-4263-8761-c1789934eb12)"
    />
    <circle cx={339.15} cy={339.15} r={80.56} fill="#fafafa" />
    <rect
      x={277.86}
      y={499.67}
      width={24.52}
      height={25.68}
      fill="url(#18a30a45-ec9b-4146-ae9c-2a8eabf3bdf2)"
    />
    <rect
      x={310.55}
      y={499.67}
      width={24.52}
      height={25.68}
      fill="url(#98f2a4d5-9270-4ece-b23b-fefaca1fb56f)"
    />
    <rect
      x={343.23}
      y={499.67}
      width={24.52}
      height={25.68}
      fill="url(#a36f1bde-d0b8-4d42-abdf-c9e597afa610)"
    />
    <rect
      x={375.92}
      y={499.67}
      width={24.52}
      height={25.68}
      fill="url(#a4e6c30c-4fa5-4c93-a462-54244d7638b4)"
    />
    <rect x={278.44} y={500.84} width={23.35} height={23.35} fill={props.primaryColor} />
    <rect
      x={311.13}
      y={500.84}
      width={23.35}
      height={23.35}
      fill={props.primaryColor}
      opacity={0.7}
    />
    <rect
      x={343.82}
      y={500.84}
      width={23.35}
      height={23.35}
      fill={props.primaryColor}
      opacity={0.5}
    />
    <rect
      x={376.51}
      y={500.84}
      width={23.35}
      height={23.35}
      fill={props.primaryColor}
      opacity={0.3}
    />
    <rect
      x={628.61}
      y={371.8}
      width={4.67}
      height={16.34}
      transform="translate(71.2 -377.18) rotate(35)"
      fill={props.primaryColor}
    />
    <rect
      x={640.84}
      y={445.92}
      width={4.67}
      height={16.34}
      transform="translate(1123.21 103.69) rotate(125)"
      fill={props.primaryColor}
    />
    <rect
      x={566.72}
      y={458.15}
      width={4.67}
      height={16.34}
      transform="translate(506.87 1090.71) rotate(-145)"
      fill={props.primaryColor}
    />
    <rect
      x={554.49}
      y={384.03}
      width={4.67}
      height={16.34}
      transform="translate(-344.68 539.37) rotate(-55)"
      fill={props.primaryColor}
    />
    <rect
      x={628.57}
      y={371.66}
      width={4.67}
      height={16.34}
      transform="translate(71.11 -377.18) rotate(35)"
      opacity={0.2}
    />
    <rect
      x={640.81}
      y={445.78}
      width={4.67}
      height={16.34}
      transform="translate(1123.04 103.5) rotate(125)"
      opacity={0.2}
    />
    <rect
      x={566.68}
      y={458.02}
      width={4.67}
      height={16.34}
      transform="translate(506.88 1090.44) rotate(-145)"
      opacity={0.2}
    />
    <rect
      x={554.45}
      y={383.89}
      width={4.67}
      height={16.34}
      transform="translate(-344.58 539.28) rotate(-55)"
      opacity={0.2}
    />
    <circle
      cx={339.15}
      cy={339.15}
      r={50.78}
      fill="url(#bb8b14ca-ea5c-42e9-a47f-d810d565e441)"
    />
    <circle cx={339.15} cy={339.15} r={47.87} fill={props.primaryColor} />
    <path
      d="M560.89,429.57A47.86,47.86,0,0,1,632.56,388a47.86,47.86,0,1,0-57,76A47.71,47.71,0,0,1,560.89,429.57Z"
      transform="translate(-260.85 -84)"
      fill="#fff"
      opacity={0.2}
    />
    <path
      d="M396.28,380.54H358.92V287.26a3.63,3.63,0,0,1,3.63-3.62h30.11a3.63,3.63,0,0,1,3.63,3.63Z"
      transform="translate(-260.85 -84)"
      fill="url(#c7b6fbbe-7ded-4a5e-a460-2ea21f819315)"
    />
    <path
      d="M392.47,563.83H362.73a3.81,3.81,0,0,1-3.81-3.81V466.93h37.36V560A3.81,3.81,0,0,1,392.47,563.83Z"
      transform="translate(-260.85 -84)"
      fill="url(#b424414b-c049-456f-9819-be23a4131db6)"
    />
    <path
      d="M102.4,200.8h28.69a3.17,3.17,0,0,1,3.17,3.17V294.2a0,0,0,0,1,0,0h-35a0,0,0,0,1,0,0V204A3.17,3.17,0,0,1,102.4,200.8Z"
      fill="#fafafa"
    />
    <path
      d="M99.23,384.1h35a0,0,0,0,1,0,0v92.33a1.06,1.06,0,0,1-1.06,1.06H100.3a1.06,1.06,0,0,1-1.06-1.06V384.1A0,0,0,0,1,99.23,384.1Z"
      fill="#fafafa"
    />
  </svg>
);

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

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

export default UndrawVault;