Skip to content

Instantly share code, notes, and snippets.

@kadikraman

kadikraman/yummy.tsx

Created June 12, 2024 13:40
Show Gist options
  • Save kadikraman/927b3ed3e777409aac7c9f2aa3d0c8e5 to your computer and use it in GitHub Desktop.
Save kadikraman/927b3ed3e777409aac7c9f2aa3d0c8e5 to your computer and use it in GitHub Desktop.
Download ZIP
Yum
Raw
yummy.tsx
import {
Canvas,
Skia,
Image as SkiaImage,
} from '@shopify/react-native-skia';
import { useEffect, useState } from 'react';
const data = `<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path style="fill:#FFFFFF;" d="M256,512c-68.38,0-132.667-26.629-181.019-74.981C26.629,388.668,0,324.38,0,256 S26.629,123.333,74.981,74.981C123.333,26.629,187.62,0,256,0s132.668,26.629,181.019,74.981C485.371,123.333,512,187.62,512,256 s-26.629,132.668-74.981,181.019C388.668,485.371,324.38,512,256,512z"/>
</g>
<g>
<g>
<circle style="fill:#E05D4F;" cx="256" cy="256" r="246.376"/>
</g>
<g>
<circle style="fill:#F7EDE5;" cx="38.745" cy="248.915" r="10.689"/>
</g>
<g>
<circle style="fill:#F7EDE5;" cx="467.681" cy="234.745" r="10.689"/>
</g>
<g>
<circle style="fill:#F7EDE5;" cx="253.979" cy="57.425" r="10.689"/>
</g>
<g>
<g>
<g>
<g>
<path style="fill:#F7EDE5;" d="M334.848,164.234c0,0,7.111,21.32,3.561,39.984c0,0.023-0.012,0.046-0.012,0.07 c-1.079,25.594-23.982,32.702-23.982,32.702s34.653,44.528,38.203,62.287c3.561,17.771,11.553,44.427,11.553,44.427 l-223.895-1.775c0,0,3.551-55.184,43.039-103.754c0,0-26.22-14.365-31.405-30.801c-0.847-2.668-1.496-5.243-1.868-7.598 c-2.656-16.889,9.779-34.648,9.779-34.648s7.867-16.647,6.081-32.643c-1.775-15.996-2.348-20-5.897-32.435 c-3.561-12.435-14.221-21.483,0-29.487c14.21-7.992,9.77-3.921,23.098,14.743c13.316,18.652,31.452,28.504,31.452,28.504 s10.178-13.176,21.232-14c6.333-0.464,13.073-0.754,18.594-0.464c0.174,0,0.337,0.011,0.51,0.023 c15.103,0.893,31.98,4.443,31.98,4.443s27.549-19.545,37.316-30.205c9.779-10.66,28.431-17.771,40.877-13.328 c12.435,4.443,11.542,19.545,7.099,32.873c-4.443,13.328-7.099,41.759-15.103,52.419 C349.069,156.242,334.848,164.234,334.848,164.234z"/>
</g>
<g>
<g>
<path style="fill:#BB91FF;" d="M177.17,239.404c1.21-1.765,3.461-2.474,5.463-1.716c6.509,2.464,23.909,7.096,62.283,6.805 c41.285-0.313,62.752-5.332,69.894-7.406c1.729-0.502,3.583,0.05,4.768,1.405l3.861,4.412 c2.342,2.676,0.931,6.88-2.552,7.599c-14.335,2.958-46.585,6.137-73.405,7.021c-27.371,0.902-57.815-2.763-71.053-5.878 c-3.176-0.747-4.604-4.449-2.759-7.14L177.17,239.404z"/>
</g>
<g>
<g>
<path style="fill:#FFC569;" d="M235.787,99.81c-7.853,26.575-30.611,98.91-47.338,105.985 c-12.62,5.348-27.189,3.666-36.539,1.578c-0.847-2.668-1.496-5.243-1.868-7.598c-2.656-16.889,9.779-34.648,9.779-34.648 s-12.435-11.553-14.221-27.549c-1.775-15.996-1.775-33.766-5.324-46.201c-3.561-12.435-7.111-36.423,7.11-44.427 c14.21-7.992,32.873,7.111,46.201,25.774c13.316,18.652,21.32,29.312,21.32,29.312S224.733,100.634,235.787,99.81z"/>
</g>
<g>
<path style="fill:#FFC569;" d="M372.164,93.152c-4.443,13.328-7.099,41.759-15.103,52.419 c-7.992,10.672-22.213,18.664-22.213,18.664s7.111,21.32,3.561,39.984c0,0.023-0.012,0.046-0.012,0.07 c-14.917,3.027-34.752,6.159-41.353,3.086c-11.066-5.127-25.67-15.799-34.752-47.385 c-5.255-18.269-7.203-43.023-7.911-60.643c0.174,0,0.337,0.011,0.51,0.023c15.103,0.893,31.98,4.443,31.98,4.443 s27.549-19.545,37.316-30.205c9.779-10.66,28.431-17.771,40.877-13.328C377.499,64.721,376.606,79.824,372.164,93.152z"/>
</g>
<g>
<g>
<ellipse transform="matrix(0.9239 -0.3827 0.3827 0.9239 -53.6068 131.0325)" style="fill:#E05D4F;" cx="302.569" cy="200.266" rx="20.929" ry="20.929"/>
</g>
<g>
<path style="fill:#E05D4F;" d="M194.075,212.21c0.162,0.58,0.348,1.148,0.557,1.694c-3.491,2.587-7.818,4.13-12.504,4.13 c-11.553,0-20.926-9.372-20.926-20.926c0-11.565,9.372-20.926,20.926-20.926c8.491,0,15.799,5.046,19.07,12.307 C195.618,196.087,191.651,203.638,194.075,212.21z"/>
</g>
</g>
<g>
<path style="fill:#E05D4F;" d="M170.292,140.492c-2.421,2.846-7.042,1.824-8.015-1.784 c-1.621-6.011-3.646-14.536-4.215-21.396c-0.989-11.938-8.348-48.637-1.631-51.457c6.717-2.819,39.195,35.547,39.374,41.792 c0.179,6.245-7.7,8.69-12.308,15.508C180.58,127.472,174.82,135.17,170.292,140.492z"/>
</g>
<g>
<path style="fill:#E05D4F;" d="M335.085,151.61c2.039,3.131,6.753,2.705,8.177-0.749c2.373-5.756,5.467-13.954,6.904-20.686 c2.5-11.715,14.47-47.179,8.167-50.831c-6.304-3.651-43.4,30.27-44.373,36.441c-0.973,6.171,6.531,9.6,10.234,16.948 C326.538,137.386,331.271,145.755,335.085,151.61z"/>
</g>
<g>
<g>
<g>
<ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 -7.2502 320.1941)" style="fill:#412945;" cx="198.666" cy="164.678" rx="9.921" ry="9.921"/>
</g>
<g>
<ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 56.1183 398.4868)" style="fill:#412945;" cx="279.814" cy="163.789" rx="9.921" ry="9.921"/>
</g>
</g>
<g>
<path style="fill:#412945;" d="M274.304,209.897c-0.781-0.148-1.536,0.373-1.681,1.158 c-0.019,0.103-2.062,10.325-16.333,13.065c-13.399,2.583-22.521-12.194-23.535-13.921 c7.976-3.634,21.26-18.409,18.184-23.162c-3.258-5.035-14.216-4.739-14.216-4.739s-21.62-0.592-24.285,5.923 c-2.483,6.068,9.42,22.406,17.287,22.705c-1.173,2.536-5.487,10.87-12.367,12.926c-7.699,2.312-17.802-0.972-21.378-10.466 c-0.189-0.493-0.363-1.021-0.517-1.57c-2.347-8.3,1.928-15.707,6.896-22.473c1.602-2.178,3.312-4.327,5.121-6.601 l1.054-1.326c5.071-6.399,9.136-12.284,11.826-16.178c1.59-2.302,3.098-4.484,3.636-5.025 c0.499-0.227,0.846-0.73,0.846-1.314c0-0.797-0.647-1.444-1.444-1.444c-1.17,0-1.736,0.818-5.414,6.142 c-2.669,3.863-6.703,9.701-11.713,16.025l-1.051,1.322c-1.747,2.196-3.553,4.466-5.188,6.689 c-5.403,7.358-10.032,15.475-7.349,24.965c0.178,0.632,0.379,1.244,0.597,1.813c3.319,8.809,11.452,13.033,19.157,13.032 c1.973,0,3.919-0.277,5.748-0.826c6.93-2.071,11.411-9.096,13.387-12.892c3.361,4.919,12.348,15.706,25.261,13.229 c16.186-3.109,18.536-14.878,18.628-15.377C275.607,210.794,275.089,210.042,274.304,209.897z"/>
<g>
<path style="fill:#412945;" d="M230.501,237.676c-8.451,0-13.442-7.767-13.658-8.11c-0.425-0.675-0.222-1.566,0.453-1.991 c0.673-0.423,1.564-0.223,1.99,0.451c0.069,0.109,4.705,7.257,12.004,6.735c7.437-0.532,11.837-8.085,11.88-8.161 c0.397-0.692,1.281-0.931,1.97-0.537c0.693,0.396,0.933,1.277,0.538,1.969c-0.21,0.366-5.225,8.969-14.182,9.609 C231.159,237.664,230.827,237.676,230.501,237.676z"/>
</g>
</g>
</g>
<g>
<path style="fill:#412945;" d="M151.911,208.817c-0.512,0-1.009-0.274-1.271-0.757c-7.928-14.646,1.499-31.887,7.131-42.188 l0.782-1.434c5.508-10.137,8.764-18.975,8.797-19.063c0.272-0.75,1.106-1.132,1.852-0.859 c0.749,0.275,1.133,1.103,0.859,1.852c-0.033,0.09-3.356,9.115-8.97,19.449l-0.786,1.44 c-5.697,10.419-14.305,26.165-7.125,39.429c0.38,0.701,0.118,1.577-0.583,1.957 C152.379,208.761,152.143,208.817,151.911,208.817z"/>
</g>
<g>
<path style="fill:#412945;" d="M338.398,205.732c-0.103,0-0.21-0.011-0.315-0.035c-0.778-0.173-1.269-0.945-1.095-1.723 c3.422-15.359-0.883-34.566-3.397-39.032c-2.657-4.714-8.378-16.164-8.62-16.649c-0.356-0.713-0.067-1.58,0.647-1.937 c0.712-0.356,1.58-0.068,1.936,0.646c0.059,0.118,5.932,11.871,8.553,16.523c2.755,4.89,7.335,24.764,3.7,41.076 C339.656,205.274,339.06,205.732,338.398,205.732z"/>
</g>
</g>
<g>
<ellipse transform="matrix(0.1602 -0.9871 0.9871 0.1602 -72.9387 466.0421)" style="fill:#FFC569;" cx="237.414" cy="275.886" rx="19.843" ry="19.843"/>
</g>
</g>
</g>
<g>
<path style="fill:#F8BDFF;" d="M430.661,182.689c-10.982-2.856-23.656,11.742-37.681,43.383 c-7.878,17.774-14.025,36.184-16.475,43.842c-40.99,5.763-94.522,11.388-143.279,10.542 c-35.929-0.624-70.349-3.08-98.102-5.705c-6.738-21.34-27.944-81.819-51.877-81.819c-0.328,0-0.661,0.011-0.991,0.035 c-4.438,0.311-7.954,2.329-10.45,5.997c-10.26,15.079-0.279,54.915,3.672,68.846c-2.337-0.334-3.582-0.524-3.582-0.524 s16.462,160.507,56.795,181.908c40.333,21.401,222.24,26.34,258.457-9.877c36.217-36.217,57.402-180.777,57.402-180.777 s-1.042,0.214-3.001,0.597C445.195,236.921,450.824,187.931,430.661,182.689z M78.62,268.252 c-3.515-12.277-14.193-53.311-4.427-67.664c2.001-2.941,4.705-4.492,8.266-4.742c0.278-0.019,0.556-0.029,0.834-0.029 c21.317,0,41.673,56.876,48.678,78.632C107.222,272.054,88.151,269.573,78.62,268.252z M379.657,269.468 c9.26-29.007,32.338-88.649,50.276-83.985c16.683,4.338,12.88,48.726,8.61,74.235 C428.636,261.614,407.177,265.533,379.657,269.468z"/>
<g>
<g>
<path style="fill:#412945;" d="M229.869,304.009c-100.26,0-155.077-11.335-155.673-11.461 c-0.78-0.165-1.278-0.931-1.114-1.711c0.164-0.779,0.929-1.283,1.712-1.113c0.652,0.137,66.616,13.764,186.415,11.037 c119.747-2.73,178.423-19.601,179.002-19.771c0.758-0.223,1.567,0.212,1.792,0.977c0.225,0.765-0.213,1.567-0.978,1.792 c-0.582,0.171-59.564,17.148-179.751,19.888C250.361,303.896,239.885,304.009,229.869,304.009z"/>
</g>
<path style="fill:#412945;" d="M404.531,363.3c-0.387-0.698-1.265-0.951-1.962-0.563l-5.834,3.231l-12.751-21.289 l13.091-7.079c0.701-0.379,0.962-1.255,0.583-1.956c-0.38-0.702-1.254-0.962-1.957-0.583l-13.202,7.139l-14.263-23.814 l13.111-7.071c0.702-0.378,0.964-1.254,0.586-1.956c-0.38-0.703-1.255-0.963-1.956-0.586l-13.226,7.133l-4.508-7.527 c-0.411-0.685-1.297-0.906-1.98-0.496c-0.684,0.409-0.907,1.296-0.497,1.98l4.441,7.415l-36.884,19.892l-15.684-27.384 c-0.397-0.692-1.28-0.929-1.97-0.535c-0.693,0.396-0.931,1.279-0.536,1.97l15.647,27.32l-42.759,23.061l-12.377-24.071 l30.087-15.13c0.712-0.359,0.999-1.226,0.641-1.939c-0.359-0.712-1.227-1-1.938-0.641l-30.11,15.142l-12.678-24.658 c-0.364-0.709-1.238-0.986-1.944-0.624c-0.71,0.365-0.989,1.235-0.624,1.944l12.666,24.635l-45.494,22.878l-13.813-26.523 l19.598-10.225c0.707-0.369,0.98-1.241,0.612-1.948c-0.368-0.707-1.242-0.978-1.948-0.612l-19.595,10.224l-5.486-10.533 c-0.368-0.707-1.239-0.982-1.947-0.614c-0.707,0.368-0.981,1.24-0.613,1.947l5.486,10.534l-42.19,22.013l-19.23-35.288 c-0.383-0.701-1.261-0.957-1.959-0.577c-0.7,0.381-0.959,1.258-0.577,1.958l19.205,35.243l-34.967,18.244L110.632,352.2 c-0.403-0.688-1.289-0.918-1.975-0.515c-0.688,0.404-0.918,1.288-0.515,1.976l12.121,20.659l-14.002,7.305 c-0.707,0.369-0.98,1.241-0.612,1.948c0.257,0.493,0.76,0.776,1.281,0.776c0.226,0,0.454-0.053,0.667-0.164l14.129-7.372 l14.439,24.609l-15.632,7.861c-0.712,0.359-0.999,1.226-0.641,1.938c0.254,0.504,0.762,0.796,1.29,0.796 c0.218,0,0.44-0.05,0.648-0.155l15.8-7.945l15.847,27.01l-6.933,3.739c-0.702,0.378-0.964,1.254-0.585,1.956 c0.261,0.484,0.758,0.759,1.272,0.759c0.232,0,0.466-0.056,0.684-0.173l7.025-3.789l1.365,2.326 c0.269,0.458,0.751,0.713,1.246,0.713c0.248,0,0.5-0.064,0.729-0.198c0.688-0.404,0.918-1.288,0.515-1.976l-1.312-2.236 l32.802-17.691l13.378,24.549l-10.924,5.908c-0.701,0.379-0.962,1.255-0.583,1.956c0.261,0.483,0.758,0.758,1.271,0.758 c0.232,0,0.467-0.056,0.686-0.174l10.96-5.927c0.278,0.358,0.694,0.567,1.131,0.567c0.234,0,0.471-0.057,0.69-0.177 c0.628-0.342,0.897-1.083,0.67-1.737l40.254-21.768l12.177,23.381l-7.312,4.05c-0.697,0.386-0.95,1.265-0.564,1.962 c0.264,0.476,0.757,0.745,1.264,0.745c0.237,0,0.477-0.058,0.698-0.181l7.479-4.142c0.206,0.108,0.434,0.173,0.668,0.173 c0.225,0,0.453-0.053,0.666-0.164c0.46-0.24,0.732-0.692,0.768-1.174l44.326-24.548l6.03,11.728 c0.256,0.498,0.761,0.784,1.285,0.784c0.223,0,0.448-0.052,0.659-0.16c0.71-0.365,0.989-1.235,0.624-1.944l-6.071-11.807 l44.954-24.895l13.622,23.784c0.267,0.466,0.754,0.727,1.254,0.727c0.243,0,0.491-0.062,0.716-0.191 c0.693-0.396,0.931-1.279,0.536-1.97l-13.602-23.748l37.698-20.877l1.915,3.197c0.271,0.452,0.749,0.702,1.24,0.702 c0.253,0,0.509-0.066,0.741-0.205c0.684-0.409,0.907-1.296,0.497-1.98l-1.864-3.113l5.748-3.183 C404.665,364.875,404.918,363.997,404.531,363.3z M365.692,319.758l14.265,23.816l-37.387,20.217l-13.811-24.115 L365.692,319.758z M326.216,341.048l13.813,24.117l-43.954,23.769l-12.733-24.763L326.216,341.048z M293.534,390.308 l-44.513,24.071l-12.889-24.747l44.668-24.09L293.534,390.308z M267.065,338.828l12.414,24.145l-44.681,24.098L221.585,361.7 L267.065,338.828z M232.257,388.441l-40.814,22.012l-14.37-26.369l41.932-21.087L232.257,388.441z M203.878,333.952 l13.793,26.484l-41.981,21.111l-13.955-25.608L203.878,333.952z M124.289,375.477l34.886-18.202l13.934,25.57l-34.36,17.279 L124.289,375.477z M156.019,429.557l-15.805-26.938l34.278-17.238l14.409,26.442L156.019,429.557z M206.201,437.534 l-13.376-24.546l40.766-21.986l12.89,24.75L206.201,437.534z M262.519,440.296l-12.164-23.356l44.5-24.064l11.811,22.971 L262.519,440.296z M309.193,414.448l-11.798-22.945l44.069-23.831l12.568,21.944L309.193,414.448z M356.559,388.216 l-12.554-21.919l37.437-20.244l12.766,21.314L356.559,388.216z"/>
</g>
</g>
</g>
<g>
<g>
<path style="fill:#F7EDE5;" d="M100.325,132.782c0,0-6.987-32.018-22.584-23.155c-15.596,8.863,13.338,61.457,13.338,61.457 s54.737-27.639,42.558-47.433C121.459,103.858,100.325,132.782,100.325,132.782z"/>
</g>
<g>
<path style="fill:#F7EDE5;" d="M404.156,129.582c0,0-27.302-18.126-32.331-0.906c-5.029,17.219,52.353,34.843,52.353,34.843 s20.064-57.944-2.458-63.68C399.199,94.104,404.156,129.582,404.156,129.582z"/>
</g>
<g>
<path style="fill:#F7EDE5;" d="M438.557,337.953c0,0-27.302-18.126-32.332-0.906c-5.029,17.219,52.353,34.843,52.353,34.843 s20.064-57.944-2.458-63.68C433.6,302.475,438.557,337.953,438.557,337.953z"/>
</g>
<g>
<path style="fill:#F7EDE5;" d="M72.391,339.744c0,0-2.139-32.702-18.881-26.261c-16.743,6.441,4.033,62.759,4.033,62.759 s58.244-19.175,49.151-40.563C97.599,314.291,72.391,339.744,72.391,339.744z"/>
</g>
</g>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
`;
const svgToPngBase64 = (svgString) => {
return new Promise((res, rej) => {
var image = new Image();
let xml = window.btoa(unescape(encodeURIComponent(svgString)));
image.src = "data:image/svg+xml;base64," + xml;
let url = "";
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
url = canvas.toDataURL("image/" + "png");
res(url);
};
});
};
export const Component = () => {
const [img, setImg] = useState();
useEffect(() => {
const loadImage = async () => {
const result = await svgToPngBase64(data);
const imgString = Skia.Data.fromBase64(result.replace("data:image/png;base64,", ""));
const image = Skia.Image.MakeImageFromEncoded(imgString);
setImg(image)
console.log(result);
}
loadImage();
}, [])
return (
<Canvas style={{ flex: 1 }}>
{img ?
<SkiaImage image={img} fit="contain" x={0} y={0} width={600} height={600} color={"red"} /> : null }
</Canvas>
);
};
export default Component;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment