web-components/shadow-dom
Created with Sketch.
SVG
Viewer
Dark mode
Light mode
Hide sidebar
Any license
Apache
BSD
CC Attribution
CC0
GPL
MIT
OFL
Public domain
Shadow Dom
Web Skills Flat Vectors
View collection
Send feedback
Browse all SVGs
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
Colors
Edit colors
-1px x -1px
Change dimensions
Optimize
7.14 KB
2.41 KB
-66%
Optimize options
Prettify
Prettify options
Edit
with AI
Describe a change to make
Create
Describe a new SVG to make
Wrap
Stop wrapping long lines
Clear
<?xml version="1.0" encoding="UTF-8"?> <!-- License: MIT. Made by Andreas Mehlsen: https://github.com/andreasbm/web-skills/ --> <svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>web-components/shadow-dom</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="web-components/shadow-dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill-rule="nonzero"> <rect id="mask" stroke="#6E3803" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="71" height="71" rx="14"> </rect> <g id="tree" transform="translate(8.000000, 11.000000)"> <path d="M52.9160065,27.7134696 C52.9160065,23.5889174 50.4077239,20.0502457 46.83345,18.5395152 C47.4646109,17.319363 47.8233978,15.9353717 47.8233978,14.4668109 C47.8233978,9.56304348 43.8481674,5.58781304 38.9444,5.58781304 C37.5472739,5.58781304 36.2260761,5.9114587 35.0501674,6.48627826 C34.0053761,2.74528478 30.5743174,0 26.5,0 C22.4256826,0 18.9947391,2.74528478 17.9498326,6.48627826 C16.7739239,5.91134348 15.4527261,5.58781304 14.0556,5.58781304 C9.15183261,5.58781304 5.17660217,9.56304348 5.17660217,14.4668109 C5.17660217,15.9353717 5.53527391,17.319363 6.16655,18.5395152 C2.59227609,20.0503609 0.0839934783,23.5889174 0.0839934783,27.7134696 C0.0839934783,33.05875 4.29818478,37.414313 9.58470435,37.6526978 C10.32175,40.3222848 13.1679652,42.3124348 16.569413,42.3124348 C18.4972304,42.3124348 20.246,41.6721717 21.5347065,40.63245 C22.8235283,41.6721717 24.5722978,42.3124348 26.5,42.3124348 C28.4277022,42.3124348 30.176587,41.6721717 31.4652935,40.63245 C32.7541152,41.6721717 34.5028848,42.3124348 36.430587,42.3124348 C39.8320348,42.3124348 42.67825,40.3222848 43.4152957,37.6525826 C48.7018152,37.4141978 52.9160065,33.05875 52.9160065,27.7134696 Z" id="Shape" fill="#129B12"> </path> <g id="Group" transform="translate(24.656522, 0.000000)" fill="#097C09"> <path d="M1.31082826,0.0176282609 C1.20148696,0.0241956522 1.09260652,0.0320304348 0.984417391,0.0426304348 C0.951234783,0.0458565217 0.918282609,0.0495434783 0.885330435,0.0531152174 C0.769076087,0.065673913 0.653397826,0.0801913043 0.538526087,0.0972434783 C0.516980435,0.100354348 0.495434783,0.103465217 0.474004348,0.106806522 C0.337356522,0.128121739 0.2014,0.151856522 0.066826087,0.179278261 C0.0665956522,0.179278261 0.0663652174,0.179393478 0.0661347826,0.179393478 C2.39698261,0.653397826 4.57931522,2.27681087 5.96192391,4.32307174 C6.9410413,5.77216087 8.61388261,6.60748696 10.3587348,6.48881304 C10.3703717,6.48800652 10.3818935,6.4872 10.3935304,6.48639348 C9.34885435,2.74528478 5.91779565,0 1.84347826,0 C1.7006087,0 1.55877609,0.00414782609 1.41763478,0.0108304348 C1.38191739,0.0125586957 1.34654565,0.0155543478 1.31082826,0.0176282609 Z" id="Shape"> </path> <path d="M22.1769283,18.5395152 C22.8082043,17.319363 23.1668761,15.9353717 23.1668761,14.4668109 C23.1668761,9.56304348 19.1916457,5.58781304 14.2878783,5.58781304 C13.6793,5.58781304 13.0852391,5.64933913 12.5112261,5.76616957 C16.5629609,6.58962826 19.6124196,10.1719674 19.6124196,14.4668109 C19.6124196,15.9353717 19.2537478,17.319363 18.6224717,18.5395152 C22.1967457,20.0503609 24.7050283,23.5889174 24.7050283,27.7134696 C24.7050283,33.05875 20.490837,37.4141978 15.2044326,37.6525826 C14.6003478,39.8406761 12.5789739,41.5713565 9.99672174,42.1248609 C10.5650891,42.2468761 11.1604174,42.3123196 11.7741804,42.3123196 C15.1756283,42.3123196 18.0218435,40.3221696 18.7588891,37.6524674 C24.0454087,37.4140826 28.2594848,33.0586348 28.2594848,27.7133543 C28.2594848,23.5889174 25.7514326,20.0502457 22.1769283,18.5395152 Z" id="Shape"> </path> </g> <path d="M20.1423043,39.1618152 C19.3415435,40.5199978 16.0230522,42.0386783 14.7924152,42.1249761 C14.9277957,42.1540109 15.0650196,42.1793587 15.2033957,42.2019413 C15.2144565,42.2037848 15.2255174,42.2057435 15.2366935,42.2074717 C15.376913,42.2297087 15.5185152,42.2488348 15.6616152,42.2641587 C15.6653022,42.2645043 15.6689891,42.2647348 15.6726761,42.2651957 C15.8013739,42.2787913 15.9314543,42.2885848 16.0622261,42.2963043 C16.0940261,42.2981478 16.1259413,42.2999913 16.1579717,42.3016043 C16.2942739,42.3081717 16.4312674,42.31255 16.5695283,42.31255 C18.3277457,42.31255 19.9357196,41.7787478 21.183063,40.8962978 L21.4017457,40.7372978 L20.2880543,38.9100652 L20.1423043,39.1618152 Z" id="Shape" fill="#009000"> </path> <path d="M30.9396717,41.429063 L34.7436891,35.4263522 C35.044637,34.9515413 34.9535,34.3281 34.5293848,33.9591739 C34.0764652,33.5652457 33.3954152,33.5909391 32.9734891,34.01805 L30.1719783,36.8543565 C29.8004022,37.2305413 29.1638261,36.9177261 29.2345696,36.3938326 L30.0583739,30.2900761 C30.1464,29.6379457 29.6643304,29.0473413 29.0077065,29.0029826 L28.2358652,28.9507891 C27.6558609,28.9116152 27.139687,29.3160283 27.0388717,29.8885435 L25.5683522,38.2433022 C25.4865478,38.7079739 24.8965196,38.861213 24.598913,38.4952826 L19.9934435,32.8313109 C19.6747522,32.4393413 19.1357652,32.304537 18.6701717,32.5002913 L17.8637652,32.8391457 C17.2253457,33.107487 16.9727891,33.879213 17.3290413,34.4730435 L22.0617109,42.3616326 C22.7470239,43.504013 23.0296522,44.8442217 22.8583239,46.1654196 C22.2450217,50.8959 21.4830891,55.3572326 18.3651913,58.9914196 L34.6343478,58.9914196 C31.2967304,55.1009891 30.473387,50.2628957 30.0316435,45.1613 C29.9186152,43.851163 30.2358087,42.5396435 30.9396717,41.429063 Z" id="Shape" fill="#BF6101"> </path> <path d="M34.7436891,35.4263522 C35.044637,34.9515413 34.9536152,34.3281 34.5293848,33.9591739 C34.0764652,33.5652457 33.3954152,33.5909391 32.9734891,34.01805 L31.7223435,35.2846348 L30.1719783,36.8542413 C29.8004022,37.2304261 29.1638261,36.9176109 29.2345696,36.3937174 L30.0583739,30.2899609 C30.1442109,29.6543065 29.6878348,29.0785652 29.0566739,29.0087435 L26.7402283,43.4068848 C26.7012848,43.5928457 26.6708674,43.7805348 26.6496674,43.9696065 C26.6055391,44.3630739 26.599663,44.7620717 26.634113,45.1610696 C27.076087,50.2627804 27.8994304,55.1008739 31.2370478,58.9913043 L34.6345783,58.9913043 C31.2969609,55.1008739 30.4736174,50.2627804 30.0318739,45.1611848 C29.9185,43.851163 30.2358087,42.5397587 30.9395565,41.429063 L34.7436891,35.4263522 Z" id="Shape" fill="#9A4D01"> </path> <path d="M24.8101065,6.97065217 C22.3189913,6.97065217 20.1746804,8.44912174 19.2025913,10.5758043 C18.1983565,9.86618043 16.9735957,9.44782609 15.6503239,9.44782609 C12.2459957,9.44782609 9.48619348,12.2076283 9.48619348,15.6119565 C9.48619348,16.7352109 9.78817826,17.7873761 10.3131087,18.6942522 C7.3570913,19.1487848 5.0933,21.7031543 5.0933,24.7863717 C5.0933,28.1907 7.85310217,30.9505022 11.2574304,30.9505022 C14.6617587,30.9505022 30.974237,16.5391109 30.974237,13.1347826 C30.974237,9.73045435 28.2146652,6.97065217 24.8101065,6.97065217 Z" id="Shape" fill="#28A528"> </path> </g> <rect id="mask" stroke="#6E3803" stroke-width="2" x="-1" y="-1" width="71" height="71" rx="14"> </rect> </g> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
web-components/shadow-dom
Created with Sketch.
100%
Download
SVG
Viewer
Dark mode
Light mode
Edit
Export
Rotate
Flip Y
Flip X
Colors
Edit colors
-1px x -1px
Change dimensions
Optimize
7.14 KB
2.41 KB
-66%
Optimize options
Prettify
Prettify options
Edit
with AI
Describe a change to make
Create
Describe a new SVG to make
Wrap
Stop wrapping long lines
Clear
<?xml version="1.0" encoding="UTF-8"?> <!-- License: MIT. Made by Andreas Mehlsen: https://github.com/andreasbm/web-skills/ --> <svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>web-components/shadow-dom</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="web-components/shadow-dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill-rule="nonzero"> <rect id="mask" stroke="#6E3803" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="71" height="71" rx="14"> </rect> <g id="tree" transform="translate(8.000000, 11.000000)"> <path d="M52.9160065,27.7134696 C52.9160065,23.5889174 50.4077239,20.0502457 46.83345,18.5395152 C47.4646109,17.319363 47.8233978,15.9353717 47.8233978,14.4668109 C47.8233978,9.56304348 43.8481674,5.58781304 38.9444,5.58781304 C37.5472739,5.58781304 36.2260761,5.9114587 35.0501674,6.48627826 C34.0053761,2.74528478 30.5743174,0 26.5,0 C22.4256826,0 18.9947391,2.74528478 17.9498326,6.48627826 C16.7739239,5.91134348 15.4527261,5.58781304 14.0556,5.58781304 C9.15183261,5.58781304 5.17660217,9.56304348 5.17660217,14.4668109 C5.17660217,15.9353717 5.53527391,17.319363 6.16655,18.5395152 C2.59227609,20.0503609 0.0839934783,23.5889174 0.0839934783,27.7134696 C0.0839934783,33.05875 4.29818478,37.414313 9.58470435,37.6526978 C10.32175,40.3222848 13.1679652,42.3124348 16.569413,42.3124348 C18.4972304,42.3124348 20.246,41.6721717 21.5347065,40.63245 C22.8235283,41.6721717 24.5722978,42.3124348 26.5,42.3124348 C28.4277022,42.3124348 30.176587,41.6721717 31.4652935,40.63245 C32.7541152,41.6721717 34.5028848,42.3124348 36.430587,42.3124348 C39.8320348,42.3124348 42.67825,40.3222848 43.4152957,37.6525826 C48.7018152,37.4141978 52.9160065,33.05875 52.9160065,27.7134696 Z" id="Shape" fill="#129B12"> </path> <g id="Group" transform="translate(24.656522, 0.000000)" fill="#097C09"> <path d="M1.31082826,0.0176282609 C1.20148696,0.0241956522 1.09260652,0.0320304348 0.984417391,0.0426304348 C0.951234783,0.0458565217 0.918282609,0.0495434783 0.885330435,0.0531152174 C0.769076087,0.065673913 0.653397826,0.0801913043 0.538526087,0.0972434783 C0.516980435,0.100354348 0.495434783,0.103465217 0.474004348,0.106806522 C0.337356522,0.128121739 0.2014,0.151856522 0.066826087,0.179278261 C0.0665956522,0.179278261 0.0663652174,0.179393478 0.0661347826,0.179393478 C2.39698261,0.653397826 4.57931522,2.27681087 5.96192391,4.32307174 C6.9410413,5.77216087 8.61388261,6.60748696 10.3587348,6.48881304 C10.3703717,6.48800652 10.3818935,6.4872 10.3935304,6.48639348 C9.34885435,2.74528478 5.91779565,0 1.84347826,0 C1.7006087,0 1.55877609,0.00414782609 1.41763478,0.0108304348 C1.38191739,0.0125586957 1.34654565,0.0155543478 1.31082826,0.0176282609 Z" id="Shape"> </path> <path d="M22.1769283,18.5395152 C22.8082043,17.319363 23.1668761,15.9353717 23.1668761,14.4668109 C23.1668761,9.56304348 19.1916457,5.58781304 14.2878783,5.58781304 C13.6793,5.58781304 13.0852391,5.64933913 12.5112261,5.76616957 C16.5629609,6.58962826 19.6124196,10.1719674 19.6124196,14.4668109 C19.6124196,15.9353717 19.2537478,17.319363 18.6224717,18.5395152 C22.1967457,20.0503609 24.7050283,23.5889174 24.7050283,27.7134696 C24.7050283,33.05875 20.490837,37.4141978 15.2044326,37.6525826 C14.6003478,39.8406761 12.5789739,41.5713565 9.99672174,42.1248609 C10.5650891,42.2468761 11.1604174,42.3123196 11.7741804,42.3123196 C15.1756283,42.3123196 18.0218435,40.3221696 18.7588891,37.6524674 C24.0454087,37.4140826 28.2594848,33.0586348 28.2594848,27.7133543 C28.2594848,23.5889174 25.7514326,20.0502457 22.1769283,18.5395152 Z" id="Shape"> </path> </g> <path d="M20.1423043,39.1618152 C19.3415435,40.5199978 16.0230522,42.0386783 14.7924152,42.1249761 C14.9277957,42.1540109 15.0650196,42.1793587 15.2033957,42.2019413 C15.2144565,42.2037848 15.2255174,42.2057435 15.2366935,42.2074717 C15.376913,42.2297087 15.5185152,42.2488348 15.6616152,42.2641587 C15.6653022,42.2645043 15.6689891,42.2647348 15.6726761,42.2651957 C15.8013739,42.2787913 15.9314543,42.2885848 16.0622261,42.2963043 C16.0940261,42.2981478 16.1259413,42.2999913 16.1579717,42.3016043 C16.2942739,42.3081717 16.4312674,42.31255 16.5695283,42.31255 C18.3277457,42.31255 19.9357196,41.7787478 21.183063,40.8962978 L21.4017457,40.7372978 L20.2880543,38.9100652 L20.1423043,39.1618152 Z" id="Shape" fill="#009000"> </path> <path d="M30.9396717,41.429063 L34.7436891,35.4263522 C35.044637,34.9515413 34.9535,34.3281 34.5293848,33.9591739 C34.0764652,33.5652457 33.3954152,33.5909391 32.9734891,34.01805 L30.1719783,36.8543565 C29.8004022,37.2305413 29.1638261,36.9177261 29.2345696,36.3938326 L30.0583739,30.2900761 C30.1464,29.6379457 29.6643304,29.0473413 29.0077065,29.0029826 L28.2358652,28.9507891 C27.6558609,28.9116152 27.139687,29.3160283 27.0388717,29.8885435 L25.5683522,38.2433022 C25.4865478,38.7079739 24.8965196,38.861213 24.598913,38.4952826 L19.9934435,32.8313109 C19.6747522,32.4393413 19.1357652,32.304537 18.6701717,32.5002913 L17.8637652,32.8391457 C17.2253457,33.107487 16.9727891,33.879213 17.3290413,34.4730435 L22.0617109,42.3616326 C22.7470239,43.504013 23.0296522,44.8442217 22.8583239,46.1654196 C22.2450217,50.8959 21.4830891,55.3572326 18.3651913,58.9914196 L34.6343478,58.9914196 C31.2967304,55.1009891 30.473387,50.2628957 30.0316435,45.1613 C29.9186152,43.851163 30.2358087,42.5396435 30.9396717,41.429063 Z" id="Shape" fill="#BF6101"> </path> <path d="M34.7436891,35.4263522 C35.044637,34.9515413 34.9536152,34.3281 34.5293848,33.9591739 C34.0764652,33.5652457 33.3954152,33.5909391 32.9734891,34.01805 L31.7223435,35.2846348 L30.1719783,36.8542413 C29.8004022,37.2304261 29.1638261,36.9176109 29.2345696,36.3937174 L30.0583739,30.2899609 C30.1442109,29.6543065 29.6878348,29.0785652 29.0566739,29.0087435 L26.7402283,43.4068848 C26.7012848,43.5928457 26.6708674,43.7805348 26.6496674,43.9696065 C26.6055391,44.3630739 26.599663,44.7620717 26.634113,45.1610696 C27.076087,50.2627804 27.8994304,55.1008739 31.2370478,58.9913043 L34.6345783,58.9913043 C31.2969609,55.1008739 30.4736174,50.2627804 30.0318739,45.1611848 C29.9185,43.851163 30.2358087,42.5397587 30.9395565,41.429063 L34.7436891,35.4263522 Z" id="Shape" fill="#9A4D01"> </path> <path d="M24.8101065,6.97065217 C22.3189913,6.97065217 20.1746804,8.44912174 19.2025913,10.5758043 C18.1983565,9.86618043 16.9735957,9.44782609 15.6503239,9.44782609 C12.2459957,9.44782609 9.48619348,12.2076283 9.48619348,15.6119565 C9.48619348,16.7352109 9.78817826,17.7873761 10.3131087,18.6942522 C7.3570913,19.1487848 5.0933,21.7031543 5.0933,24.7863717 C5.0933,28.1907 7.85310217,30.9505022 11.2574304,30.9505022 C14.6617587,30.9505022 30.974237,16.5391109 30.974237,13.1347826 C30.974237,9.73045435 28.2146652,6.97065217 24.8101065,6.97065217 Z" id="Shape" fill="#28A528"> </path> </g> <rect id="mask" stroke="#6E3803" stroke-width="2" x="-1" y="-1" width="71" height="71" rx="14"> </rect> </g> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
web-components/shadow-dom
Created with Sketch.
100%
Download