2017-02-11 6 views
-1

Есть ли JQuery плагины для расщепления SVG изображения на различные куски и анимировать их, как показано в следующемSplit SVG и анимации

http://mattdesl.github.io/svg-mesh-3d/

Это подход с использованием GLSL и threejs, но есть ли другой простой аналогичный подход с помощью jquery или javascript?

Заранее спасибо.

ответ

0

я придумал обходным для вышеуказанной проблемы

Пожалуйста, проверьте ниже codepen ссылку и код http://codepen.io/yesvin/pen/OWdPmM

<!DOCTYPE html><html lang=en><title>SVG</title><meta charset=utf-8><meta content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1"name=viewport><style>svg{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;overflow:visible;border:solid 1px #000}.path{opacity:0}.chunks{animation:float 2s ease infinite}@keyframes floatq{0%{transform:translateY(0)}25%{transform:translateY(-25px)}75%{transform:translateY(25px)}100%{transform:translateY(0)}}</style><div class=wrapper><svg height=500 id=svgObj version=1.1 viewBox="0 0 750 1000"width=500 xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><g id=f id=f stroke=""stroke-width=""><path class=path d="m252.80213 303.6977c-0.7848-5.72328-0.126-14.6748 1.51092-20.53128 0.675-2.41398 0.8775-2.72511 1.20249-1.84599 0.5643 1.52469 2.00205 1.30518 4.36104-0.666 1.13418-0.94761 2.36934-1.72296 2.74464-1.72296 0.7695 0 0.92331-0.5211 1.89369-6.39954l0.6903-4.18428-0.2682 6.15339c-0.1701 3.91374-0.0538 7.17687 0.3204 8.96535 0.5742 2.7459 0.621 2.8053 2.01312 2.52702 0.92646-0.1854 2.70819 0.1827 5.09148 1.0521 3.28482 1.19799 3.81069 1.26792 5.05485 0.6714 0.7641-0.3663 1.61019-1.29573 1.88109-2.06604 0.4113-1.16829 0.3339-1.51677-0.4671-2.10186-0.5274-0.3861-1.24245-0.5931-1.58868-0.4599-1.81179 0.6957-2.94408-1.86534-1.39374-3.15198 0.3915-0.3249 1.09305-1.62612 1.55817-2.8908 1.18629-3.22578 1.40274-3.3363 2.63358-1.34478 1.12248 1.8162 2.60478 2.94048 3.15342 2.39175 0.6228-0.6228 0.288-3.42882-0.621-5.21154-0.90765-1.78038-0.90792-1.827-0.0114-1.827 1.24398 0 2.52738-2.08179 2.33235-3.78324-0.1224-1.07127-0.6426-1.6299-2.29356-2.46276l-2.13471-1.07721 2.13471-0.5508c4.52367-1.16631 5.45877-1.61658 6.25122-3.00969 0.4437-0.7794 0.91692-1.41696 1.05237-1.4166 0.135 0.00037 0.7893 0.94041 1.45314 2.08899l1.20708 2.08836 0.4887-1.35648c0.3798-1.0548 0.7137-1.29159 1.50039-1.06479 0.5562 0.1602 5.91309 1.95462 11.90383 3.987l10.89223 3.69531-0.7254 1.45368c-0.4113 0.8253-0.5931 1.97883-0.4203 2.66796 0.2502 0.99594 0.5202 1.16019 1.50174 0.91377 1.15731-0.2907 1.12338-0.1557-1.02249 4.05459-1.22076 2.39526-2.91582 5.07537-3.76686 5.95584-1.17126 1.21167-1.40904 1.73925-0.97803 2.17017 0.4311 0.4311 0.2313 0.99909-0.8226 2.3373-1.71612 2.17953-3.66057 5.98653-4.51215 8.83404-0.3528 1.17882-0.8757 2.22939-1.16307 2.33451-0.2871 0.1053-11.59812 1.62891-25.13551 3.38616-13.5374 1.75725-25.19406 3.29832-25.9037 3.42459-1.20564 0.2142-1.31058 0.0815-1.59984-2.02923z"/><path class=path d="m305.60389 264.87779c-9.87329-3.4182-10.34479-3.6396-10.49648-4.92858-0.2124-1.80378 0.8892-3.36357 3.72024-5.2668 3.00726-2.02194 4.04415-3.30894 4.05783-5.03667 0.0109-1.37664 0.0253-1.37016 1.85697 0.8298 1.01529 1.21959 2.09745 2.23155 2.40471 2.24883 0.7659 0.043 2.14875-2.16459 2.14875-3.42954 0-0.5688-0.2295-1.46268-0.5094-1.98639-0.4275-0.7983-0.3456-0.9522 0.5085-0.9522 1.92294 0 4.29858-1.37376 7.6851-4.44402 1.86588-1.69155 4.06989-3.59271 4.8978-4.22478l1.50534-1.14921 10.30911 2.76174c5.67 1.51902 10.37722 2.81772 10.46045 2.88612 0.0832 0.0684-0.91116 1.12824-2.20977 2.35521-1.34712 1.27278-2.49542 2.01348-2.6738 1.72485-0.1998-0.324-0.7695-0.207-1.57986 0.324-1.18539 0.7767-2.02311 2.52405-3.19176 6.65766-0.4338 1.53441-0.4923 1.58139-0.5373 0.4293-0.0276-0.711-0.3987-1.58274-0.8244-1.93626-0.6678-0.5544-1.24974-0.1566-4.21839 2.88378-2.37114 2.42811-4.04649 3.70719-5.37876 4.10634-1.06425 0.3186-1.93302 0.8217-1.9305 1.11717 0.002 0.2952 0.549 1.64502 1.21527 2.99871 1.91925 3.90159 1.53261 4.44393-2.08935 2.93049-1.10502-0.4617-1.88685-0.5679-1.98603-0.2709-0.261 0.783-2.106 3.00393-2.47203 2.9754-0.1836-0.0143-4.98546-1.63647-10.67112-3.60495z"/><path class=path d="m334.61723 239.93c-5.14422-1.41255-9.79615-2.69712-10.33765-2.85444-0.90522-0.2628-0.8658-0.3681 0.4923-1.30131 2.23029-1.53315 7.26201-4.03488 16.89454-8.39997 4.78692-2.16927 9.43605-4.37391 10.33145-4.89924 1.99044-1.16784 2.47122-1.18476 3.63897-0.1278 0.97038 0.8784 2.79135 0.6003 18.60804-2.84382 6.64029-1.44576 14.43027-1.16082 19.93689 0.729 3.35421 1.15119 4.04766 1.58409 4.67658 2.91942 0.5481 1.16415 1.59975 1.98666 4.08375 3.19491 2.28411 1.11105 3.49434 2.01906 3.8151 2.86263 0.4851 1.27656 0.6714 11.50896 0.2097 11.50896-0.1431 0-1.52757-0.639-3.07665-1.42056-3.37878-1.70415-10.59596-4.29768-14.50788-5.21352-2.82384-0.6615-2.83059-0.6597-2.83059 0.4806l0 1.14363-10.21458-0.0224c-13.98085-0.0302-21.16528 1.25676-29.16712 5.2254l-3.19977 1.58697-9.35311-2.56833z"/><path class=path d="m333.38656 219.0124c2.4183-2.08152 7.85169-4.63662 12.93914-6.08481 4.46652-1.27152 25.16602-4.87827 26.13773-4.55436 1.21707 0.4059-1.91943 1.39887-5.97303 1.89144-2.36835 0.288-5.0814 0.8631-6.02901 1.27854l-1.72296 0.7551 1.72296 0.3726c0.94761 0.2052 2.8305 0.5364 4.18428 0.7362l2.46132 0.3645-2.95362 0.6201c-5.2524 1.10331-10.09151 2.76084-10.09151 3.45645 0 0.4914-0.7065 0.351-2.72151-0.54-1.49679-0.6624-3.28149-1.20357-3.96594-1.20357-0.6849 0-4.19805 0.99684-7.80813 2.21517-3.60999 1.21833-6.86493 2.20617-7.23312 2.19519-0.3681-0.011 0.1062-0.6876 1.05345-1.50291z"/><path class=path d="m422.60908 250.02107c-4.07763-2.49633-9.43065-5.64642-11.89565-7.00011-5.1633-2.83563-5.06394-2.63808-5.04684-10.02998 0.0105-4.55139 0.0445-4.69827 0.8613-3.72807 0.63 0.7479 1.53666 1.04274 3.49218 1.13589 6.83396 0.3258 14.42094 5.87601 21.01561 15.37391l1.22706 1.76724-0.846 3.52467c-0.4653 1.9386-0.96921 3.51801-1.11996 3.51-0.1503-0.008-3.61026-2.05713-7.68789-4.55346z"/><path class=path d="m450.56911 324.03479-3.76371-2.56275 0.93312-1.15236c1.0665-1.31706 1.18233-3.64581 0.4167-8.36667-0.2799-1.72647-0.36-4.13334-0.1782-5.34861l0.3312-2.2095 2.92383 6.08697c1.60812 3.34782 3.25332 7.36047 3.65598 8.91702 0.7821 3.02337 0.7479 6.85476-0.063 7.06869-0.2709 0.0714-2.18592-1.02339-4.25592-2.43288z"/><path class=path d="m441.9505 342.76459c-8.63073-5.74389-8.92836-5.99652-8.23302-6.98913 0.3969-0.5661 0.7218-1.42362 0.7218-1.90485 0-1.06542 0.1539-1.07514 1.99017-0.126 0.7974 0.4122 2.00619 0.96111 2.68713 1.22004 1.21833 0.4635 1.23318 0.4401 0.92952-1.45899-0.2448-1.52955-0.0927-2.20464 0.7344-3.25548 1.02771-1.30662 1.3329-3.31029 0.7398-4.8564-0.2286-0.5958-0.7443-0.7281-2.09214-0.5391l-1.78893 0.2511 1.93617-0.855c1.06488-0.4698 3.28005-1.5192 4.92264-2.33145l2.98656-1.47681 4.3074 2.9223c4.13928 2.80827 4.30731 2.99484 4.30731 4.78215 0 3.96513-3.56679 18.76445-4.87323 20.21966-0.1764 0.1962-4.35006-2.32461-9.27494-5.60223z"/><path class=path d="m411.26972 377.46665c-7.69933-8.54411-9.74545-11.09752-9.62559-12.01208 0.0837-0.639-0.549-2.89413-1.4067-5.01192-1.92393-4.75191-2.05038-6.80166-0.5499-8.90928 0.6219-0.873 1.34181-1.58679 1.60083-1.58679 0.6723 0 1.43109 2.23461 1.43109 4.21632 0 1.49274 0.1503 1.69092 1.27989 1.69092 1.27863 0 4.19454-2.42703 4.73148-3.93813 0.2034-0.5724 0.6597-0.3609 2.02806 0.93852 1.48599 1.41129 1.88586 1.57716 2.52422 1.04733 0.4176-0.3465 0.7587-1.17207 0.7587-1.8351 0-1.09593 0.0703-1.13526 0.774-0.432 1.41651 1.4166 2.93238 0.8937 6.32448-2.18007 1.79253-1.6245 3.58704-2.95362 3.98781-2.95362 0.97047 0 0.92034-0.4842-0.1332-1.28385-0.7623-0.5787-0.6354-0.6561 1.10763-0.6741 1.08297-0.0112 3.14271-0.567 4.57704-1.23462 2.8746-1.33821 2.91897-1.78929 0.4077-4.13847l-1.25946-1.17792 1.58346-0.8046 1.58346-0.8046 9.23004 6.12171c5.07654 3.3669 9.23004 6.36615 9.23004 6.66486 0 1.05813-5.72742 11.91329-8.46162 16.03731-4.13226 6.23259-10.23718 13.29268-15.58396 18.02195-2.61369 2.31183-5.11415 4.40244-5.55668 4.64589-0.648 0.3564-2.70405-1.66536-10.58232-10.40812z"/><path class=path d="m385.57406 389.324c-3.25962-6.51492-5.92659-11.9274-5.92659-12.02767 0-0.0999 1.25622-0.3303 2.79162-0.5103 4.54716-0.5346 6.92244-1.84689 8.08047-4.46481 0.5436-1.22895 1.09764-2.23443 1.23111-2.23443 0.1332 0 1.11114 0.4428 2.1726 0.98451 1.06146 0.5418 2.04057 0.98451 2.17584 0.98451 0.135 0 0.5166-0.9045 0.8478-2.00988l0.6021-2.00988 0.8469 1.12239 0.8469 1.12239 1.85004-1.85004c1.78092-1.78092 1.88244-1.81674 2.71764-0.9585 0.477 0.4905 4.75317 5.19813 9.50222 10.46167 6.84531 7.587 8.51922 9.70916 8.07777 10.24105-0.95679 1.1529-9.35951 5.95575-13.96125 7.98003-3.98871 1.75464-10.23502 3.78963-14.34794 4.67433l-1.58049 0.3402-5.92668-11.84537z"/><path class=path d="m363.95922 411.17326c-1.48914-0.3681-5.5872-0.91098-9.10696-1.2069-12.71553-1.06893-11.56833-0.7965-11.56833-2.74968 0-1.14129-0.387-2.09691-1.16388-2.8737-1.15227-1.15227-1.19997-1.15695-4.79961-0.4707-8.73468 1.66581-8.31231 1.63485-8.31231 0.6102 0-0.7713-0.1665-0.846-0.9522-0.4248-2.3283 1.24605-5.49414 0.6156-11.48698-2.28825-3.18645-1.54395-5.7339-2.95218-5.66109-3.12957 0.0728-0.1773 5.67045-9.63109 12.43915-21.00833l12.30673-20.68589 0.8037 2.31543c0.98019 2.82375 2.81151 5.7843 5.24277 8.4753 2.68587 2.97288 11.74624 10.75167 12.10511 10.39279 0.1701-0.1701 0.3087-1.15767 0.3087-2.19555 0-1.76004 0.0972-1.88703 1.44756-1.88703 0.9387 0 2.79891 0.92052 5.29191 2.61864 5.04297 3.43512 5.29488 3.50829 7.84035 2.27601 1.50183-0.7272 3.51729-1.11654 6.78636-1.31157l4.65003-0.2772 5.95836 11.90878c3.27708 6.54984 5.82822 12.11941 5.6691 12.37684-0.1593 0.2574-0.8262 0.468-1.48266 0.468-1.53738 0-10.92261 2.55501-14.74723 4.01472-1.94814 0.7434-3.75759 1.92789-5.31531 3.47895-2.58777 2.57679-2.39256 2.52765-6.25302 1.57392z"/><path class=path d="m307.95425 398.2337c-2.376-0.5652-2.37816-0.5679-1.35369-1.49463 0.5643-0.5103 1.02609-1.09494 1.02609-1.29816 0-0.2034-1.49526-1.06848-3.3228-1.92258-3.91158-1.82817-6.22413-3.27096-14.09405-8.79273-3.21669-2.25693-7.13376-4.8159-8.70453-5.68647-2.31732-1.28439-2.71044-1.67481-2.08431-2.06973 0.9594-0.6048 0.549-2.11167-1.1124-4.08654l-1.19079-1.41516 1.01439-1.28961c0.558-0.7092 1.43442-1.28961 1.94778-1.28961 0.6084 0 0.8388-0.2457 0.6624-0.7056-0.1701-0.4437 5.07708-6.92127 14.12599-17.43784l14.39691-16.73185 1.44333 2.17908c0.7938 1.19853 2.02266 2.63475 2.73069 3.19167 1.00953 0.7938 1.14165 1.10268 0.612 1.42974-0.5607 0.3465-0.567 0.6768-0.0403 1.9494 0.8649 2.08692 3.11328 3.87405 5.32106 4.22856 3.67749 0.5904 4.22208 0.8136 5.60286 2.29131 1.1889 1.27278 1.52451 1.40715 2.17188 0.8694 0.7308-0.6066 0.7038-1.55664-0.1053-3.66633-0.2421-0.6309-0.0927-0.7902 0.6129-0.6525 0.8316 0.162 0.9333 0.6525 0.9333 4.52061 0 4.1652 0.0566 4.38795 1.41084 5.55507 1.10259 0.95022 1.85553 1.18341 3.44592 1.06731 1.95534-0.1431 2.03607-0.2151 2.06127-1.83924 0.0144-0.92988 0.2916-1.77903 0.6156-1.88703 2.02815-0.6759-0.3438 3.94983-12.32172 24.02612-7.10091 11.90233-13.02663 21.61427-13.16819 21.58211-0.1413-0.0322-1.32831-0.3132-2.63727-0.6246z"/><path class=path d="m279.44572 368.65777c-0.2583-0.5031-0.6003-1.92114-0.7605-3.1518-0.1602-1.23057-0.4455-2.64087-0.6354-3.13398-0.2997-0.7812-0.2115-0.8262 0.6831-0.3465 1.74033 0.93141 2.56833 0.6777 2.56833-0.7857 0-1.00971-0.7785-2.06073-3.19131-4.30731-2.22408-2.07108-3.28707-3.45654-3.50739-4.57155-0.1737-0.8802-0.4284-1.59984-0.5661-1.59984-0.1377 0-0.96138 0.4401-1.83132 0.97758l-1.58175 0.97758-0.4275-7.00785c-0.2349-3.85434-0.4023-8.60301-0.3726-10.55266l0.0553-3.54483-2.78073-0.5553c-5.48757-1.09746-6.91155-1.5894-8.02341-2.7729l-1.12878-1.2015 1.58616-1.24137c1.27773-0.99999 1.58481-1.59327 1.57941-3.05163-0.0161-4.338-1.42362-5.33628-2.89386-2.05236l-0.8838 1.97316-1.11114-3.81915c-1.05894-3.63969-3.04632-13.02498-2.80845-13.26285 0.135-0.135 52.21668-6.96537 52.34012-6.86385 0.0474 0.0389-0.225 1.39806-0.6057 3.02031-0.3807 1.62225-0.95994 6.34086-1.28799 10.48574-0.6849 8.65053-0.6264 9.0116 2.85003 17.72565 1.89657 4.75362 2.1276 5.6925 1.57455 6.39855-0.4797 0.612-25.61284 30.-28.00264 32.75662-0.2025 0.2322-0.5787 0.0106-0.837-0.4923z"/><path class=path d="m361.09259 474.80132c-5.63283-0.8334-11.07927-1.66977-12.10325-1.85868l-1.86174-0.3438 3.24576-1.5363c1.78515-0.8451 3.58533-1.9467 4.0005-2.44827 0.91701-1.10808 0.4662-4.077-1.07775-7.10424-1.01529-1.99017-1.42659-5.44878-0.7308-6.14466 0.1818-0.1818 2.33334 1.33389 4.7817 3.36771 2.44827 2.03382 5.95476 4.94388 7.79202 6.46668 2.77794 2.30238 3.60594 3.41631 4.91616 6.6132 0.8667 2.11446 1.50885 3.99267 1.42722 4.17384-0.0816 0.1809-4.75704-0.3528-10.38986-1.18584z"/><path class=path d="m333.30605 489.40553c1.84329-1.72188 2.23416-3.28698 1.10331-4.41783-0.5166-0.5166 0.8055-0.6651 5.95116-0.666l6.61545-0.002-1.79919-1.09701c-2.01978-1.23147-2.21022-1.95588-0.8955-3.4083 0.7659-0.846 0.7983-1.251 0.2169-2.65482-1.08351-2.61576-1.71927-2.89782-4.9635-2.20212-4.51575 0.96849-3.852 0.2439 1.27125-1.38726l4.66623-1.48581 13.18243 1.98855c7.25031 1.09377 13.31629 2.12247 13.47991 2.28609 0.3609 0.3609 3.2823 7.63983 3.13236 7.80444-0.0584 0.0641-9.06347 1.48995-20.01129 3.16863-10.94781 1.67868-20.76283 3.20355-21.81115 3.38859l-1.90602 0.3366 1.7676-1.65123z"/><path class=path d="m355.4024 498.24154-22.69555-0.8838 3.21696-2.27988c3.48768-2.47176 3.43638-2.62872-1.07379-3.28041-1.48518-0.2142-3.00258-0.5508-3.37203-0.747-0.5337-0.2835 38.5204-6.59115 42.71763-6.89949 0.8775-0.0645 1.42038 0.855 2.89494 4.90302 0.99819 2.74032 2.16648 6.16563 2.59614 7.61193 0.7632 2.56788 0.7533 2.62755-0.4041 2.54439-0.6516-0.0468-11.39796-0.4824-23.88051-0.96876z"/><path class=path d="m329.08105 546.61158-1.84068-0.6669 3.36312-1.6074c1.84968-0.8838 3.36303-1.80594 3.36303-2.04858 0-0.243-1.18332-1.05714-2.62953-1.80999l-2.62962-1.36863 2.66688-0.0258c2.50218-0.0242 2.64393-0.1026 2.29509-1.27134-1.37124-4.5945-4.11975-5.76828-15.28058-6.52608-9.56182-0.6489-13.5162-1.54683-15.33268-3.4803-1.25208-1.33272-2.31381-5.36283-1.40886-5.34762 1.49463 0.0251 7.8633 1.82385 8.92845 2.5218 1.10673 0.7254 1.43919 0.7209 2.90907-0.0394 1.39374-0.7209 1.65915-1.18836 1.65744-2.91996-0.001-1.134-0.4788-2.84364-1.06155-3.79926l-1.05948-1.73745 4.65993-0.3879c4.02849-0.3357 4.65993-0.5274 4.65993-1.41426 0-0.5643-0.5535-1.4139-1.23039-1.88784-1.20978-0.8478-1.19664-0.8622 0.7875-0.8622 3.18519 0 5.09652-1.99476 6.22377-6.4953 0.5157-2.06037 1.47816-4.32306 2.13795-5.02812l1.19961-1.28196-3.03705 0.3411-3.03705 0.3411 3.32154-1.20438 3.32154-1.20438 24.32925 0.8982c13.3811 0.4941 24.51429 1.08567 24.74042 1.31463 0.4734 0.4788 4.52907 15.64886 4.2561 15.91866-0.3177 0.3141-54.15161 31.83171-54.29514 31.78784-0.0758-0.0232-0.96606-0.342-1.97847-0.7092z"/><path class=path d="m380.43307 605.64048c-16.74621-5.43499-34.02639-11.02329-38.40042-12.41845l-7.95276-2.53665 2.14002-2.22795 2.14002-2.22795-3.32154 0.3807c-1.82682 0.2097-3.88206 0.5139-4.56714 0.6768-1.05354 0.2502-1.2456 0.0688-1.2456-1.17567 0-2.0475 1.17936-4.08474 3.86442-6.67566 1.26216-1.21788 2.80125-3.02967 3.42018-4.02624l1.12527-1.81188-1.99053-2.20329c-2.59956-2.87739-2.70504-4.60305-0.8001-13.0885 1.33074-5.92749 0.93384-8.16471-1.83267-10.32979l-1.66917-1.30638 26.2058-15.35604c14.41317-8.44578 26.43816-15.39769 26.72217-15.44861 0.7119-0.1278 1.75905 6.18507 2.53719 15.28933 0.5031 5.88204 0.5013 9.39762-0.008 15.33488-0.6579 7.67736-0.6561 7.71327 0.7047 10.68484 2.41578 5.2767 6.84378 8.62497 12.07471 9.1303l2.53845 0.2448-1.0161 1.99296c-1.341 2.63034-1.30446 7.05555 0.0909 11.02618 1.40517 3.99807 1.4031 4.01832-0.4149 4.02201-2.26917 0.004-5.41989 0.99738-6.85611 2.16036l-1.27035 1.0287 5.79321 2.94993c4.31172 2.19564 5.4747 3.0006 4.54761 3.14802-1.55763 0.2475-1.64619 1.22823-0.1107 1.22823 3.24162 0 5.54832 2.80989 6.35139 7.73712 0.2763 1.69749 0.95625 3.0303 2.15766 4.23171l1.75382 1.75383-3.27725 0.3708-3.27726 0.3708 1.38195 1.48707c1.84104 1.98088 3.33522 4.38178 3.09978 4.98078-0.1044 0.2664-13.89188-3.96234-30.63809-9.3973l-0.00002 0z"/><path class=path d="m321.45148 649.67007c-0.1683-0.2718 0.3753-0.6651 1.20735-0.8739 1.93167-0.4851 2.33559-1.1571 2.34603-3.9056 0.0112-2.9602-1.098-4.3942-4.87539-6.3027-5.02236-2.5375-5.65443-3.6635-4.19355-7.4705 0.2709-0.7065-0.0592-0.882-1.65843-0.882-2.02293 0-3.15828 0.7749-4.78917 3.2686-0.6579 1.0062-1.14291 1.2157-2.10645 0.9098-0.6885-0.2187-1.15578-0.6876-1.03851-1.0423 0.117-0.3546 2.53746-2.2737 5.37831-4.2644 6.2217-4.3598 7.36659-6.1234 5.75802-8.8702-0.576-0.9835-1.68354-2.2625-2.46132-2.8422-1.1799-0.8793-1.68453-0.9531-3.04479-0.4446-0.8964 0.3348-2.04336 1.1454-2.5479 1.8005-0.8244 1.0704-1.07559 1.119-2.47887 0.4797l-1.56141-0.711 4.41648-2.2921c6.12765-3.1809 13.05625-10.12256 18.98847-19.02491 2.46924-3.70548 4.71447-6.87636 4.98942-7.04628 0.2745-0.1701 18.00494 5.35923 39.39996 12.28712l38.90006 12.59607 1.22022 2.7541c1.55295 3.5049 3.76506 6.1216 6.25491 7.399l1.95741 1.0042-1.60614 0.4032c-2.0286 0.5094-2.99628 1.3056-2.99628 2.466 0 0.7569-7.87626 2.6046-46.91705 11.0087-25.80438 5.5548-47.21375 10.0975-47.57637 10.095-0.3627 0-0.7965-0.2268-0.96498-0.4995z"/><path class=path d="m323.25077 651.13847c-0.3474-0.7623-0.5292-1.4751-0.4032-1.5835 0.126-0.1089 17.91564-3.9932 39.53346-8.6328 21.61782-4.6396 40.75252-8.7662 42.52155-9.1702 4.27914-0.9773 4.83732 0.044 1.55835 2.8502-1.25595 1.0751-2.28357 2.3258-2.28357 2.7792 0 0.6156-0.3159 0.7137-1.2456 0.387-0.6849-0.2403-2.24208-0.4446-3.45996-0.4527-1.99593-0.013-2.23137 0.1323-2.38617 1.4729-0.1278 1.1083 0.1899 1.7082 1.2456 2.3527 4.68954 2.862 4.35123 2.4671 3.38094 3.948-1.05984 1.6175-0.7173 1.667 3.57246 0.5157 1.67463-0.4491 3.16935-0.819 3.32154-0.8208 0.1521 0-0.6471 0.8451-1.77642 1.8819l-2.05326 1.8858-39.74308 1.9937c-21.85871 1.0966-40.05983 1.9905-40.44695 1.9867-0.387 0-0.98811-0.6309-1.33551-1.3934z"/><path class=path d="m328.14307 672.82567c-0.5022-1.6133-1.42191-6.2963-2.04282-10.4067-0.621-4.1104-1.33479-8.2334-1.58634-9.1622l-0.4572-1.6887 36.87722-1.795c20.28248-0.9873 38.32099-1.9424 40.08559-2.1225l3.20832-0.3276-1.11159 1.884c-1.09548 1.8565-1.63395 2.0606-36.97762 14.0112-19.72629 6.67-36.13947 12.2202-36.47374 12.3339-0.3339 0.1134-1.01898-1.1133-1.52162-2.7266z"/><path class=path d="m326.0542 686.89127c0.0503-2.7322 1.41471-10.1823 1.95102-10.6536 0.2808-0.2466 16.57883-5.8784 36.21756-12.5144 19.63873-6.6361 36.01818-12.1837 36.39878-12.328 1.11905-0.4239 0.8136 0.5499-1.2456 3.9694-1.06569 1.7697-1.93761 3.3382-1.93761 3.4857 0 0.1476 3.8223 0.089 8.4941-0.1305 4.67172-0.2187 9.31346-0.2178 10.31489 0l1.82079 0.3996-3.5334 1.739c-3.67901 1.8108-4.3379 2.7433-3.11768 4.412 0.6138 0.8397 0.97542 0.8955 2.36879 0.369 0.90441-0.342 2.2716-1.2197 3.03822-1.9507l1.39392-1.3293 2.64915 3.2727c4.36014 5.3864 7.45938 10.3487 8.47431 13.5683 0.5265 1.6698 0.8505 3.1209 0.72 3.2249-0.1305 0.1035-22.15967 1.3642-48.95359 2.8007-26.79393 1.4365-50.14866 2.7568-51.8994 2.934l-3.18321 0.3222 0.0293-1.5939z"/><path class=path d="m324.21333 708.15817c0.1809-2.2074 0.5301-7.5706 0.7767-11.9181 0.2466-4.3475 0.5481-8.0034 0.6687-8.1242 0.1953-0.1953 100.23553-5.8524 103.31671-5.8423 0.8172 0 1.24416 0.3375 1.24137 0.9729-0.004 0.935-7.20288 2.9891-40.96167 11.688-2.28357 0.5886-17.66636 4.7076-34.18398 9.1536-16.5176 4.446-30.29171 8.0837-30.60912 8.0837-0.3771 0-0.4635-1.388-0.2493-4.0136z"/><path class=path d="m354.29834 720.63377c-16.95567-0.378-30.98032-0.8388-31.16588-1.0249-0.1854-0.1854-0.1692-1.9711 0.0372-3.9673l0.3744-3.6296 3.23613-0.9072c9.4625-2.6528 53.6598-14.2789 54.28202-14.2789 0.4167 0 0.5859 0.5427 0.3969 1.2669-0.2745 1.0508-0.0194 1.2669 1.49697 1.2669 1.00557 0 2.97414-0.4581 4.37472-1.0189 1.45467-0.5823 3.22794-0.8478 4.13604-0.6201 1.55304 0.3897 1.56492 0.4365 0.5193 2.0331-0.8667 1.323-0.93852 1.9842-0.3762 3.4742l0.6948 1.8403-5.23917-0.098c-5.20164-0.097-6.68925 0.2205-6.68925 1.4267 0 0.8424 3.95703 2.4535 6.15582 2.507 1.69785 0.041 1.71153 0.067 0.3744 0.7137-1.7415 0.8415-2.33613 2.3078-1.39554 3.441 0.8721 1.0503 4.68864 1.1337 7.47261 0.1629 3.18906-1.1117 2.91816-0.3222-0.8712 2.5388-2.58552 1.9521-3.50082 3.0519-3.50082 4.2063 0 1.3083-0.2835 1.546-1.74204 1.4582-0.95805-0.058-15.61482-0.414-32.57049-0.792z"/><path class=path d="m327.59884 742.37427c0-0.5769-0.99765-3.6025-2.21706-6.723-2.58039-6.6035-2.67219-7.7214-0.90468-11.019l1.31238-2.4486-1.62909 0.3114c-1.39707 0.2673-1.62909 0.087-1.62909-1.2662l0-1.5777 25.81316 0.4167c29.43814 0.4752 31.27185 0.6066 32.33836 2.3143 0.675 1.0807 0.495 1.3337-1.61595 2.2703-1.93941 0.8604-2.14578 1.1083-1.12392 1.3495 0.7371 0.1737-7.72029 3.535-20.57202 8.1757l-21.82354 7.8803-2.43225-1.367c-1.33776-0.7515-2.50299-1.2669-2.58948-1.1447-2.05308 2.9029-2.9268 3.7471-2.9268 2.8279z"/><path class=path d="m336.34762 746.85977c-0.3627-0.4374-0.8568-1.5804-1.09791-2.5398-0.2412-0.9595-0.7326-1.9269-1.09377-2.1498-0.3609-0.2232 9.29136-4.0179 21.44917-8.4331 16.16598-5.8709 22.33512-7.8526 22.96117-7.3758 0.6372 0.4851 0.7371 1.4696 0.3924 3.8466-0.8208 5.653-0.4203 6.5919 2.86938 6.7218 0.8712 0.034-1.26693 0.8244-4.75092 1.7554-5.5323 1.4785-6.30891 1.8529-6.13233 2.9561 0.3231 2.0171 2.05776 2.9778 4.65156 2.5758l2.31993-0.36-0.7164 1.899-0.7164 1.899-19.73729 0c-15.06396 0-19.89358-0.1881-20.39738-0.7956z"/><path class=path d="m343.17074 761.49867c-0.4995-1.8553-0.5058-3.1479-0.0216-4.5369 0.3726-1.0683 0.549-2.0701 0.3933-2.2265-0.1566-0.1566-3.19788-0.324-6.75891-0.3726-3.68667-0.05-6.55758-0.3609-6.66711-0.7218-0.1062-0.3483 1.38717-1.59 3.31767-2.7593 1.93059-1.1692 3.66264-2.5232 3.84903-3.0089 0.2799-0.7281 3.71088-0.8829 19.5793-0.8829l19.24045 0 0.4104 1.7421c0.2259 0.958 0.96696 2.6684 1.64736 3.8008 0.96705 1.6093 1.05309 2.1239 0.3933 2.3572-2.68857 0.9515-32.92538 9.2032-33.72329 9.2032-0.5886 0-1.23156-1.0045-1.65969-2.5946z"/><path class=path d="m344.17666 772.11887c4.27941-0.5652 4.554-1.1277 2.26782-4.6423-1.08018-1.6606-1.85355-3.109-1.71855-3.2186 0.2124-0.1728 9.98399-2.9293 29.55982-8.3394l5.24322-1.4491 1.47762 2.9537c2.21427 4.4262 6.26481 14.0794 6.00228 14.3045-0.126 0.108-10.49175 0.3303-23.0341 0.4923-12.54234 0.1629-21.45155 0.117-19.79823-0.1017z"/><path class=path d="m362.79249 787.69667c-2.96136-3.0446-6.38199-6.29-7.6014-7.2121-1.75617-1.3281-2.02995-1.7962-1.31697-2.2521 0.765-0.4887 0.7335-0.8298-0.2079-2.266-1.20087-1.8328-4.35978-3.4187-7.16499-3.5973-3.22794-0.2052 20.25689-0.9999 30.54371-1.0332l10.13522-0.033 2.73105 4.1398c1.50201 2.2769 2.64222 4.204 2.53377 4.2824-0.1089 0.078-4.75803 2.65-10.33244 5.7148-5.57433 3.0648-10.99037 6.0718-12.03557 6.6822l-1.90035 1.1098-5.38434-5.5355z"/><path class=path d="m368.50615 795.78567c-0.93735-1.2288-1.59318-2.3205-1.45746-2.4259 0.98883-0.7677 24.78499-13.7099 25.20824-13.7099 0.2961 0 0.8982 0.4338 1.33767 0.9634 0.4401 0.5301 2.12481 1.7084 3.74454 2.6188l2.94498 1.6555-1.8369 1.8369c-1.34334 1.3433-5.28759 3.1077-14.67878 6.5662-7.06302 2.6011-13.00296 4.7292-13.19991 4.7292-0.1971 0-1.12491-1.0055-2.06226-2.2343z"/><path class=path d="m395.99933 823.11787-1.45449-2.2189-2.13273 1.6267-2.13273 1.6268-4.21002-4.5885c-3.53457-3.8522-16.4529-21.9376-15.98694-22.3812 0.3933-0.3744 26.54484-9.8539 26.66203-9.6642 0.0743 0.1206 1.18386 1.5368 2.46582 3.1482l2.33082 2.9296-1.79874 15.6253c-0.98928 8.5939-1.9089 15.7355-2.04363 15.8702-0.135 0.135-0.8991-0.7533-1.69947-1.9739z"/><path class=path d="m400.3395 829.77657-2.92833-4.0706 1.84284-15.9684c1.01358-8.7827 1.96038-16.086 2.10411-16.2296 0.144-0.144 1.50687 0.558 3.02922 1.5598 1.52235 1.0015 4.69206 2.9269 7.04376 4.2787 2.3517 1.3518 4.27581 2.7385 4.27581 3.0815 0 0.6543-12.03599 31.4191-12.29182 31.4191-0.081 0-1.46511-1.8318-3.07566-4.0706z"/><path class=path d="m409.2234 840.63397c-3.18132-3.3615-5.79069-6.4359-5.79843-6.832-0.008-0.396 2.75625-7.7826 6.14232-16.4143 6.09174-15.529 6.1695-15.6812 7.38468-14.466 1.21518 1.2151 1.21311 1.4503-0.198 22.3453-0.7839 11.6145-1.49796 21.1987-1.58625 21.2981-0.0883 0.099-2.76336-2.5696-5.94468-5.9311z"/><path class=path d="m422.64337 851.61997c-2.62278-1.4458-5.12649-3.0305-7.72362-4.8888-0.1872-0.1341 2.23506-38.7619 2.61855-41.7535 0.1242-0.9718 0.4896-0.6462 1.56744 1.4001 1.7307 3.285 1.75257 4.2928 0.1377 6.3452-1.66923 2.1221-1.5984 3.2831 0.3609 5.9093 1.29618 1.7376 1.55484 2.6508 1.2708 4.4858l-0.3564 2.3041 2.76435 0.4149c3.87692 0.5814 8.03078 3.4255 10.33604 7.0771 3.13811 4.9707 3.14756 4.9061-1.89171 12.8707-2.5173 3.9786-4.85937 7.3224-5.20461 7.4309-0.3456 0.108-2.09088-0.6093-3.87936-1.5954z"/><path class=path d="m432.83144 855.18327c-7.29027-1.8006-7.16859-1.3225-2.30832-9.0731 2.33757-3.7276 4.40775-6.9351 4.60026-7.1277 0.1926-0.1926 1.12662 2.5457 2.07576 6.085 0.94914 3.5393 2.28456 7.5308 2.96766 8.8697l1.242 2.4345-2.07162-0.047c-1.1394-0.026-4.06701-0.5391-6.50574-1.1418z"/></g></svg></div><script src=https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js></script><script src=http://code.jquery.com/jquery-1.12.4.min.js></script><script>function init(){document.querySelectorAll(".path").forEach(function(t){bbox=t.getBBox(),pathSegmentsArray.push({x:bbox.x,y:bbox.y,width:bbox.width,height:bbox.height})}),document.querySelectorAll(".path").forEach(function(t){randomX=Math.random()*width/2,randomY=Math.random()*height/2,bbox=t,addClass(bbox,"chunks");TweenMax.to(bbox,1,{x:randomX,y:randomY,fill:getRandomColor(),opacity:1,rotation:0,transformOrigin:"0% 0%",ease:Expo.easeInOut})});var t=$(".chunks");$(".chunks").each(function(){randomX=Math.random()*width/2,randomY=Math.random()*height/2;var a=new TimelineMax;a.to(t,1,{delay:"+="+.2*Math.random(),y:"-="+5*Math.random()+"px",rotation:"-="+5*Math.random(),yoyo:!0,repeat:-1,ease:Power2.easeInOut}),a.play()})}function loop(){splited?(document.querySelectorAll(".path").forEach(function(t){bbox=t;TweenMax.to(bbox,1,{x:0,y:0,fill:getRandomColor(),rotation:0,transformOrigin:"0% 0%",ease:Expo.easeInOut})}),splited=!1):(init(),splited=!0)}function render(){setInterval(function(){init(),loop()},1e3)}function hasClass(t,a){return t.classList?t.classList.contains(a):!!t.className.match(new RegExp("(\\s|^)"+a+"(\\s|$)"))}function addClass(t,a){t.classList?t.classList.add(a):hasClass(t,a)||(t.className+=" "+a)}function removeClass(t,a){if(t.classList)t.classList.remove(a);else if(hasClass(t,a)){var o=new RegExp("(\\s|^)"+a+"(\\s|$)");t.className=t.className.replace(o," ")}}function getRandomColor(){for(var t="ABCDEF",a="#",o=0;o<6;o++)a+=t[Math.floor(16*Math.random())];return a}var totalPath=$(".path").length,pathSegmentsArray=new Array,svgWidth=$("#svgObj").attr("width"),svgHeight=$("#svgObj").attr("height"),width=window.innerWidth,height=window.innerHeight,splited=!0;window.onload=function(){render()}</script> 

здесь, все пути размещены в случайном положении, но только в одном направлении. Как я могу поместить пути вокруг SVG.

Заранее спасибо.

Смежные вопросы