SVG
Viewer
DYw0lknY
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Trim Padding
Optimize
14.47 KB
9.76 KB
-33%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 640" width="100%" height="100%"> <defs> <filter id="crayon" x="-10%" y="-10%" width="120%" height="120%"> <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise"></feTurbulence> <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> </filter> <filter id="crayon-light" x="-10%" y="-10%" width="120%" height="120%"> <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" result="noise"></feTurbulence> <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> </filter> <pattern id="grass-fill" width="100" height="100" patternUnits="userSpaceOnUse"> <path d="M10,110 L20,-10 M30,110 L25,-10 M50,110 L40,-10 M70,110 L65,-10 M90,110 L85,-10" stroke="#a0e026" stroke-width="2.5" stroke-linecap="round"></path> <path d="M15,110 L25,-10 M35,110 L30,-10 M55,110 L60,-10 M75,110 L70,-10 M95,110 L100,-10" stroke="#7ac916" stroke-width="2.5" stroke-linecap="round"></path> <path d="M5,110 L15,-10 M25,110 L35,-10 M45,110 L55,-10 M65,110 L75,-10 M85,110 L95,-10" stroke="#c9fa6e" stroke-width="2" stroke-linecap="round"></path> </pattern> <pattern id="pink-wall" width="30" height="30" patternUnits="userSpaceOnUse" patternTransform="rotate(75)"> <rect width="30" height="30" fill="#fca4b3"></rect> <path d="M0,5 L30,5 M0,15 L30,15 M0,25 L30,25" stroke="#e85a5a" stroke-width="3"></path> </pattern> <pattern id="roof-dark" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(60)"> <rect width="20" height="20" fill="#4a4a4a"></rect> <path d="M0,5 L20,5 M0,15 L20,15" stroke="#1c1c1c" stroke-width="3"></path> </pattern> <pattern id="brown-trunk" width="15" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(80)"> <rect width="15" height="15" fill="#8c5032"></rect> <path d="M0,5 L15,5 M0,10 L15,10" stroke="#4a2211" stroke-width="2.5"></path> </pattern> <pattern id="green-tree" width="25" height="25" patternUnits="userSpaceOnUse" patternTransform="rotate(110)"> <rect width="25" height="25" fill="#4ab862"></rect> <path d="M0,8 L25,8 M0,20 L25,20" stroke="#1d7329" stroke-width="3"></path> </pattern> <pattern id="blue-win" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(50)"> <rect width="12" height="12" fill="#6ab0ff"></rect> <path d="M0,6 L12,6" stroke="#3388ff" stroke-width="2"></path> </pattern> <pattern id="brown-door" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(85)"> <rect width="10" height="10" fill="#9e573f"></rect> <path d="M0,5 L10,5" stroke="#522513" stroke-width="2"></path> </pattern> <pattern id="mom-dress" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(70)"> <rect width="12" height="12" fill="#ebf7e6"></rect> <path d="M0,6 L12,6" stroke="#2e541b" stroke-width="1.5"></path> </pattern> <pattern id="girl-dress" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="8" height="8" fill="#619c37"></rect> <path d="M0,4 L8,4" stroke="#467823" stroke-width="2"></path> </pattern> <pattern id="sun-scribble" width="15" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(30)"> <rect width="15" height="15" fill="#fff01c"></rect> <path d="M 0,7.5 L 15,7.5" stroke="#ffcc00" stroke-width="3"></path> </pattern> <g id="flower-blue" stroke="#4278f5" stroke-width="3" fill="none"> <circle cx="0" cy="-6" r="4"></circle> <circle cx="6" cy="-2" r="4"></circle> <circle cx="4" cy="5" r="4"></circle> <circle cx="-4" cy="5" r="4"></circle> <circle cx="-6" cy="-2" r="4"></circle> <circle cx="0" cy="0" r="3" fill="#4278f5"></circle> </g> <g id="flower-red" stroke="#f54242" stroke-width="3" fill="none"> <circle cx="0" cy="-6" r="4"></circle> <circle cx="6" cy="-2" r="4"></circle> <circle cx="4" cy="5" r="4"></circle> <circle cx="-4" cy="5" r="4"></circle> <circle cx="-6" cy="-2" r="4"></circle> <circle cx="0" cy="0" r="3" fill="#f54242"></circle> </g> </defs> <rect width="100%" height="100%" fill="#ffffff"></rect> <g filter="url(#crayon)"> <path d="M 0,440 Q 200,430 500,450 T 1000,440 L 1000,660 L 0,660 Z" fill="#ebf7c3"></path> <path d="M 0,440 Q 200,430 500,450 T 1000,440 L 1000,660 L 0,660 Z" fill="url(#grass-fill)"></path> <path d="M 0,440 Q 200,430 500,450 T 1000,440" fill="none" stroke="#a0e026" stroke-width="4"></path> </g> <g filter="url(#crayon)"> <circle cx="850" cy="115" r="45" fill="url(#sun-scribble)" stroke="#fff01c" stroke-width="4"></circle> <path d="M 830,115 C 830,95 870,95 870,115 C 870,135 830,135 830,115" fill="none" stroke="#ffcc00" stroke-width="3"></path> <g stroke="#fff01c" stroke-width="7" stroke-linecap="round"> <line x1="850" y1="60" x2="845" y2="20"></line> <line x1="895" y1="70" x2="930" y2="35"></line> <line x1="905" y1="115" x2="955" y2="110"></line> <line x1="895" y1="155" x2="935" y2="190"></line> <line x1="850" y1="170" x2="845" y2="215"></line> <line x1="800" y1="155" x2="765" y2="190"></line> <line x1="790" y1="110" x2="740" y2="105"></line> <line x1="800" y1="70" x2="760" y2="35"></line> </g> </g> <g id="house" filter="url(#crayon)"> <polygon points="80,440 340,420 320,240 90,260" fill="url(#pink-wall)"></polygon> <polygon points="80,440 340,420 320,240 90,260" fill="none" stroke="#ed6168" stroke-width="4"></polygon> <polygon points="230,140 255,135 255,175 230,165" fill="#4a4a4a" stroke="#111" stroke-width="4" stroke-linejoin="round"></polygon> <polygon points="225,135 260,130 260,120 225,125" fill="#ccc" stroke="#111" stroke-width="3"></polygon> <g stroke="#888" stroke-width="3" fill="none"> <circle cx="245" cy="105" r="7"></circle> <circle cx="250" cy="85" r="10"></circle> <circle cx="245" cy="60" r="14"></circle> <circle cx="260" cy="30" r="18"></circle> </g> <polygon points="45,270 180,140 370,230 310,250 80,265" fill="url(#roof-dark)" stroke="#111" stroke-width="5" stroke-linejoin="round"></polygon> <polygon points="120,310 180,305 190,435 130,440" fill="url(#brown-door)" stroke="#452318" stroke-width="4" stroke-linejoin="round"></polygon> <polygon points="230,260 290,255 295,315 235,320" fill="url(#blue-win)" stroke="#452318" stroke-width="4" stroke-linejoin="round"></polygon> <line x1="260" y1="258" x2="265" y2="318" stroke="#452318" stroke-width="4"></line> <line x1="232" y1="288" x2="292" y2="285" stroke="#452318" stroke-width="4"></line> </g> <circle cx="170" cy="375" r="6" fill="#fff" stroke="#452318" stroke-width="3" filter="url(#crayon-light)"></circle> <g id="tree" filter="url(#crayon)"> <polygon points="410,270 435,265 460,445 500,445 480,250 460,260" fill="url(#brown-trunk)" stroke="#4a2211" stroke-width="4"></polygon> <path d="M 370,250 C 330,230 350,150 400,130 C 410,70 480,50 520,80 C 560,50 610,100 590,150 C 640,180 620,250 570,270 C 560,310 490,300 460,270 C 440,300 390,290 370,250 Z" fill="url(#green-tree)" stroke="#1d7329" stroke-width="5" stroke-linejoin="round"></path> <path d="M 400,160 Q 430,120 460,160 T 520,130 T 560,180 T 510,230 T 450,190 T 400,230 Z" fill="none" stroke="#1d7329" stroke-width="4"></path> </g> <g id="flowers" filter="url(#crayon-light)"> <path d="M 25,395 Q 30,420 35,445 M 45,390 Q 42,420 40,445 M 65,400 Q 60,420 55,445 M 270,395 Q 275,420 280,445 M 305,390 Q 300,420 295,445 M 340,395 Q 345,420 350,445 M 370,385 Q 365,415 360,445" stroke="#499c23" stroke-width="3" fill="none"></path> <use href="#flower-blue" x="25" y="395"></use> <use href="#flower-blue" x="45" y="390"></use> <use href="#flower-blue" x="65" y="400"></use> <use href="#flower-red" x="270" y="395"></use> <use href="#flower-red" x="305" y="390"></use> <use href="#flower-blue" x="340" y="395"></use> <use href="#flower-blue" x="370" y="385"></use> </g> <g id="dog" stroke="#1f2122" stroke-linecap="round" stroke-linejoin="round" filter="url(#crayon-light)"> <path d="M 415,505 L 480,495 L 485,510 L 420,520 Z" fill="#1f2122" stroke-width="5"></path> <path d="M 475,500 L 480,480 L 495,485 L 505,475 L 500,490 L 505,495 L 485,505 Z" fill="#1f2122" stroke-width="3"></path> <path d="M 475,480 L 465,465 L 485,475" fill="#1f2122" stroke-width="2"></path> <path d="M 415,505 Q 400,480 405,465" fill="none" stroke-width="4"></path> <path d="M 425,515 L 420,545 M 440,515 L 440,545 M 465,510 L 470,540 M 480,505 L 485,535" fill="none" stroke-width="4"></path> </g> <g id="family" filter="url(#crayon-light)"> <g stroke="#336b15" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="560" cy="390" r="14" stroke-width="4"></circle> <path d="M 548,382 C 545,365 555,365 560,375 C 565,360 575,365 572,382" stroke-width="3"></path> <circle cx="555" cy="387" r="1.5" fill="#336b15" stroke="none"></circle> <circle cx="565" cy="387" r="1.5" fill="#336b15" stroke="none"></circle> <path d="M 555,395 Q 560,400 565,395" stroke-width="2.5"></path> <line x1="560" y1="404" x2="565" y2="475" stroke-width="5"></line> <line x1="565" y1="475" x2="550" y2="540" stroke-width="4"></line> <line x1="565" y1="475" x2="585" y2="535" stroke-width="4"></line> <ellipse cx="548" cy="542" rx="7" ry="3" stroke-width="3"></ellipse> <ellipse cx="587" cy="537" rx="7" ry="3" stroke-width="3"></ellipse> <line x1="562" y1="425" x2="520" y2="415" stroke-width="4"></line> <path d="M 520,415 L 510,405 M 520,415 L 510,413 M 520,415 L 512,423" stroke-width="2.5"></path> <line x1="562" y1="425" x2="630" y2="400" stroke-width="4"></line> </g> <g stroke="#6b2016" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="690" cy="280" r="18" stroke-width="5"></circle> <path d="M 675,270 L 680,255 L 685,265 L 690,250 L 695,265 L 700,255 L 705,270" stroke="#111" stroke-width="3"></path> <circle cx="682" cy="275" r="6" stroke="#e82727" stroke-width="2.5"></circle> <circle cx="698" cy="275" r="6" stroke="#e82727" stroke-width="2.5"></circle> <line x1="688" y1="275" x2="692" y2="275" stroke="#e82727" stroke-width="2.5"></line> <line x1="672" y1="275" x2="676" y2="275" stroke="#e82727" stroke-width="2.5"></line> <line x1="704" y1="275" x2="708" y2="275" stroke="#e82727" stroke-width="2.5"></line> <circle cx="682" cy="275" r="1.5" fill="#6b2016" stroke="none"></circle> <circle cx="698" cy="275" r="1.5" fill="#6b2016" stroke="none"></circle> <path d="M 682,288 Q 690,296 698,288" stroke-width="3"></path> <line x1="690" y1="298" x2="690" y2="440" stroke-width="6"></line> <line x1="690" y1="440" x2="665" y2="535" stroke-width="5"></line> <line x1="690" y1="440" x2="720" y2="535" stroke-width="5"></line> <ellipse cx="660" cy="537" rx="9" ry="4" fill="#6b2016" stroke="none"></ellipse> <ellipse cx="725" cy="537" rx="9" ry="4" fill="#6b2016" stroke="none"></ellipse> <line x1="690" y1="340" x2="630" y2="400" stroke-width="4.5"></line> <line x1="690" y1="340" x2="755" y2="395" stroke-width="4.5"></line> </g> <g stroke="#245413" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="790" cy="305" r="16" stroke-width="4.5"></circle> <path d="M 780,289 C 760,290 750,325 755,360 M 800,289 C 820,290 830,325 825,360" stroke-width="5"></path> <circle cx="783" cy="300" r="2" fill="#6b144f" stroke="none"></circle> <circle cx="797" cy="300" r="2" fill="#6b144f" stroke="none"></circle> <path d="M 782,310 Q 790,318 798,310" stroke="#6b144f" stroke-width="3"></path> <polygon points="790,321 750,460 830,460" fill="url(#mom-dress)" stroke-width="4"></polygon> <path d="M 770,390 L 810,390 M 760,425 L 820,425 M 780,330 L 765,460 M 800,330 L 815,460" stroke-width="2"></path> <line x1="775" y1="460" x2="775" y2="535" stroke-width="4"></line> <line x1="805" y1="460" x2="805" y2="535" stroke-width="4"></line> <ellipse cx="775" cy="538" rx="8" ry="4" stroke-width="3.5"></ellipse> <ellipse cx="805" cy="538" rx="8" ry="4" stroke-width="3.5"></ellipse> <line x1="790" y1="360" x2="755" y2="395" stroke-width="4.5"></line> <line x1="790" y1="360" x2="845" y2="405" stroke-width="4.5"></line> </g> <g stroke="#3e6323" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="890" cy="395" r="12" stroke-width="3.5"></circle> <path d="M 880,385 L 875,375 L 885,380 L 890,370 L 895,380 L 900,370 L 900,385" stroke-width="3"></path> <circle cx="885" cy="393" r="1.5" fill="#3e6323" stroke="none"></circle> <circle cx="895" cy="393" r="1.5" fill="#3e6323" stroke="none"></circle> <path d="M 886,400 Q 890,404 894,400" stroke-width="2"></path> <polygon points="890,407 870,490 910,490" fill="url(#girl-dress)" stroke-width="3.5"></polygon> <line x1="880" y1="490" x2="880" y2="540" stroke-width="3.5"></line> <line x1="900" y1="490" x2="900" y2="540" stroke-width="3.5"></line> <ellipse cx="880" cy="543" rx="6" ry="3" stroke-width="2.5"></ellipse> <ellipse cx="900" cy="543" rx="6" ry="3" stroke-width="2.5"></ellipse> <line x1="890" y1="430" x2="845" y2="405" stroke-width="3.5"></line> <line x1="890" y1="430" x2="935" y2="415" stroke-width="3.5"></line> <path d="M 935,415 L 945,405 M 935,415 L 947,413 M 935,415 L 943,423" stroke-width="2"></path> </g> <circle cx="630" cy="400" r="4.5" fill="#6b2016" stroke="none"></circle> <circle cx="755" cy="395" r="4.5" fill="#245413" stroke="none"></circle> <circle cx="845" cy="405" r="4" fill="#3e6323" stroke="none"></circle> </g> <g stroke="#7ac916" stroke-width="3" stroke-linecap="round" fill="none" filter="url(#crayon)"> <path d="M 60,445 L 65,420 M 85,445 L 80,415 M 105,445 L 110,425 M 135,445 L 130,420 M 215,445 L 220,415 M 315,445 L 310,420 M 345,445 L 350,425 M 415,455 L 420,430 M 435,455 L 430,425 M 475,455 L 480,430 M 515,450 L 510,425"></path> <path d="M 545,545 L 540,520 M 565,545 L 570,525 M 650,540 L 655,520 M 675,540 L 670,520 M 765,540 L 760,515 M 790,540 L 795,520 M 870,545 L 865,525 M 895,545 L 900,525" stroke="#a0e026"></path> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Trim Padding
Optimize
14.47 KB
9.76 KB
-33%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 640" width="100%" height="100%"> <defs> <filter id="crayon" x="-10%" y="-10%" width="120%" height="120%"> <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise"></feTurbulence> <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> </filter> <filter id="crayon-light" x="-10%" y="-10%" width="120%" height="120%"> <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" result="noise"></feTurbulence> <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> </filter> <pattern id="grass-fill" width="100" height="100" patternUnits="userSpaceOnUse"> <path d="M10,110 L20,-10 M30,110 L25,-10 M50,110 L40,-10 M70,110 L65,-10 M90,110 L85,-10" stroke="#a0e026" stroke-width="2.5" stroke-linecap="round"></path> <path d="M15,110 L25,-10 M35,110 L30,-10 M55,110 L60,-10 M75,110 L70,-10 M95,110 L100,-10" stroke="#7ac916" stroke-width="2.5" stroke-linecap="round"></path> <path d="M5,110 L15,-10 M25,110 L35,-10 M45,110 L55,-10 M65,110 L75,-10 M85,110 L95,-10" stroke="#c9fa6e" stroke-width="2" stroke-linecap="round"></path> </pattern> <pattern id="pink-wall" width="30" height="30" patternUnits="userSpaceOnUse" patternTransform="rotate(75)"> <rect width="30" height="30" fill="#fca4b3"></rect> <path d="M0,5 L30,5 M0,15 L30,15 M0,25 L30,25" stroke="#e85a5a" stroke-width="3"></path> </pattern> <pattern id="roof-dark" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(60)"> <rect width="20" height="20" fill="#4a4a4a"></rect> <path d="M0,5 L20,5 M0,15 L20,15" stroke="#1c1c1c" stroke-width="3"></path> </pattern> <pattern id="brown-trunk" width="15" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(80)"> <rect width="15" height="15" fill="#8c5032"></rect> <path d="M0,5 L15,5 M0,10 L15,10" stroke="#4a2211" stroke-width="2.5"></path> </pattern> <pattern id="green-tree" width="25" height="25" patternUnits="userSpaceOnUse" patternTransform="rotate(110)"> <rect width="25" height="25" fill="#4ab862"></rect> <path d="M0,8 L25,8 M0,20 L25,20" stroke="#1d7329" stroke-width="3"></path> </pattern> <pattern id="blue-win" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(50)"> <rect width="12" height="12" fill="#6ab0ff"></rect> <path d="M0,6 L12,6" stroke="#3388ff" stroke-width="2"></path> </pattern> <pattern id="brown-door" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(85)"> <rect width="10" height="10" fill="#9e573f"></rect> <path d="M0,5 L10,5" stroke="#522513" stroke-width="2"></path> </pattern> <pattern id="mom-dress" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(70)"> <rect width="12" height="12" fill="#ebf7e6"></rect> <path d="M0,6 L12,6" stroke="#2e541b" stroke-width="1.5"></path> </pattern> <pattern id="girl-dress" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="8" height="8" fill="#619c37"></rect> <path d="M0,4 L8,4" stroke="#467823" stroke-width="2"></path> </pattern> <pattern id="sun-scribble" width="15" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(30)"> <rect width="15" height="15" fill="#fff01c"></rect> <path d="M 0,7.5 L 15,7.5" stroke="#ffcc00" stroke-width="3"></path> </pattern> <g id="flower-blue" stroke="#4278f5" stroke-width="3" fill="none"> <circle cx="0" cy="-6" r="4"></circle> <circle cx="6" cy="-2" r="4"></circle> <circle cx="4" cy="5" r="4"></circle> <circle cx="-4" cy="5" r="4"></circle> <circle cx="-6" cy="-2" r="4"></circle> <circle cx="0" cy="0" r="3" fill="#4278f5"></circle> </g> <g id="flower-red" stroke="#f54242" stroke-width="3" fill="none"> <circle cx="0" cy="-6" r="4"></circle> <circle cx="6" cy="-2" r="4"></circle> <circle cx="4" cy="5" r="4"></circle> <circle cx="-4" cy="5" r="4"></circle> <circle cx="-6" cy="-2" r="4"></circle> <circle cx="0" cy="0" r="3" fill="#f54242"></circle> </g> </defs> <rect width="100%" height="100%" fill="#ffffff"></rect> <g filter="url(#crayon)"> <path d="M 0,440 Q 200,430 500,450 T 1000,440 L 1000,660 L 0,660 Z" fill="#ebf7c3"></path> <path d="M 0,440 Q 200,430 500,450 T 1000,440 L 1000,660 L 0,660 Z" fill="url(#grass-fill)"></path> <path d="M 0,440 Q 200,430 500,450 T 1000,440" fill="none" stroke="#a0e026" stroke-width="4"></path> </g> <g filter="url(#crayon)"> <circle cx="850" cy="115" r="45" fill="url(#sun-scribble)" stroke="#fff01c" stroke-width="4"></circle> <path d="M 830,115 C 830,95 870,95 870,115 C 870,135 830,135 830,115" fill="none" stroke="#ffcc00" stroke-width="3"></path> <g stroke="#fff01c" stroke-width="7" stroke-linecap="round"> <line x1="850" y1="60" x2="845" y2="20"></line> <line x1="895" y1="70" x2="930" y2="35"></line> <line x1="905" y1="115" x2="955" y2="110"></line> <line x1="895" y1="155" x2="935" y2="190"></line> <line x1="850" y1="170" x2="845" y2="215"></line> <line x1="800" y1="155" x2="765" y2="190"></line> <line x1="790" y1="110" x2="740" y2="105"></line> <line x1="800" y1="70" x2="760" y2="35"></line> </g> </g> <g id="house" filter="url(#crayon)"> <polygon points="80,440 340,420 320,240 90,260" fill="url(#pink-wall)"></polygon> <polygon points="80,440 340,420 320,240 90,260" fill="none" stroke="#ed6168" stroke-width="4"></polygon> <polygon points="230,140 255,135 255,175 230,165" fill="#4a4a4a" stroke="#111" stroke-width="4" stroke-linejoin="round"></polygon> <polygon points="225,135 260,130 260,120 225,125" fill="#ccc" stroke="#111" stroke-width="3"></polygon> <g stroke="#888" stroke-width="3" fill="none"> <circle cx="245" cy="105" r="7"></circle> <circle cx="250" cy="85" r="10"></circle> <circle cx="245" cy="60" r="14"></circle> <circle cx="260" cy="30" r="18"></circle> </g> <polygon points="45,270 180,140 370,230 310,250 80,265" fill="url(#roof-dark)" stroke="#111" stroke-width="5" stroke-linejoin="round"></polygon> <polygon points="120,310 180,305 190,435 130,440" fill="url(#brown-door)" stroke="#452318" stroke-width="4" stroke-linejoin="round"></polygon> <polygon points="230,260 290,255 295,315 235,320" fill="url(#blue-win)" stroke="#452318" stroke-width="4" stroke-linejoin="round"></polygon> <line x1="260" y1="258" x2="265" y2="318" stroke="#452318" stroke-width="4"></line> <line x1="232" y1="288" x2="292" y2="285" stroke="#452318" stroke-width="4"></line> </g> <circle cx="170" cy="375" r="6" fill="#fff" stroke="#452318" stroke-width="3" filter="url(#crayon-light)"></circle> <g id="tree" filter="url(#crayon)"> <polygon points="410,270 435,265 460,445 500,445 480,250 460,260" fill="url(#brown-trunk)" stroke="#4a2211" stroke-width="4"></polygon> <path d="M 370,250 C 330,230 350,150 400,130 C 410,70 480,50 520,80 C 560,50 610,100 590,150 C 640,180 620,250 570,270 C 560,310 490,300 460,270 C 440,300 390,290 370,250 Z" fill="url(#green-tree)" stroke="#1d7329" stroke-width="5" stroke-linejoin="round"></path> <path d="M 400,160 Q 430,120 460,160 T 520,130 T 560,180 T 510,230 T 450,190 T 400,230 Z" fill="none" stroke="#1d7329" stroke-width="4"></path> </g> <g id="flowers" filter="url(#crayon-light)"> <path d="M 25,395 Q 30,420 35,445 M 45,390 Q 42,420 40,445 M 65,400 Q 60,420 55,445 M 270,395 Q 275,420 280,445 M 305,390 Q 300,420 295,445 M 340,395 Q 345,420 350,445 M 370,385 Q 365,415 360,445" stroke="#499c23" stroke-width="3" fill="none"></path> <use href="#flower-blue" x="25" y="395"></use> <use href="#flower-blue" x="45" y="390"></use> <use href="#flower-blue" x="65" y="400"></use> <use href="#flower-red" x="270" y="395"></use> <use href="#flower-red" x="305" y="390"></use> <use href="#flower-blue" x="340" y="395"></use> <use href="#flower-blue" x="370" y="385"></use> </g> <g id="dog" stroke="#1f2122" stroke-linecap="round" stroke-linejoin="round" filter="url(#crayon-light)"> <path d="M 415,505 L 480,495 L 485,510 L 420,520 Z" fill="#1f2122" stroke-width="5"></path> <path d="M 475,500 L 480,480 L 495,485 L 505,475 L 500,490 L 505,495 L 485,505 Z" fill="#1f2122" stroke-width="3"></path> <path d="M 475,480 L 465,465 L 485,475" fill="#1f2122" stroke-width="2"></path> <path d="M 415,505 Q 400,480 405,465" fill="none" stroke-width="4"></path> <path d="M 425,515 L 420,545 M 440,515 L 440,545 M 465,510 L 470,540 M 480,505 L 485,535" fill="none" stroke-width="4"></path> </g> <g id="family" filter="url(#crayon-light)"> <g stroke="#336b15" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="560" cy="390" r="14" stroke-width="4"></circle> <path d="M 548,382 C 545,365 555,365 560,375 C 565,360 575,365 572,382" stroke-width="3"></path> <circle cx="555" cy="387" r="1.5" fill="#336b15" stroke="none"></circle> <circle cx="565" cy="387" r="1.5" fill="#336b15" stroke="none"></circle> <path d="M 555,395 Q 560,400 565,395" stroke-width="2.5"></path> <line x1="560" y1="404" x2="565" y2="475" stroke-width="5"></line> <line x1="565" y1="475" x2="550" y2="540" stroke-width="4"></line> <line x1="565" y1="475" x2="585" y2="535" stroke-width="4"></line> <ellipse cx="548" cy="542" rx="7" ry="3" stroke-width="3"></ellipse> <ellipse cx="587" cy="537" rx="7" ry="3" stroke-width="3"></ellipse> <line x1="562" y1="425" x2="520" y2="415" stroke-width="4"></line> <path d="M 520,415 L 510,405 M 520,415 L 510,413 M 520,415 L 512,423" stroke-width="2.5"></path> <line x1="562" y1="425" x2="630" y2="400" stroke-width="4"></line> </g> <g stroke="#6b2016" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="690" cy="280" r="18" stroke-width="5"></circle> <path d="M 675,270 L 680,255 L 685,265 L 690,250 L 695,265 L 700,255 L 705,270" stroke="#111" stroke-width="3"></path> <circle cx="682" cy="275" r="6" stroke="#e82727" stroke-width="2.5"></circle> <circle cx="698" cy="275" r="6" stroke="#e82727" stroke-width="2.5"></circle> <line x1="688" y1="275" x2="692" y2="275" stroke="#e82727" stroke-width="2.5"></line> <line x1="672" y1="275" x2="676" y2="275" stroke="#e82727" stroke-width="2.5"></line> <line x1="704" y1="275" x2="708" y2="275" stroke="#e82727" stroke-width="2.5"></line> <circle cx="682" cy="275" r="1.5" fill="#6b2016" stroke="none"></circle> <circle cx="698" cy="275" r="1.5" fill="#6b2016" stroke="none"></circle> <path d="M 682,288 Q 690,296 698,288" stroke-width="3"></path> <line x1="690" y1="298" x2="690" y2="440" stroke-width="6"></line> <line x1="690" y1="440" x2="665" y2="535" stroke-width="5"></line> <line x1="690" y1="440" x2="720" y2="535" stroke-width="5"></line> <ellipse cx="660" cy="537" rx="9" ry="4" fill="#6b2016" stroke="none"></ellipse> <ellipse cx="725" cy="537" rx="9" ry="4" fill="#6b2016" stroke="none"></ellipse> <line x1="690" y1="340" x2="630" y2="400" stroke-width="4.5"></line> <line x1="690" y1="340" x2="755" y2="395" stroke-width="4.5"></line> </g> <g stroke="#245413" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="790" cy="305" r="16" stroke-width="4.5"></circle> <path d="M 780,289 C 760,290 750,325 755,360 M 800,289 C 820,290 830,325 825,360" stroke-width="5"></path> <circle cx="783" cy="300" r="2" fill="#6b144f" stroke="none"></circle> <circle cx="797" cy="300" r="2" fill="#6b144f" stroke="none"></circle> <path d="M 782,310 Q 790,318 798,310" stroke="#6b144f" stroke-width="3"></path> <polygon points="790,321 750,460 830,460" fill="url(#mom-dress)" stroke-width="4"></polygon> <path d="M 770,390 L 810,390 M 760,425 L 820,425 M 780,330 L 765,460 M 800,330 L 815,460" stroke-width="2"></path> <line x1="775" y1="460" x2="775" y2="535" stroke-width="4"></line> <line x1="805" y1="460" x2="805" y2="535" stroke-width="4"></line> <ellipse cx="775" cy="538" rx="8" ry="4" stroke-width="3.5"></ellipse> <ellipse cx="805" cy="538" rx="8" ry="4" stroke-width="3.5"></ellipse> <line x1="790" y1="360" x2="755" y2="395" stroke-width="4.5"></line> <line x1="790" y1="360" x2="845" y2="405" stroke-width="4.5"></line> </g> <g stroke="#3e6323" stroke-linecap="round" stroke-linejoin="round" fill="none"> <circle cx="890" cy="395" r="12" stroke-width="3.5"></circle> <path d="M 880,385 L 875,375 L 885,380 L 890,370 L 895,380 L 900,370 L 900,385" stroke-width="3"></path> <circle cx="885" cy="393" r="1.5" fill="#3e6323" stroke="none"></circle> <circle cx="895" cy="393" r="1.5" fill="#3e6323" stroke="none"></circle> <path d="M 886,400 Q 890,404 894,400" stroke-width="2"></path> <polygon points="890,407 870,490 910,490" fill="url(#girl-dress)" stroke-width="3.5"></polygon> <line x1="880" y1="490" x2="880" y2="540" stroke-width="3.5"></line> <line x1="900" y1="490" x2="900" y2="540" stroke-width="3.5"></line> <ellipse cx="880" cy="543" rx="6" ry="3" stroke-width="2.5"></ellipse> <ellipse cx="900" cy="543" rx="6" ry="3" stroke-width="2.5"></ellipse> <line x1="890" y1="430" x2="845" y2="405" stroke-width="3.5"></line> <line x1="890" y1="430" x2="935" y2="415" stroke-width="3.5"></line> <path d="M 935,415 L 945,405 M 935,415 L 947,413 M 935,415 L 943,423" stroke-width="2"></path> </g> <circle cx="630" cy="400" r="4.5" fill="#6b2016" stroke="none"></circle> <circle cx="755" cy="395" r="4.5" fill="#245413" stroke="none"></circle> <circle cx="845" cy="405" r="4" fill="#3e6323" stroke="none"></circle> </g> <g stroke="#7ac916" stroke-width="3" stroke-linecap="round" fill="none" filter="url(#crayon)"> <path d="M 60,445 L 65,420 M 85,445 L 80,415 M 105,445 L 110,425 M 135,445 L 130,420 M 215,445 L 220,415 M 315,445 L 310,420 M 345,445 L 350,425 M 415,455 L 420,430 M 435,455 L 430,425 M 475,455 L 480,430 M 515,450 L 510,425"></path> <path d="M 545,545 L 540,520 M 565,545 L 570,525 M 650,540 L 655,520 M 675,540 L 670,520 M 765,540 L 760,515 M 790,540 L 795,520 M 870,545 L 865,525 M 895,545 L 900,525" stroke="#a0e026"></path> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download