UNPKG

react-undraw-illustrations

Version:

unDraw: MIT licensed illustrations for every project you can imagine and create...for React!

452 lines (447 loc) 17.9 kB
import React from "react"; import PropTypes from "prop-types"; const UndrawBeerCelebration = props => ( <svg style={{height:props.height, width:'100%'}} className={props.class} id="54eae1f1-14f1-4bae-a236-a4102cc78acd" data-name="Layer 1" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 815.19 739" > <defs> <linearGradient id="532a2a87-9650-4813-abf1-84f26add26a1" x1={951.7} y1={575.37} x2={951.7} y2={414.37} gradientTransform="translate(-59.96 89.85) rotate(-6.25)" 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="7946fcfc-5387-48c3-a883-c93cc2ce306d" x1={785.7} y1={711.37} x2={785.7} y2={333.37} xlinkHref="#532a2a87-9650-4813-abf1-84f26add26a1" /> <linearGradient id="8c715f2b-00db-4dd2-88e2-1138b3e843e3" x1={768.63} y1={421.56} x2={768.63} y2={260.56} gradientTransform="matrix(-0.97, -0.24, -0.24, 0.97, 1136.54, 171.94)" xlinkHref="#532a2a87-9650-4813-abf1-84f26add26a1" /> <linearGradient id="5ead7ab1-dbab-4409-921f-8190bb8e06e9" x1={602.63} y1={557.56} x2={602.63} y2={179.56} gradientTransform="matrix(-0.97, -0.24, -0.24, 0.97, 1136.54, 171.94)" xlinkHref="#532a2a87-9650-4813-abf1-84f26add26a1" /> </defs> <title>beer celebration</title> <circle cx={387} cy={389} r={269.5} fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={5} strokeDasharray={12} opacity={0.4} /> <circle cx={387} cy={389} r={205.5} fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={5} strokeDasharray={12} opacity={0.4} /> <path d="M950,505.5a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z" transform="translate(-208 -81)" fill="#f5f5f5" /> <g opacity={0.5}> <path d="M886.18,403.06l2.19,20,36.21-4a34,34,0,0,1,37.52,30.11l5.74,52.41a34,34,0,0,1-30.11,37.52l-36.21,4,2.19,20,56.21-6.16A34,34,0,0,0,990,519.43L979.91,427a34,34,0,0,0-37.52-30.11Z" transform="translate(-208 -81)" fill="url(#532a2a87-9650-4813-abf1-84f26add26a1)" /> </g> <path d="M891.86,411l2,17.89,28.81-3.16a34,34,0,0,1,37.52,30.11l4.35,39.73a34,34,0,0,1-30.11,37.52l-28.81,3.16,2,17.89L954.24,549a34,34,0,0,0,30.11-37.52L976.08,436a34,34,0,0,0-37.52-30.11Z" transform="translate(-208 -81)" fill="#dbe8fc" /> <g opacity={0.5}> <path d="M884.8,702l-172.57,18.9a45.5,45.5,0,0,1-50.18-40.28l-36.2-330.52,263-28.81,36.2,330.52A45.5,45.5,0,0,1,884.8,702Z" transform="translate(-208 -81)" fill="url(#7946fcfc-5387-48c3-a883-c93cc2ce306d)" /> </g> <path d="M651.94,343.56h252a0,0,0,0,1,0,0v314.5a45.5,45.5,0,0,1-45.5,45.5h-161a45.5,45.5,0,0,1-45.5-45.5V343.56A0,0,0,0,1,651.94,343.56Z" transform="translate(-260.38 6.82) rotate(-6.25)" fill="#dbe8fc" /> <path d="M669.89,361.09h215.5a0,0,0,0,1,0,0v278.5a45.5,45.5,0,0,1-45.5,45.5H715.39a45.5,45.5,0,0,1-45.5-45.5V361.09a0,0,0,0,1,0,0Z" transform="translate(-260.33 6.78) rotate(-6.25)" fill={props.primaryColor} /> <path d="M697.69,397c-4.48.49-3.72,7.45.76,7S702.17,396.56,697.69,397Z" transform="translate(-208 -81)" fill="#fff" /> <path d="M726.39,475.39c-4.48.49-3.72,7.45.76,7S730.87,474.9,726.39,475.39Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M716.25,529.82c-4.48.49-3.72,7.45.76,7S720.74,529.33,716.25,529.82Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M743,599.32c-4.48.49-3.72,7.45.76,7S747.47,598.83,743,599.32Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M807.25,598.32c-4.48.49-3.72,7.45.76,7S811.74,597.82,807.25,598.32Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M800.28,396.88c-4.48.49-3.72,7.45.76,7S804.76,396.39,800.28,396.88Z" transform="translate(-208 -81)" fill="#fff" /> <path d="M846.45,386.79c-4.48.49-3.72,7.45.76,7S850.94,386.3,846.45,386.79Z" transform="translate(-208 -81)" fill="#fff" /> <path d="M760.6,420.34c-5.76.63-4.79,9.58,1,8.95S766.36,419.71,760.6,420.34Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M818,512.64c-5.76.63-4.79,9.58,1,8.95S823.75,512,818,512.64Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M731,655.46c-6.4.7-5.32,10.64,1.09,9.94S737.43,654.75,731,655.46Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M699.25,420.52c-6.4.7-5.32,10.64,1.09,9.94S705.66,419.82,699.25,420.52Z" transform="translate(-208 -81)" fill="#fafafa" /> <rect x={654.75} y={353.39} width={216} height={63} transform="translate(-245.37 4.34) rotate(-6.25)" fill="#fafafa" /> <path d="M762.79,642.42,732.47,365.57l-79.52,8.71,30.32,276.84a45.5,45.5,0,0,0,50.18,40.28L813,682.69A45.5,45.5,0,0,1,762.79,642.42Z" transform="translate(-208 -81)" opacity={0.05} /> <path d="M817.46,636.43,787.14,359.59l79.52-8.71L897,627.72a45.5,45.5,0,0,1-40.28,50.18l-79.52,8.71A45.5,45.5,0,0,0,817.46,636.43Z" transform="translate(-208 -81)" fill="#fff" opacity={0.1} /> <path d="M901.48,329c-2.16-19.76-64-29.2-138.12-21.09s-132.44,30.72-130.28,50.49c1.32,12.05,24.84,20.26,59.81,23a22.49,22.49,0,0,0,37,24.37c5.29,18.24,17.08,30.7,29.29,29.36,13.36-1.46,22.65-18.95,22.38-40.48,5.52,6.13,12.37,9.51,19.42,8.74,8.59-.94,15.57-7.84,19.45-17.79,4.66,3.66,10,5.52,15.36,4.92,6.93-.76,12.81-5.39,16.86-12.37,2.83,15.76,13.74,27.12,25.36,25.85,12.35-1.35,20.83-16.47,18.94-33.76-1-9.18-4.73-17.13-9.86-22.37C896.9,341.61,902.16,335.14,901.48,329Z" transform="translate(-208 -81)" opacity={0.03} /> <path d="M900.5,320c-2.16-19.76-64-29.2-138.12-21.09s-132.44,30.72-130.28,50.49c1.32,12.05,24.84,20.26,59.81,23a22.49,22.49,0,0,0,37,24.37c5.29,18.24,17.08,30.7,29.29,29.36,13.36-1.46,22.65-18.95,22.38-40.48,5.52,6.13,12.37,9.51,19.42,8.74,8.59-.94,15.57-7.84,19.45-17.79,4.66,3.66,10,5.52,15.36,4.92,6.93-.76,12.81-5.39,16.86-12.37C854.5,384.91,865.41,396.28,877,395c12.35-1.35,20.83-16.47,18.94-33.76-1-9.18-4.73-17.13-9.86-22.37C895.92,332.66,901.18,326.2,900.5,320Z" transform="translate(-208 -81)" fill="#fafafa" /> <g opacity={0.5}> <path d="M371.45,247.87l-4.92,19.52-35.32-8.9a34,34,0,0,0-41.3,24.67L277,334.28a34,34,0,0,0,24.67,41.3l35.32,8.9L332.11,404l-54.83-13.82a34,34,0,0,1-24.67-41.3l22.71-90.15A34,34,0,0,1,316.62,234Z" transform="translate(-208 -81)" fill="url(#8c715f2b-00db-4dd2-88e2-1138b3e843e3)" /> </g> <path d="M364.74,254.94l-4.4,17.45-28.11-7.08A34,34,0,0,0,290.94,290l-9.77,38.76A34,34,0,0,0,305.85,370L334,377.12l-4.4,17.45L284,383.1a34,34,0,0,1-24.67-41.3l18.56-73.67a34,34,0,0,1,41.3-24.67Z" transform="translate(-208 -81)" fill="#dbe8fc" /> <g opacity={0.5}> <path d="M331.78,544.15l168.34,42.42a45.5,45.5,0,0,0,55.24-33l81.24-322.42L380,166.49,298.77,488.91A45.5,45.5,0,0,0,331.78,544.15Z" transform="translate(-208 -81)" fill="url(#5ead7ab1-dbab-4409-921f-8190bb8e06e9)" /> </g> <path d="M381.62,202.09h161a45.5,45.5,0,0,1,45.5,45.5v314.5a0,0,0,0,1,0,0h-252a0,0,0,0,1,0,0V247.59A45.5,45.5,0,0,1,381.62,202.09Z" transform="translate(608.89 784.5) rotate(-165.86)" fill="#dbe8fc" /> <path d="M400.24,219.66h124.5a45.5,45.5,0,0,1,45.5,45.5v278.5a0,0,0,0,1,0,0H354.74a0,0,0,0,1,0,0V265.16A45.5,45.5,0,0,1,400.24,219.66Z" transform="translate(609.71 783.76) rotate(-165.86)" fill={props.primaryColor} /> <path d="M559,267.79c4.37,1.1,2.66,7.89-1.71,6.79S554.61,266.69,559,267.79Z" transform="translate(-208 -81)" fill="#fff" /> <path d="M519.8,341.45c4.37,1.1,2.66,7.89-1.71,6.79S515.43,340.35,519.8,341.45Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M522.37,396.75c4.37,1.1,2.66,7.89-1.71,6.79S518,395.65,522.37,396.75Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M486.35,461.93c4.37,1.1,2.66,7.89-1.71,6.79S482,460.82,486.35,461.93Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M422.83,452.11c4.37,1.1,2.66,7.89-1.71,6.79S418.45,451,422.83,452.11Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M457.39,253.53c4.37,1.1,2.66,7.89-1.71,6.79S453,252.43,457.39,253.53Z" transform="translate(-208 -81)" fill="#fff" /> <path d="M413,237.2c4.37,1.1,2.66,7.89-1.71,6.79S408.66,236.1,413,237.2Z" transform="translate(-208 -81)" fill="#fff" /> <path d="M493.47,282.22c5.62,1.41,3.43,10.14-2.2,8.73S487.85,280.8,493.47,282.22Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M424,365.77c5.62,1.41,3.43,10.14-2.2,8.73S418.33,364.35,424,365.77Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M490.49,519.17c6.24,1.57,3.81,11.27-2.44,9.7S484.24,517.6,490.49,519.17Z" transform="translate(-208 -81)" fill="#fafafa" /> <path d="M554.21,290.82c6.24,1.57,3.81,11.27-2.44,9.7S548,289.25,554.21,290.82Z" transform="translate(-208 -81)" fill="#fafafa" /> <rect x={388.21} y={215.32} width={216} height={63} transform="translate(709.07 526.39) rotate(-165.86)" fill="#fafafa" /> <path d="M460.81,501.9l68-270.06,77.58,19.55-68,270.06a45.5,45.5,0,0,1-55.24,33L405.57,534.9A45.5,45.5,0,0,0,460.81,501.9Z" transform="translate(-208 -81)" opacity={0.05} /> <path d="M407.48,488.46l68-270.06-77.58-19.55-68,270.06a45.5,45.5,0,0,0,33,55.24l77.58,19.55A45.5,45.5,0,0,1,407.48,488.46Z" transform="translate(-208 -81)" fill="#fff" opacity={0.1} /> <path d="M366.47,172.36c4.86-19.28,67.41-20.14,139.7-1.92s127,48.61,122.11,67.89c-3,11.76-27.39,16.66-62.4,14.57a22.49,22.49,0,0,1-40,19.06c-7.75,17.34-21.13,28.06-33,25.06-13-3.28-19.84-21.88-16.61-43.17-6.31,5.32-13.56,7.72-20.43,6-8.38-2.11-14.34-9.9-16.82-20.29-5.12,3-10.62,4.1-15.89,2.77-6.76-1.7-11.95-7.09-15-14.57-5,15.22-17.33,25-28.67,22.13-12-3-18.37-19.17-14.12-36,2.26-9,7-16.32,12.84-20.8C369.27,185.53,364.95,178.4,366.47,172.36Z" transform="translate(-208 -81)" opacity={0.03} /> <path d="M368.67,163.63c4.86-19.28,67.41-20.14,139.7-1.92s127,48.61,122.11,67.89c-3,11.76-27.39,16.66-62.4,14.57a22.49,22.49,0,0,1-40,19.06c-7.75,17.34-21.13,28.06-33,25.06-13-3.28-19.84-21.88-16.61-43.17-6.31,5.32-13.56,7.72-20.43,6-8.38-2.11-14.34-9.9-16.82-20.29-5.12,3-10.62,4.1-15.89,2.77-6.76-1.7-11.95-7.09-15-14.57-5,15.22-17.33,25-28.67,22.13-12-3-18.37-19.17-14.12-36,2.26-9,7-16.32,12.84-20.8C371.47,176.8,367.14,169.67,368.67,163.63Z" transform="translate(-208 -81)" fill="#fafafa" /> <g opacity={0.5}> <path d="M960.14,737.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L960,767.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,960.14,737.18Z" transform="translate(-208 -81)" fill={props.primaryColor} /> </g> <g opacity={0.5}> <path d="M242.14,696.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L242,726.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,242.14,696.18Z" transform="translate(-208 -81)" fill={props.primaryColor} /> </g> <g opacity={0.5}> <path d="M278.14,151.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L278,181.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,278.14,151.18Z" transform="translate(-208 -81)" fill={props.primaryColor} /> </g> <g opacity={0.5}> <path d="M834.14,107.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L834,137.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,834.14,107.18Z" transform="translate(-208 -81)" fill={props.primaryColor} /> </g> <g opacity={0.5}> <rect x={443} width={3} height={17} fill="#3ad29f" /> <rect x={651} y={81} width={3} height={17} transform="translate(534 -644) rotate(90)" fill="#3ad29f" /> </g> <g opacity={0.5}> <rect x={7} y={218} width={3} height={17} fill="#3ad29f" /> <rect x={215} y={299} width={3} height={17} transform="translate(316 10) rotate(90)" fill="#3ad29f" /> </g> <g opacity={0.5}> <rect x={568} y={722} width={3} height={17} fill="#3ad29f" /> <rect x={776} y={803} width={3} height={17} transform="translate(1381 -47) rotate(90)" fill="#3ad29f" /> </g> <g opacity={0.5}> <rect x={17} y={497} width={3} height={17} fill="#3ad29f" /> <rect x={225} y={578} width={3} height={17} transform="translate(605 279) rotate(90)" fill="#3ad29f" /> </g> <g opacity={0.5}> <rect x={203} y={522} width={3} height={17} fill="#3ad29f" /> <rect x={411} y={603} width={3} height={17} transform="translate(816 118) rotate(90)" fill="#3ad29f" /> </g> <path d="M355.09,751.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,355.09,751.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity={0.5} /> <path d="M603.09,717.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,603.09,717.89Z" transform="translate(-208 -81)" fill="#3ad29f" opacity={0.5} /> <path d="M699.09,249.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,699.09,249.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity={0.5} /> <path d="M956.09,255.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,956.09,255.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity={0.5} /> <path d="M586.09,530.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,586.09,530.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity={0.5} /> <path d="M1022.09,104.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,1022.09,104.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity={0.5} /> </svg> ); UndrawBeerCelebration.propTypes = { /** * Hex color */ primaryColor: PropTypes.string, /** * percentage */ height: PropTypes.string, /** * custom class for svg */ class: PropTypes.string }; UndrawBeerCelebration.defaultProps = { primaryColor: "#6c68fb", height: "250px", class: "" }; export default UndrawBeerCelebration;