<template>
  <!-- eslint-disable -->
  <svg :height="height" data-name="notebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 808.12 716.61"><defs><linearGradient x1="404.06" y1="716.61" x2="404.06" y2="268.61" 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="210.22" y1="700.35" x2="210.22" y2="285.07" xlink:href="#ed96248d-4698-486b-a4de-994c4b868212"/><linearGradient x1="428.16" y1="792.05" x2="428.16" y2="376.77" gradientTransform="matrix(-1, 0, 0, 1, 1026.06, -91.7)" xlink:href="#ed96248d-4698-486b-a4de-994c4b868212"/><linearGradient x1="175.09" y1="610.02" x2="175.09" y2="495.85" xlink:href="#ed96248d-4698-486b-a4de-994c4b868212"/><linearGradient x1="662.51" y1="626.33" x2="662.51" y2="594.97" xlink:href="#ed96248d-4698-486b-a4de-994c4b868212"/><linearGradient x1="872.5" y1="269.91" x2="872.5" y2="127.91" xlink:href="#ed96248d-4698-486b-a4de-994c4b868212"/><linearGradient x1="458.97" y1="247.52" x2="458.97" y2="101.87" gradientTransform="translate(634.16 -275.97) rotate(90)" xlink:href="#ed96248d-4698-486b-a4de-994c4b868212"/><linearGradient x1="359.97" y1="267.52" x2="359.97" y2="121.87" gradientTransform="translate(553.22 -173.51) rotate(90)" xlink:href="#ed96248d-4698-486b-a4de-994c4b868212"/><linearGradient x1="395.06" y1="492.11" x2="413.06" y2="492.11" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0.12"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0.12"/></linearGradient><linearGradient x1="360.06" y1="473.61" x2="360.06" y2="291.61" xlink:href="#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="primaryColor" opacity="0.2"/><rect x="56.52" y="351.56" width="100.37" height="15.06" :fill="primaryColor" opacity="0.2"/><rect x="194.53" y="351.56" width="100.37" height="15.06" :fill="primaryColor" opacity="0.2"/><rect x="224.64" y="638.88" width="100.37" height="15.06" :fill="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="primaryColor" opacity="0.2"/><rect x="56.52" y="416.81" width="160.59" height="15.06" :fill="primaryColor" opacity="0.2"/><rect x="463.03" y="318.94" width="268.49" height="15.06" :fill="primaryColor" opacity="0.2"/><rect x="463.03" y="351.56" width="100.37" height="15.06" :fill="primaryColor" opacity="0.2"/><rect x="601.04" y="351.56" width="100.37" height="15.06" :fill="primaryColor" opacity="0.2"/><rect x="463.03" y="384.19" width="268.49" height="15.06" :fill="primaryColor" opacity="0.2"/><rect x="463.03" y="416.81" width="160.59" height="15.06" :fill="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="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="primaryColor"/><polyline points="762.11 602.86 762.52 596.57 726.14 597.37" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="3"/><line x1="648" y1="569.33" x2="664.32" y2="578.71" fill="#fccc63" stroke="#37474f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/><line x1="462.51" y1="462.78" x2="478.83" y2="472.15" fill="#fccc63" stroke="#37474f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="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" stroke-miterlimit="10" stroke-width="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" stroke-miterlimit="10" stroke-width="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="primaryColor"/><rect x="428.86" y="184.91" width="111.86" height="6.99" transform="translate(-158.39 -168.8) rotate(9.46)" :fill="primaryColor"/><rect x="426.38" y="199.67" width="81.56" height="4.66" transform="translate(-156.4 -165.72) rotate(9.46)" :fill="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="primaryColor"/><rect x="327.92" y="188.37" width="111.86" height="6.99" transform="translate(-159.2 -152.16) rotate(9.46)" :fill="primaryColor"/><rect x="325.44" y="203.13" width="81.56" height="4.66" transform="translate(-157.2 -149.08) rotate(9.46)" :fill="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>
  <!-- eslint-enable -->
</template>

<script>
export default {
  name: 'UndrawNotebook',
  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>
