<template>
  <!-- eslint-disable -->
  <svg :height="height" data-name="design process" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1016.95 779.71"><defs><linearGradient x1="196.28" y1="438.84" x2="196.28" y2="60.65" gradientTransform="translate(-91.51 -60.66)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient x1="600.14" y1="614.06" x2="600.14" y2="235.88" xlink:href="#f2a8c623-59d2-4818-b55b-e57e9767e514"/><linearGradient x1="1003.72" y1="788.45" x2="1003.72" y2="410.27" xlink:href="#f2a8c623-59d2-4818-b55b-e57e9767e514"/></defs><title>design process</title><rect width="209.52" height="378.19" rx="7.96" ry="7.96" fill="url(#f2a8c623-59d2-4818-b55b-e57e9767e514)"/><rect x="2.84" y="5.11" width="203.86" height="367.97" rx="13.64" ry="13.64" fill="#fff"/><path d="M247.5,75A16.53,16.53,0,0,1,231.21,89H160.8A16.53,16.53,0,0,1,144.51,75h-37.3a7.74,7.74,0,0,0-7.74,7.74v334a7.74,7.74,0,0,0,7.74,7.74H285.36a7.74,7.74,0,0,0,7.74-7.74v-334A7.74,7.74,0,0,0,285.37,75Z" transform="translate(-91.52 -60.64)" fill="#fafafa"/><rect x="82.34" y="18.74" width="45.43" height="2.84" rx="1.42" ry="1.42" fill="#dbdbdb"/><circle cx="137.42" cy="19.88" r="1.7" fill="#dbdbdb"/><rect x="403.86" y="175.23" width="209.52" height="378.19" rx="7.96" ry="7.96" fill="url(#f68435eb-6090-4c29-82cb-c22589dfd1c9)"/><rect x="406.69" y="180.34" width="203.86" height="367.97" rx="13.64" ry="13.64" fill="#fff"/><path d="M651.36,250.21a16.53,16.53,0,0,1-16.29,14.06H564.66a16.53,16.53,0,0,1-16.29-14.06h-37.3a7.74,7.74,0,0,0-7.74,7.74V592a7.74,7.74,0,0,0,7.74,7.74H689.21A7.74,7.74,0,0,0,697,592V258a7.74,7.74,0,0,0-7.74-7.74Z" transform="translate(-91.52 -60.64)" fill="#fafafa"/><rect x="486.19" y="193.97" width="45.43" height="2.84" rx="1.42" ry="1.42" fill="#dbdbdb"/><circle cx="541.27" cy="195.11" r="1.7" fill="#dbdbdb"/><g opacity="0.8"><polyline points="495.93 291.91 495.93 297.91 489.93 297.91" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="480.63" y1="297.91" x2="448.09" y2="297.91" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="9.3 9.3"/><polyline points="443.45 297.91 437.45 297.91 437.45 291.91" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="437.45" y1="278.37" x2="437.45" y2="258.05" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="13.55 13.55"/><polyline points="437.45 251.28 437.45 245.28 443.45 245.28" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="452.74" y1="245.28" x2="485.28" y2="245.28" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="9.3 9.3"/><polyline points="489.93 245.28 495.93 245.28 495.93 251.28" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="495.93" y1="264.82" x2="495.93" y2="285.14" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="13.55 13.55"/></g><g opacity="0.8"><polyline points="583.01 490.77 583.01 496.77 577.01 496.77" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="567.71" y1="496.77" x2="535.17" y2="496.77" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="9.3 9.3"/><polyline points="530.52 496.77 524.52 496.77 524.52 490.77" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="524.53" y1="477.22" x2="524.53" y2="456.9" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="13.55 13.55"/><polyline points="524.52 450.13 524.52 444.13 530.52 444.13" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="539.82" y1="444.13" x2="572.36" y2="444.13" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="9.3 9.3"/><polyline points="577.01 444.13 583.01 444.13 583.01 450.13" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="583.01" y1="463.68" x2="583.01" y2="483.99" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="13.55 13.55"/></g><g opacity="0.8"><line x1="437.12" y1="325.53" x2="583.34" y2="325.53" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="12"/><line x1="437.12" y1="354.78" x2="583.34" y2="354.78" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="12"/><line x1="437.12" y1="384.02" x2="583.34" y2="384.02" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="12"/><line x1="437.12" y1="413.26" x2="583.34" y2="413.26" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="12"/></g><rect x="807.43" y="349.63" width="209.52" height="378.19" rx="7.96" ry="7.96" fill="url(#4eed950e-2415-43cc-9759-afeb007b071d)"/><rect x="810.26" y="354.74" width="203.86" height="367.97" rx="13.64" ry="13.64" fill="#fff"/><path d="M1054.93,424.61a16.53,16.53,0,0,1-16.29,14.06H968.23a16.53,16.53,0,0,1-16.29-14.06h-37.3a7.74,7.74,0,0,0-7.74,7.74v334a7.74,7.74,0,0,0,7.74,7.74h178.15a7.74,7.74,0,0,0,7.74-7.74v-334a7.74,7.74,0,0,0-7.74-7.74Z" transform="translate(-91.52 -60.64)" fill="#fafafa"/><rect x="889.76" y="368.37" width="45.43" height="2.84" rx="1.42" ry="1.42" fill="#dbdbdb"/><circle cx="944.84" cy="369.51" r="1.7" fill="#dbdbdb"/><rect x="836.47" y="419.68" width="58.49" height="52.64" :fill="primaryColor"/><rect x="924.2" y="618.53" width="58.49" height="52.64" :fill="primaryColor"/><line x1="836.47" y1="502.86" x2="982.68" y2="502.86" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="836.47" y1="532.1" x2="982.68" y2="532.1" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="836.47" y1="561.34" x2="982.68" y2="561.34" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><line x1="836.47" y1="590.59" x2="982.68" y2="590.59" fill="none" stroke="#6c63ff" stroke-miterlimit="10" stroke-width="2"/><polyline points="232.95 40.71 509.95 40.71 509.95 142.71" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="12"/><polyline points="508.95 590.71 508.95 778.71 912.95 778.71 912.95 746.71" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="12"/><rect x="205.48" y="513.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="453.48" y="58.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="115.48" y="450.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="196.48" y="675.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="421.48" y="711.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="309.48" y="310.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="723.48" y="626.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="718.48" y="261.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="560.48" y="590.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="862.48" y="117.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="628.48" y="99.36" width="9" height="9" fill="#f55f44" opacity="0.5"/><rect x="835.48" y="747.36" width="9" height="9" fill="#f55f44" opacity="0.5"/></svg>
  <!-- eslint-enable -->
</template>

<script>
export default {
  name: 'UndrawDesignProcess',
  props: {
    /** Sets primaryColor of the illustration */
    primaryColor: {
      type: String,
      default: '#6c63ff'  
    },
    /** Sets height of the illustration */
    height: {
      type: String,
      default: '100'  
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
