미리보기 안의 버튼·입력·포인터로 모션을 확인하세요. 실행 방식은 아래 활용 메모를 참고하세요.
실행용 통합 HTML · 공식 GSAP 3.15.0
<!doctype html>
<!-- Source: https://codepen.io/GreenSock/pen/MWMVKmp; archived original panels separately. Runtime: official GSAP 3.15.0. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Morph between SVG shapes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin:0;
padding:0;
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background: #0e100f;
overflow: hidden;
}
.container {
position: relative;
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
border-radius: 9px;
}
#svg-stage {
width:60%;
max-height:60vh;
max-width:500px;
overflow:visible;
}
</style></head><body>
<div class="container">
<svg id="svg-stage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="99" y2="99" gradientUnits="userSpaceOnUse">
<stop offset="0.2" stop-color="rgb(255, 135, 9)" />
<stop offset="0.7" stop-color="rgb(247, 189, 248)" />
</linearGradient>
<path id="speech" d="M20,1 85,1 85,66 51,98 51,66 20,66z">
<path id="lightning" d="M47.1,0.8 73.3,0.8 61.9,37.2 77.1,37.2 30.7,99.4 45.8,51.9 29,51.9z" />
<path id="square" d="M50,1l49,49L50,99L1,50L50,1z" />
<path id="grid" fill-rule="evenodd" clip-rule="evenodd" d="M2 4H34.1774V35.4113H64.8226V4H97V36.1774H65.5887V66.8226H97V99H64.8226V67.5887H34.1774V99H2V66.8226H33.4113V36.1774H2V4Z" fill="url(#paint0_radial_6460_9690)" />
<path id="bulb" d="M51.5 19.5033C56.7965 19.5033 61.6464 21.0945 65.6667 23.895C72.1757 28.3504 76.4512 35.8609 76.4512 44.3898C76.4512 51.8366 72.2395 57.5013 68.4107 62.2749C65.1562 66.2848 62.1569 69.6581 62.0931 73.0315C62.0931 74.6864 60.6254 76.1503 58.9024 76.1503C54.1802 76.1503 49.3941 76.1503 44.6719 76.1503C42.8851 76.1503 41.4812 74.6864 41.4812 73.0315C41.1622 69.0217 36.8228 65.2028 32.8664 60.2382C29.548 56.0374 26.5488 51.0092 26.5488 44.3898C26.5488 37.0702 29.7395 30.4508 34.7808 25.9318C39.2477 21.9219 45.1186 19.5033 51.5 19.5033ZM87.4272 62.2113C88.5758 62.8478 89.0225 64.3753 88.3206 65.5846C87.6186 66.794 86.0871 67.1759 84.9384 66.5394C82.1306 64.8845 79.3228 63.2933 76.515 61.6385C77.4722 60.3018 78.3018 58.8379 79.0038 57.374C81.8116 58.9652 84.6194 60.5564 87.4272 62.2113ZM26.5488 61.6385C23.741 63.2933 20.9332 64.8845 18.1254 66.4757C16.9129 67.1759 15.3814 66.7303 14.7432 65.5846C14.0413 64.3753 14.4242 62.8478 15.6366 62.2113C18.4444 60.5564 21.1884 58.9652 23.9962 57.374C24.6982 58.8379 25.5916 60.3018 26.5488 61.6385ZM21.1884 46.8721C17.9339 46.8721 14.7432 46.8721 11.4887 46.8721C10.1486 46.8721 9 45.7264 9 44.3898C9 43.0531 10.1486 41.9075 11.4887 41.9075C14.7432 41.9075 17.9339 41.9075 21.1884 41.9075C21.1246 42.7349 21.1246 43.5623 21.1246 44.3898C21.1246 45.2172 21.1246 46.0446 21.1884 46.8721ZM23.9962 31.4055C21.1884 29.8143 18.4444 28.2231 15.6366 26.6319C14.4242 25.9318 14.0413 24.4042 14.7432 23.1949C15.3814 21.9856 16.9129 21.6037 18.1254 22.3038C20.9332 23.895 23.741 25.4862 26.5488 27.1411C25.5916 28.4777 24.6982 29.9416 23.9962 31.4055ZM34.2065 19.4396C32.6111 16.6391 30.952 13.8386 29.3566 11.0381C28.6547 9.89239 29.1013 8.36483 30.25 7.6647C31.4625 6.96457 32.994 7.41011 33.6959 8.61942C35.2913 11.3563 36.8866 14.1568 38.5458 16.9574C37.0143 17.6575 35.5466 18.4849 34.2065 19.4396ZM49.0113 14.1568C49.0113 10.9108 49.0113 7.6647 49.0113 4.48228C49.0113 3.14567 50.1599 2 51.5638 2C52.9039 2 53.9887 3.14567 53.9887 4.48228C53.9887 7.6647 53.9887 10.9108 53.9887 14.1568C53.223 14.0932 52.3934 14.0295 51.5638 14.0295C50.6704 14.0295 49.8408 14.0932 49.0113 14.1568ZM64.518 16.9574C64.9647 16.1936 65.4114 15.4934 65.7943 14.7297C66.3048 13.9022 66.8153 13.0748 67.262 12.1837C67.964 10.9744 68.6659 9.76509 69.3679 8.55577C70.0698 7.4101 71.5375 6.96457 72.75 7.6647C73.9625 8.36483 74.3454 9.89239 73.7072 11.0381C72.9414 12.311 72.2395 13.584 71.4737 14.857C71.027 15.6207 70.5803 16.3845 70.1336 17.1483C69.6869 17.9121 69.2402 18.6759 68.8574 19.4396C68.0916 18.9304 67.262 18.4213 66.4962 17.9757C65.8581 17.5938 65.1562 17.2756 64.518 16.9574ZM76.515 27.1411C77.1532 26.7592 77.8551 26.3773 78.4932 25.9954C79.259 25.5499 79.961 25.168 80.7267 24.7224C82.1306 23.895 83.5345 23.1312 84.9384 22.3038C86.0871 21.6037 87.6186 21.9856 88.3206 23.1949C89.0225 24.4042 88.5758 25.9318 87.4272 26.6319C86.0233 27.3957 84.6832 28.2231 83.2793 28.9869C82.5135 29.4324 81.7478 29.878 80.9182 30.3235C80.28 30.7054 79.6419 31.0873 79.0038 31.4692C78.6847 30.7054 77.0255 27.8412 76.515 27.1411ZM81.8116 41.9075C85.0661 41.9075 88.3206 41.9075 91.5113 41.9075C92.9152 41.9075 94 42.9895 94 44.3898C94 45.7264 92.9152 46.8721 91.5113 46.8721C88.3206 46.8721 85.0661 46.8721 81.8116 46.8721C81.8754 46.0446 81.9392 45.2172 81.9392 44.3898C81.9392 43.5623 81.8754 42.7349 81.8116 41.9075ZM51.7553 99C54.6269 99 57.1156 96.9633 58.9024 93.7172C54.1802 93.7172 49.3941 93.7172 44.6719 93.7172C46.3949 96.9633 48.9475 99 51.7553 99ZM44.6719 85.7612C49.3941 85.7612 54.1802 85.7612 58.9024 85.7612C60.6892 85.7612 62.0931 87.1614 62.0931 88.8799C62.0931 90.6621 60.6892 91.9987 58.9024 91.9987C54.1802 91.9987 49.3941 91.9987 44.6719 91.9987C42.8851 91.9987 41.4812 90.6621 41.4812 88.8799C41.4812 87.1614 42.8851 85.7612 44.6719 85.7612ZM44.6719 77.8051C49.3941 77.8051 54.1802 77.8051 58.9024 77.8051C60.6892 77.8051 62.0931 79.2054 62.0931 80.9239C62.0931 82.6424 60.6892 84.0426 58.9024 84.0426C54.1802 84.0426 49.3941 84.0426 44.6719 84.0426C42.8851 84.0426 41.4812 82.6424 41.4812 80.9239C41.4812 79.2054 42.8851 77.8051 44.6719 77.8051Z" fill="black" />
<path id="rocket" d="M53.2635 68.6401C59.776 64.496 66.1405 59.7599 71.3949 54.5058C89.3043 36.5975 91.3025 20.8353 89.4523 15.2112C92.1166 12.5471 94.7808 9.8831 97.445 7.21906C98.185 6.47904 98.185 5.29502 97.445 4.55501C96.7049 3.815 95.5208 3.815 94.7807 4.55501C92.1165 7.21905 89.4523 9.8831 86.7881 12.5471C81.1637 10.6971 65.4005 12.6951 47.4911 30.6034C42.2366 35.8575 37.5003 42.2216 33.356 48.7337C27.3615 47.2537 16.9267 47.2537 9.6741 55.3198C1.38545 64.422 6.26983 73.0801 8.11997 71.3041C9.60009 69.7501 12.1163 60.6479 23.0691 67.678C21.293 71.3781 21.367 73.6721 22.5511 74.7821C24.1052 76.3362 25.6593 77.8902 27.2135 79.4442C28.3976 80.6282 30.6177 80.7762 34.392 78.9262C41.3486 89.8784 32.2459 92.3944 30.7657 93.9484C28.9156 95.7245 37.5743 100.609 46.677 92.3204C54.7436 85.0683 54.7436 74.6341 53.2635 68.6401ZM64.5864 37.4115C61.9222 34.7475 61.9222 30.3074 64.5864 27.6434C67.3246 24.9053 71.6909 24.9053 74.3552 27.6434C77.0934 30.3814 77.0934 34.6735 74.3552 37.4115C71.6909 40.0756 67.3246 40.0756 64.5864 37.4115ZM20.1089 77.0762C20.1089 77.0762 12.7083 78.4082 9.97012 92.0244C23.5872 89.3604 24.9193 81.8863 24.9193 81.8863C23.3652 80.2582 21.737 78.7042 20.1089 77.0762Z" fill="black" />
<path id="thumb" d="M94 44.0172C94 38.5158 89.5107 34.0458 83.9853 34.0458C83.9853 34.0458 83.2256 34.0458 82.0514 34.0458C76.5261 34.0458 60.917 33.6332 60.986 29.3009C60.986 27.9943 61.0551 26.5501 61.1932 24.9685C61.4004 23.1117 61.7458 21.255 61.8839 19.6733C62.8508 8.25788 58.845 2 55.3916 2C54.5628 2 48.2777 2.41261 48.6921 5.78223C48.8303 7.3639 49.5209 15.341 47.4489 22.149C44.1337 28.2006 33.9809 39.2722 27.834 44.2923C27.6958 43.8109 27.4886 43.2607 27.3505 42.7794C26.9361 41.3352 26.5217 39.8911 26.1073 38.447C24.5878 38.8596 23.1374 39.2722 21.687 39.7536C15.8854 41.404 10.1528 43.1232 4.35121 44.8424C2.90081 45.255 1.4504 45.6676 0 46.0802C0.414401 47.5931 0.828805 49.0372 1.24321 50.4814C5.52535 64.8539 9.73843 79.2263 14.0206 93.6676C14.435 95.1117 14.9184 96.5559 15.3328 98C16.7832 97.5874 18.2336 97.1748 19.7531 96.7622C25.4857 95.043 31.2873 93.3238 37.0198 91.6733C38.5393 91.192 39.9897 90.7794 41.4401 90.3668C41.0257 88.9226 40.6113 87.4097 40.1278 85.9656C39.1609 82.6648 38.194 79.3639 37.227 76.063C38.8156 75.6504 41.3711 75.3066 45.2388 75.3066C47.1036 75.3066 49.2447 75.3754 51.662 75.5817C58.9831 76.2693 65.8898 76.7507 69.7575 77.2321C70.6554 77.3696 71.6914 77.4384 72.7274 77.4384C76.1808 77.4384 79.9794 76.6132 81.0154 73.7249C81.3608 72.8997 81.4989 72.1433 81.637 71.3868C84.745 70.2178 87.1624 67.3983 87.3005 63.8911C87.3696 63.2034 87.3005 62.5845 87.2315 61.9656C89.5797 60.5903 91.2373 58.1146 91.3755 55.2264C91.4445 53.851 91.1683 52.5444 90.6848 51.3754C92.6877 49.5186 94 46.9742 94 44.0172ZM18.4409 92.361C14.1587 77.9885 9.94563 63.5473 5.66348 49.1748C11.4651 47.5244 17.1977 45.8052 22.9993 44.086C27.2123 58.4584 31.4945 72.8997 35.7766 87.2722C29.975 88.9226 24.1734 90.6418 18.4409 92.361Z" fill="black" />
</defs>
<path id="morph" fill="url(#grad)" d="M74.6 50.2h-.2v-.4h.2a24.4 24.4 0 1 0-24.4-24.4v.2h-.4v-.2a24.4 24.4 0 1 0-24.4 24.4h.2v.4h-.2a24.4 24.4 0 1 0 24.4 24.4v-.2h.4v.2a24.4 24.4 0 1 0 24.4-24.4z" />
</svg>
</div>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-gsap.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-MorphSVGPlugin.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-GSDevTools.min.js"></script>
<script>
gsap.registerPlugin(GSDevTools, MorphSVGPlugin);
let tl = gsap
.timeline({
defaults: { duration: 2, ease: "expo.inOut" },
repeat: -1
})
.to("#morph", { morphSVG: "#speech" })
.to("#morph", { morphSVG: "#rocket" })
.to("#morph", { morphSVG: "#lightning" })
.to("#morph", { morphSVG: "#thumb" })
.to("#morph", { morphSVG: "#square" })
.to("#morph", { morphSVG: "#grid" })
.to("#morph", { morphSVG: "#bulb" })
.to("#morph", { morphSVG: "#morph" })
GSDevTools.create({animation: tl, minimal: true});
</script></body></html>
원본 HTML
<div class="container">
<svg id="svg-stage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="99" y2="99" gradientUnits="userSpaceOnUse">
<stop offset="0.2" stop-color="rgb(255, 135, 9)" />
<stop offset="0.7" stop-color="rgb(247, 189, 248)" />
</linearGradient>
<path id="speech" d="M20,1 85,1 85,66 51,98 51,66 20,66z">
<path id="lightning" d="M47.1,0.8 73.3,0.8 61.9,37.2 77.1,37.2 30.7,99.4 45.8,51.9 29,51.9z" />
<path id="square" d="M50,1l49,49L50,99L1,50L50,1z" />
<path id="grid" fill-rule="evenodd" clip-rule="evenodd" d="M2 4H34.1774V35.4113H64.8226V4H97V36.1774H65.5887V66.8226H97V99H64.8226V67.5887H34.1774V99H2V66.8226H33.4113V36.1774H2V4Z" fill="url(#paint0_radial_6460_9690)" />
<path id="bulb" d="M51.5 19.5033C56.7965 19.5033 61.6464 21.0945 65.6667 23.895C72.1757 28.3504 76.4512 35.8609 76.4512 44.3898C76.4512 51.8366 72.2395 57.5013 68.4107 62.2749C65.1562 66.2848 62.1569 69.6581 62.0931 73.0315C62.0931 74.6864 60.6254 76.1503 58.9024 76.1503C54.1802 76.1503 49.3941 76.1503 44.6719 76.1503C42.8851 76.1503 41.4812 74.6864 41.4812 73.0315C41.1622 69.0217 36.8228 65.2028 32.8664 60.2382C29.548 56.0374 26.5488 51.0092 26.5488 44.3898C26.5488 37.0702 29.7395 30.4508 34.7808 25.9318C39.2477 21.9219 45.1186 19.5033 51.5 19.5033ZM87.4272 62.2113C88.5758 62.8478 89.0225 64.3753 88.3206 65.5846C87.6186 66.794 86.0871 67.1759 84.9384 66.5394C82.1306 64.8845 79.3228 63.2933 76.515 61.6385C77.4722 60.3018 78.3018 58.8379 79.0038 57.374C81.8116 58.9652 84.6194 60.5564 87.4272 62.2113ZM26.5488 61.6385C23.741 63.2933 20.9332 64.8845 18.1254 66.4757C16.9129 67.1759 15.3814 66.7303 14.7432 65.5846C14.0413 64.3753 14.4242 62.8478 15.6366 62.2113C18.4444 60.5564 21.1884 58.9652 23.9962 57.374C24.6982 58.8379 25.5916 60.3018 26.5488 61.6385ZM21.1884 46.8721C17.9339 46.8721 14.7432 46.8721 11.4887 46.8721C10.1486 46.8721 9 45.7264 9 44.3898C9 43.0531 10.1486 41.9075 11.4887 41.9075C14.7432 41.9075 17.9339 41.9075 21.1884 41.9075C21.1246 42.7349 21.1246 43.5623 21.1246 44.3898C21.1246 45.2172 21.1246 46.0446 21.1884 46.8721ZM23.9962 31.4055C21.1884 29.8143 18.4444 28.2231 15.6366 26.6319C14.4242 25.9318 14.0413 24.4042 14.7432 23.1949C15.3814 21.9856 16.9129 21.6037 18.1254 22.3038C20.9332 23.895 23.741 25.4862 26.5488 27.1411C25.5916 28.4777 24.6982 29.9416 23.9962 31.4055ZM34.2065 19.4396C32.6111 16.6391 30.952 13.8386 29.3566 11.0381C28.6547 9.89239 29.1013 8.36483 30.25 7.6647C31.4625 6.96457 32.994 7.41011 33.6959 8.61942C35.2913 11.3563 36.8866 14.1568 38.5458 16.9574C37.0143 17.6575 35.5466 18.4849 34.2065 19.4396ZM49.0113 14.1568C49.0113 10.9108 49.0113 7.6647 49.0113 4.48228C49.0113 3.14567 50.1599 2 51.5638 2C52.9039 2 53.9887 3.14567 53.9887 4.48228C53.9887 7.6647 53.9887 10.9108 53.9887 14.1568C53.223 14.0932 52.3934 14.0295 51.5638 14.0295C50.6704 14.0295 49.8408 14.0932 49.0113 14.1568ZM64.518 16.9574C64.9647 16.1936 65.4114 15.4934 65.7943 14.7297C66.3048 13.9022 66.8153 13.0748 67.262 12.1837C67.964 10.9744 68.6659 9.76509 69.3679 8.55577C70.0698 7.4101 71.5375 6.96457 72.75 7.6647C73.9625 8.36483 74.3454 9.89239 73.7072 11.0381C72.9414 12.311 72.2395 13.584 71.4737 14.857C71.027 15.6207 70.5803 16.3845 70.1336 17.1483C69.6869 17.9121 69.2402 18.6759 68.8574 19.4396C68.0916 18.9304 67.262 18.4213 66.4962 17.9757C65.8581 17.5938 65.1562 17.2756 64.518 16.9574ZM76.515 27.1411C77.1532 26.7592 77.8551 26.3773 78.4932 25.9954C79.259 25.5499 79.961 25.168 80.7267 24.7224C82.1306 23.895 83.5345 23.1312 84.9384 22.3038C86.0871 21.6037 87.6186 21.9856 88.3206 23.1949C89.0225 24.4042 88.5758 25.9318 87.4272 26.6319C86.0233 27.3957 84.6832 28.2231 83.2793 28.9869C82.5135 29.4324 81.7478 29.878 80.9182 30.3235C80.28 30.7054 79.6419 31.0873 79.0038 31.4692C78.6847 30.7054 77.0255 27.8412 76.515 27.1411ZM81.8116 41.9075C85.0661 41.9075 88.3206 41.9075 91.5113 41.9075C92.9152 41.9075 94 42.9895 94 44.3898C94 45.7264 92.9152 46.8721 91.5113 46.8721C88.3206 46.8721 85.0661 46.8721 81.8116 46.8721C81.8754 46.0446 81.9392 45.2172 81.9392 44.3898C81.9392 43.5623 81.8754 42.7349 81.8116 41.9075ZM51.7553 99C54.6269 99 57.1156 96.9633 58.9024 93.7172C54.1802 93.7172 49.3941 93.7172 44.6719 93.7172C46.3949 96.9633 48.9475 99 51.7553 99ZM44.6719 85.7612C49.3941 85.7612 54.1802 85.7612 58.9024 85.7612C60.6892 85.7612 62.0931 87.1614 62.0931 88.8799C62.0931 90.6621 60.6892 91.9987 58.9024 91.9987C54.1802 91.9987 49.3941 91.9987 44.6719 91.9987C42.8851 91.9987 41.4812 90.6621 41.4812 88.8799C41.4812 87.1614 42.8851 85.7612 44.6719 85.7612ZM44.6719 77.8051C49.3941 77.8051 54.1802 77.8051 58.9024 77.8051C60.6892 77.8051 62.0931 79.2054 62.0931 80.9239C62.0931 82.6424 60.6892 84.0426 58.9024 84.0426C54.1802 84.0426 49.3941 84.0426 44.6719 84.0426C42.8851 84.0426 41.4812 82.6424 41.4812 80.9239C41.4812 79.2054 42.8851 77.8051 44.6719 77.8051Z" fill="black" />
<path id="rocket" d="M53.2635 68.6401C59.776 64.496 66.1405 59.7599 71.3949 54.5058C89.3043 36.5975 91.3025 20.8353 89.4523 15.2112C92.1166 12.5471 94.7808 9.8831 97.445 7.21906C98.185 6.47904 98.185 5.29502 97.445 4.55501C96.7049 3.815 95.5208 3.815 94.7807 4.55501C92.1165 7.21905 89.4523 9.8831 86.7881 12.5471C81.1637 10.6971 65.4005 12.6951 47.4911 30.6034C42.2366 35.8575 37.5003 42.2216 33.356 48.7337C27.3615 47.2537 16.9267 47.2537 9.6741 55.3198C1.38545 64.422 6.26983 73.0801 8.11997 71.3041C9.60009 69.7501 12.1163 60.6479 23.0691 67.678C21.293 71.3781 21.367 73.6721 22.5511 74.7821C24.1052 76.3362 25.6593 77.8902 27.2135 79.4442C28.3976 80.6282 30.6177 80.7762 34.392 78.9262C41.3486 89.8784 32.2459 92.3944 30.7657 93.9484C28.9156 95.7245 37.5743 100.609 46.677 92.3204C54.7436 85.0683 54.7436 74.6341 53.2635 68.6401ZM64.5864 37.4115C61.9222 34.7475 61.9222 30.3074 64.5864 27.6434C67.3246 24.9053 71.6909 24.9053 74.3552 27.6434C77.0934 30.3814 77.0934 34.6735 74.3552 37.4115C71.6909 40.0756 67.3246 40.0756 64.5864 37.4115ZM20.1089 77.0762C20.1089 77.0762 12.7083 78.4082 9.97012 92.0244C23.5872 89.3604 24.9193 81.8863 24.9193 81.8863C23.3652 80.2582 21.737 78.7042 20.1089 77.0762Z" fill="black" />
<path id="thumb" d="M94 44.0172C94 38.5158 89.5107 34.0458 83.9853 34.0458C83.9853 34.0458 83.2256 34.0458 82.0514 34.0458C76.5261 34.0458 60.917 33.6332 60.986 29.3009C60.986 27.9943 61.0551 26.5501 61.1932 24.9685C61.4004 23.1117 61.7458 21.255 61.8839 19.6733C62.8508 8.25788 58.845 2 55.3916 2C54.5628 2 48.2777 2.41261 48.6921 5.78223C48.8303 7.3639 49.5209 15.341 47.4489 22.149C44.1337 28.2006 33.9809 39.2722 27.834 44.2923C27.6958 43.8109 27.4886 43.2607 27.3505 42.7794C26.9361 41.3352 26.5217 39.8911 26.1073 38.447C24.5878 38.8596 23.1374 39.2722 21.687 39.7536C15.8854 41.404 10.1528 43.1232 4.35121 44.8424C2.90081 45.255 1.4504 45.6676 0 46.0802C0.414401 47.5931 0.828805 49.0372 1.24321 50.4814C5.52535 64.8539 9.73843 79.2263 14.0206 93.6676C14.435 95.1117 14.9184 96.5559 15.3328 98C16.7832 97.5874 18.2336 97.1748 19.7531 96.7622C25.4857 95.043 31.2873 93.3238 37.0198 91.6733C38.5393 91.192 39.9897 90.7794 41.4401 90.3668C41.0257 88.9226 40.6113 87.4097 40.1278 85.9656C39.1609 82.6648 38.194 79.3639 37.227 76.063C38.8156 75.6504 41.3711 75.3066 45.2388 75.3066C47.1036 75.3066 49.2447 75.3754 51.662 75.5817C58.9831 76.2693 65.8898 76.7507 69.7575 77.2321C70.6554 77.3696 71.6914 77.4384 72.7274 77.4384C76.1808 77.4384 79.9794 76.6132 81.0154 73.7249C81.3608 72.8997 81.4989 72.1433 81.637 71.3868C84.745 70.2178 87.1624 67.3983 87.3005 63.8911C87.3696 63.2034 87.3005 62.5845 87.2315 61.9656C89.5797 60.5903 91.2373 58.1146 91.3755 55.2264C91.4445 53.851 91.1683 52.5444 90.6848 51.3754C92.6877 49.5186 94 46.9742 94 44.0172ZM18.4409 92.361C14.1587 77.9885 9.94563 63.5473 5.66348 49.1748C11.4651 47.5244 17.1977 45.8052 22.9993 44.086C27.2123 58.4584 31.4945 72.8997 35.7766 87.2722C29.975 88.9226 24.1734 90.6418 18.4409 92.361Z" fill="black" />
</defs>
<path id="morph" fill="url(#grad)" d="M74.6 50.2h-.2v-.4h.2a24.4 24.4 0 1 0-24.4-24.4v.2h-.4v-.2a24.4 24.4 0 1 0-24.4 24.4h.2v.4h-.2a24.4 24.4 0 1 0 24.4 24.4v-.2h.4v.2a24.4 24.4 0 1 0 24.4-24.4z" />
</svg>
</div>원본 CSS
body {
margin:0;
padding:0;
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background: #0e100f;
overflow: hidden;
}
.container {
position: relative;
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
border-radius: 9px;
}
#svg-stage {
width:60%;
max-height:60vh;
max-width:500px;
overflow:visible;
}원본 JavaScript
gsap.registerPlugin(GSDevTools, MorphSVGPlugin);
let tl = gsap
.timeline({
defaults: { duration: 2, ease: "expo.inOut" },
repeat: -1
})
.to("#morph", { morphSVG: "#speech" })
.to("#morph", { morphSVG: "#rocket" })
.to("#morph", { morphSVG: "#lightning" })
.to("#morph", { morphSVG: "#thumb" })
.to("#morph", { morphSVG: "#square" })
.to("#morph", { morphSVG: "#grid" })
.to("#morph", { morphSVG: "#bulb" })
.to("#morph", { morphSVG: "#morph" })
GSDevTools.create({animation: tl, minimal: true});검증·권리 정보
- 실행 검증
- 데스크톱 실행 확인
- 검증 수준
- 샘플 실행
- 권리 확인
- 확인 필요
서로 다른 SVG 모양 사이를 이어 변형합니다.
Chromium 153 · 데스크톱 1280×900 · 격리 iframe에서 wait 입력과 화면 변화 확인. 모바일·프로젝트 적용은 미검증.
원본 패널은 보존하고 실행용 문서에 공식 GSAP 3.15.0과 공통 의존성을 연결했습니다. 모션 감소 설정과 실제 프로젝트 적용은 별도로 확인하세요.
보관·활용 메모
GSAP Demo Hub의 공개 예제입니다. 원본 HTML·CSS·JavaScript와 설정, 시연 파일을 함께 보관했습니다. 통합 HTML은 공통 스타일과 실행 의존성을 연결한 파일이며 SCSS는 원본 컴파일 결과를 사용합니다.
구형 CodePen 전용 의존성을 그대로 배포하지 않고, 통합 실행에는 공식 GSAP 3.15.0을 연결했습니다. 원본 패널과 원본 설정은 ZIP에 별도로 보존되어 있습니다. 예제의 이미지·폰트 등 외부 소재 요청은 유지됩니다.
보관일 2026-10-27 · 공개 원본의 코드·제작자·설정을 보존했습니다. GSAP 엔진과 개별 코드·이미지·폰트의 사용 조건은 각각 확인해야 합니다. 자유 재배포 허용으로 판단한 자료가 아닙니다.