codepens/draggable-plugin-hello-kitty/dist/index.html

137 lines
21 KiB
HTML
Raw Normal View History

2023-10-06 23:12:53 +02:00
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Draggable plugin Hello Kitty</title>
<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet"> <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Drag the accessories around to dress Hello Kitty</h1>
<svg viewBox="0 0 1280 798" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<g transform="translate(0 -2.018)">
<g id="kitty" transform="translate(-205.251 -179.567)">
<path d="M814.599 537.236s-26.83 59.85-18.082 73.419c9.546 14.806 9.927 13.154 17.792 14.774 12.676 2.61 34.064-1.645 33.937-1.67l.233-30.656-.233 30.656s33.545 3.472 38.742 1.327c2.786-1.149 9.194-6.648 12.343-14.317 2.957-7.204 2.808-16.437 1.012-22.379-3.707-12.268-17.73-50.045-17.73-50.045-23.768 3.302-46.47 3.035-68.014-1.109z" fill="#fff" stroke="#000" stroke-width="4.5"/>
<path d="M808.064 536.983s-10.107 12.462-16.013 13.65c-4.637.934-13.232-.875-14.938 5.026-.894 3.094 3.616 9.767 3.616 9.767-3.21.379-7.131 13.458-1.674 16.504 3.612 2.017 13.059 7.317 16.407 3.226 5.849-7.148 18.688-46.109 18.688-46.109l-6.086-2.064zM888.706 536.316s10.107 12.462 16.013 13.65c4.637.934 13.232-.875 14.938 5.026.894 3.094-3.616 9.767-3.616 9.767 3.21.379 7.131 13.458 1.674 16.504-3.612 2.017-13.059 7.317-16.407 3.226-5.849-7.148-18.688-46.11-18.688-46.11l6.086-2.063z" fill="#fff" stroke="#000" stroke-width="4.5"/>
<path d="M846.419 421.648c50.704 0 91.873 23.194 91.873 60.536 0 37.341-42.137 56.376-92.84 56.376-50.704 0-90.897-19.035-90.897-56.376 0-37.342 41.16-60.536 91.864-60.536z" fill="#fff" stroke="#060000" stroke-width="3.65" transform="matrix(.89619 0 0 1.01801 90.55 -8.824)"/>
<path id="ear-2" d="M775.94 452.914s-5.537-35.201 5.516-39.335c11.052-4.134 36.772 12.865 36.772 12.865.671 34.623-14.452 41.64-42.288 26.47z" fill="#fff" stroke="#060000" stroke-width="3.5"/>
<ellipse cx="801.684" cy="446.328" rx="23.033" ry="22.78" fill="#fff"/>
<path d="M922.7 451.887s5.537-35.201-5.516-39.335c-11.052-4.134-36.772 12.865-36.772 12.865-1.584 29.525 14.696 35.464 42.288 26.47z" fill="#fff" stroke="#060000" stroke-width="3.5" id="ear-1"/>
<ellipse cx="808.458" cy="495.715" rx="5.086" ry="7.1" class="iris" id="eye-2" transform="translate(.94 1.992)"/>
<ellipse id="nose" cx="849.266" cy="512.63" rx="9.543" ry="6.942" fill="#fad426" stroke="#000" stroke-width="2"/>
<ellipse cx="808.458" cy="495.715" rx="5.086" ry="7.1" class="iris" id="eye-1" transform="translate(80.154 2.088)"/>
<path d="M780.71 489.032s-16.438-1.742-20.263-.524M915.46 486.213s16.438-1.742 20.263-.524M780.351 504.308s-16.438-1.742-20.263-.524M915.82 501.49s16.438-1.742 20.263-.524M784.296 517.187s-16.438-1.742-20.263-.524M911.88 514.369s16.438-1.742 20.263-.524" fill="none" stroke="#000" stroke-width="4.5"/>
<ellipse cx="801.684" cy="446.328" rx="23.033" ry="22.78" fill="#fff" transform="translate(94.738 -2.024)"/>
</g>
<g id="p-bow" class="drag" transform="translate(626.641 319.982)">
<path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#f61d71" stroke="#000" stroke-width="3.27" transform="matrix(.36744 -.77303 -.88136 -.41893 140.592 321.208)"/>
<ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#f61d71" stroke="#000" stroke-width="1.5" transform="translate(-2.858 .016)"/>
<path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#f61d71" stroke="#000" stroke-width="3.27" transform="matrix(.5009 .69404 -.7913 .57109 151.09 -173.539)"/>
<ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#f61d71" stroke="#000" stroke-width="1.5" transform="translate(35.653 14.287)"/>
<path d="M263.878 53.56a7.457 7.457 0 0 0-7.454-7.453h-14.907a7.457 7.457 0 0 0-7.453 7.453v15.693a7.457 7.457 0 0 0 7.453 7.454h14.907a7.457 7.457 0 0 0 7.454-7.454V53.56z" fill="#f61d71" stroke="#000" stroke-width="2.83" transform="matrix(1.00418 .38434 -.37315 .97496 15.604 -90.95)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(-1.253 25.855)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(24.243 15.007)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(33.4 30.708)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(52.228 46.651)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(67.205 37.47)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(66.269 23.155)"/>
</g>
<g id="b-bow" class="drag">
<path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#3ba2f7" stroke="#000" stroke-width="3.27" transform="matrix(.36744 -.77303 -.88136 -.41893 765.243 753.101)"/>
<ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#3ba2f7" stroke="#000" stroke-width="1.5" transform="translate(621.793 431.91)"/>
<path d="M317.256 22.06c9.305 0 32.569 34.262 27.916 41.114-4.653 6.853-51.179 6.853-55.832 0-4.653-6.852 18.611-41.114 27.916-41.114z" fill="#3ba2f7" stroke="#000" stroke-width="3.27" transform="matrix(.5009 .69404 -.7913 .57109 775.741 258.354)"/>
<ellipse cx="226.982" cy="57.606" rx="7.76" ry="7.989" fill="#3ba2f7" stroke="#000" stroke-width="1.5" transform="translate(660.304 446.18)"/>
<path d="M263.878 53.56a7.457 7.457 0 0 0-7.454-7.453h-14.907a7.457 7.457 0 0 0-7.453 7.453v15.693a7.457 7.457 0 0 0 7.453 7.454h14.907a7.457 7.457 0 0 0 7.454-7.454V53.56z" fill="#3ba2f7" stroke="#000" stroke-width="2.83" transform="matrix(1.00418 .38434 -.37315 .97496 640.255 340.943)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(624.651 431.893)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(623.398 457.748)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(648.894 446.9)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(658.05 462.601)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(676.879 478.544)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(691.856 469.363)"/>
<ellipse cx="214.111" cy="40.678" rx="4.939" ry="5.225" fill="#fff" stroke="#fff" transform="translate(690.92 455.048)"/>
</g>
<g id="s-shirt" class="drag">
<path d="M391.354 276.786l-24.48 8.268s10.269 21.015 13.981 16.99c3.757-4.073 10.499-25.258 10.499-25.258zM461.21 281.247l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
<path d="M391.828 276.814s-15.017 39.539-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.16 83.845 2.986 74.945-1.905l-16.797-35.711-26.965-.804-6.543 10.048-11.671-10.202-23.578-2.357z" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
<path d="M266.636 427.142l22.116.7 1.005-16.466-23.121 15.766 10.335-7.047s-17.915-6.399-2.648-14.934c8.058-4.505 15.493 5.373 15.434 6.215" fill="#f84e4a" stroke="#060000" stroke-width="2.36" transform="matrix(1.11656 0 0 1 101.859 -117.76)"/>
<path d="M266.636 427.142l22.116.7 1.005-16.466-23.121 15.766 10.335-7.047s-17.915-6.399-2.648-14.934c8.058-4.505 15.493 5.373 15.434 6.215" fill="#f84e4a" stroke="#060000" stroke-width="2.37" transform="matrix(-1.10851 0 0 1 748.246 -117.388)"/>
<ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#f84e4a" stroke="#060000" stroke-width="2" transform="translate(133.041 -120.88)"/>
<path d="M390.904 279.25l30.792 12.314.434-6.432-6.21-6.153-25.095-2.032M460.585 281.064l-30.953 11.903-.348-6.437 6.29-6.07 25.01.604z" fill="#020168" stroke="#060000" stroke-width="2.5"/>
</g>
<g id="r-shirt" class="drag">
<path d="M387.077 216.698l-24.48 8.268s10.269 21.015 13.981 16.99c3.757-4.073 10.499-25.258 10.499-25.258zM456.933 221.159l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#f90803" stroke="#060000" stroke-width="2.5"/>
<path d="M387.551 216.726s-15.017 39.539-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.16 83.845 2.986 74.945-1.905l-16.797-35.711-26.655.26-9.062-.066-11.027-1.084-22.013-2.425z" fill="#f90803" stroke="#060000" stroke-width="2.5"/>
<path d="M388.921 216.877c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="2"/>
<path d="M210.706 528.536c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="1.94" transform="matrix(-1.00513 -.15349 -.1575 1.03142 751.49 -291.768)"/>
<ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.653 -52.483)"/>
<ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.532 -45.784)"/>
<ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#fff" transform="matrix(.706 0 0 .706 214.412 -39.086)"/>
<path d="M486.745 229.679a1.734 1.734 0 0 0 .218-2.442l-2.221-2.66a1.734 1.734 0 0 0-2.441-.22l-15.809 13.205a1.734 1.734 0 0 0-.219 2.44l2.222 2.66a1.735 1.735 0 0 0 2.442.22l15.808-13.203zM366.844 223.02a1.734 1.734 0 0 0-2.387-.559l-2.945 1.828a1.734 1.734 0 0 0-.558 2.386l10.86 17.5a1.734 1.734 0 0 0 2.387.56l2.945-1.828a1.735 1.735 0 0 0 .56-2.387l-10.862-17.5z" fill="#fff" stroke="#060000" stroke-width="2"/>
</g>
<g id="w-shirt" class="drag">
<path d="M386.877 337.785l-24.48 8.268s10.269 21.015 13.981 16.991c3.757-4.074 10.499-25.259 10.499-25.259zM456.733 342.246l9.278 20.314 18.654-15.626s-27.683-7.905-27.932-4.688" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
<path d="M387.351 337.813s-15.017 39.54-14.734 39.653c3.341 1.338 13.032.044 25.343 1.278 31.553 3.161 83.845 2.986 74.945-1.905l-16.797-35.71-26.655.26-9.062-.067-11.027-1.084-22.013-2.425z" fill="#fbfbfb" stroke="#060000" stroke-width="2.5"/>
<path d="M454.284 356.19a2.328 2.328 0 0 0-2.327-2.326h-7.713a2.328 2.328 0 0 0-2.327 2.326v4.653a2.328 2.328 0 0 0 2.327 2.326h7.713a2.328 2.328 0 0 0 2.327-2.326v-4.653z" fill="#fbfbfb" stroke="#060000" stroke-width="2"/>
<path d="M388.721 337.964c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="2"/>
<path d="M210.706 528.536c-.085.775 26.257 15.194 26.257 15.194l6.217-10.906s-32.388-5.064-32.474-4.288z" fill="#fff" stroke="#060000" stroke-width="1.94" transform="matrix(-1.00513 -.15349 -.1575 1.03142 751.29 -170.68)"/>
<ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.453 68.604)"/>
<ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.332 75.303)"/>
<ellipse cx="292.865" cy="412.053" rx="3.553" ry="3.504" fill="#060000" transform="matrix(.706 0 0 .706 214.212 82.001)"/>
</g>
<g id="r-bow" class="drag">
<path d="M853.662 264.874s-12.629-19.103-17.797-16.888c-5.167 2.215-4.069 6.173-4.142 11.51-.048 3.513-8.591-1.474-10.907 3.305-2.319 4.786.356 10.345 2.86 12.612 2.505 2.268-8.811 1.76-6.536 8.173 2.118 5.97 10.875 7.698 27.734 2.364 16.858-5.334 8.788-21.076 8.788-21.076zM885.441 275.099s22.279-5.3 24.534-.149c2.255 5.15-1.253 7.287-4.85 11.23-2.368 2.596 7.276 4.8 5.697 9.87-1.582 5.078-7.335 7.304-10.713 7.246-3.378-.059 5.225 7.31-.821 10.433-5.628 2.906-13.199-1.822-21.85-17.244-8.65-15.421 8.003-21.386 8.003-21.386z" fill="#f81f02" stroke="#060000" stroke-width="2.5"/>
<ellipse cx="289.895" cy="328.517" rx="15.687" ry="17.93" fill="#f74203" stroke="#060000" stroke-width="2.22" transform="matrix(1.23802 0 0 1 505.827 -49.519)"/>
</g>
<g id="mermaid" class="drag">
<path d="M477.91 575.404s-.049 14.281 9.447 17.963c4.171 1.617 16.81 5.56 27.117 7.566 13.157 2.56 20.902 6.608 24.43 6.006 3.338-.57-2.5-2.467-3.269-9.62-1.097-10.212 1.393-21.288-1.558-26.655-4.24-7.714-25.277-18.479-25.277-18.479-.542 4.067 21.851-5.626 27.545-17.865 2.813-6.049.473-14.489 1.872-19.925 1.186-4.606 11.261-12.296 6.521-12.69-5.268-.439-29.116 7.26-38.132 10.058-16.217 5.673-22.696 20.115-24.249 38.993l-4.447 24.649M431.277 516.036a3.063 3.063 0 0 0-2.583-3.476s-41.679-6.661-50.71-7.477c-1.438-.13-2.825 1.295-3.476 2.582-.728 1.44-1.175 4.47-.894 6.059.253 1.42 1.17 3.185 2.583 3.476 8.883 1.825 50.71 7.477 50.71 7.477a3.063 3.063 0 0 0 3.477-2.583l.893-6.058z" fill="#83f9dc" stroke="#000" stroke-width="3.5"/>
<path d="M419.163 527.588c0-1.69-1.531-3.062-3.416-3.062 0 0-41.556-.51-50.551 0-1.527.087-2.883 1.629-3.416 3.062-.569 1.531-.569 4.593 0 6.124.533 1.433 1.889 2.975 3.416 3.062 8.995.51 50.551 0 50.551 0 1.885 0 3.416-1.372 3.416-3.062v-6.124z" fill="#83f9dc" stroke="#000" stroke-width="3.69" transform="matrix(-.87994 .1712 .19098 .9816 698.17 -73.688)"/>
<path d="M376.415 517.524s-20.657 43.41 28.207 61.073c48.864 17.663 76.494-5.99 77.791-5.73 1.298.26 14.437-3.683 12.394-19.548-.62-4.82-.968.627-3.162-1.621-2.213-2.268-6.846.83-6.846.83l-3.175 2.644s1.262-40.127-3.22-41.445c-2.159-.635-21.848 2.944-45.867 4.004-25.872 1.14-56.122-.207-56.122-.207z" fill="#3bd0a2" stroke="#000" stroke-width="4.5"/>
<path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -144.373 79.089)"/>
<path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -127.88 98.793)"/>
<path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -94.835 80.375)"/>
<path d="M375.642 551.504c0 .5.359 1.205.459 1.729.523 2.74 2.521 2.126 4.435.85.236-.157 1.188-1.22 1.3-1.163.793.396.397 2.45 1.54 2.842.926.318 2.45.194 3.165-.532.146-.149.97-1.352 1.152-1.17.503.504.848 1.735 1.462 2.042 1.104.552 4.588.5 4.588-1.113" fill="none" stroke="#39a890" stroke-opacity=".38" stroke-width="1.74" transform="matrix(1.39967 0 0 .82315 -78.765 102.623)"/>
</g>
<g id="glasses" class="drag">
<path fill="none" stroke="#000" stroke-width="2.5" d="M801.506 581.416h34.278v23.688h-34.278zM879.22 581.497h34.278v23.688H879.22z"/>
<path d="M836.993 319.949l41.57.278" fill="none" stroke="#000" stroke-width="2.86" transform="matrix(.9674 0 0 .77007 28.133 345.95)"/>
</g>
<g id="dress" class="drag">
<g transform="translate(-464.944 153.649)">
<ellipse cx="872.165" cy="253.122" rx="20.43" ry="12.773" fill="#f33a7a" stroke="#000" stroke-width="2.5" transform="translate(1.048 -1.609)"/>
<ellipse cx="872.165" cy="253.122" rx="20.43" ry="12.773" fill="#f33a7a" stroke="#000" stroke-width="2.5" transform="translate(41.97 .202)"/>
<path d="M850.01 252.697s8.596-16.15 6.564-19.777c-2.032-3.628-12.192-4.01-18.756-1.988-2.312 8.723 2.208 15.873 12.192 21.765zM935.94 254.858s-8.596-16.15-6.564-19.777c2.032-3.628 12.192-4.01 18.756-1.988 2.312 8.723-2.208 15.873-12.192 21.765z" fill="#f33a7a" stroke="#000" stroke-width="2.5"/>
<path d="M839.017 242.361s-9.33-1.303-9.299 1.528c.032 2.831 3.939 10.202 9.489 15.461l10.173-6.408-10.363-10.581zM946.933 244.522s9.33-1.303 9.299 1.528c-.032 2.83-3.939 10.202-9.489 15.46l-10.173-6.407 10.363-10.581z" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(9.972 1.684)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(19.944 3.368)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(29.747 4.215)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(63.281 6.402)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(74.149 6.692)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(84.774 6.49)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(95.398 6.288)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(106.023 6.086)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(116.648 5.884)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(127.273 5.682)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.38" transform="matrix(1.22671 .26367 -.16652 .77472 3.417 -143.04)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(41.171 4.912)"/>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="translate(51.614 5.788)"/>
<path d="M847.512 253.083l91.025 1.586 26.877 67.04c-52.068 7.885-101.721 5.562-149.644-4.066l31.742-64.56z" fill="#f8a3a5" stroke="#000" stroke-width="2.5"/>
<path d="M821.474 306.04s.447-20.091 4.844-28.763c4.4-8.677 14.883-19.501 21.556-23.299 5.356-3.049 22.246-.082 22.246-.082l-48.646 52.144zM962.471 312.37s3.688-24.862-.709-33.534c-4.4-8.677-14.883-19.501-21.556-23.3-5.356-3.048-22.44-.616-22.44-.616l44.705 57.45z" fill="#f33a7a" stroke="#000" stroke-width="2.5"/>
</g>
<ellipse cx="830.055" cy="322.465" rx="5.315" ry="4.448" fill="#f8a3a5" stroke="#000" stroke-width="2.5" transform="matrix(1.28315 .04212 -.09373 .72264 -681.355 206.68)"/>
<path d="M405.632 407.868s-9.43 14.356-17.683 32.236c-6.921 14.992-13.266 34.001-10.967 35.45 11.574 7.299 108.351 5.448 101.749 1.796 1.142.218-5.705-18.96-11.386-36.807-5.114-16.063-13.48-30.639-15.476-31.817-1.986-1.173-46.237-.858-46.237-.858z" fill="#fff" stroke="#000" stroke-width="2.5"/>
<path d="M396.648 425.467c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.5"/>
<path d="M861.592 271.818c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.29" transform="matrix(1.17678 0 0 1 -623.935 168.444)"/>
<path d="M861.592 271.818c6.335 4.559 13.804 4.594 22.211.881 7.412 4.113 14.779 5.162 22.06.47 7.652 3.758 14.32 3.803 19.713-.965" fill="none" stroke="#000" stroke-width="2.01" transform="matrix(1.44275 0 0 1 -862.375 189.372)"/>
</g>
</g>
</svg>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>
<script src="./script.js"></script>
</body>
</html>