Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
<svg viewBox="0 0 1146 689" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
  <path id="ant" d="M568.915 167.284l-43.06-137.99m62.307 137.664l43.061-137.99" fill="none" fill-rule="nonzero" stroke="#4d4ada" stroke-width="3.26"/>
  <path id="TV" d="M382.487 160.107c-6.882 0-12.581 5.345-13.022 12.213l-18.587 289.484c-.468 7.3 5.154 13.559 12.462 13.873l51.601 2.218 15.659 96.507h317.082l13.502-81.624 35.641 1.532" fill="#fcaacf"/>
  <path id="base" d="M430.6 573.749l-15.985-98.517c137.241 17.82 213.091 18.539 347.42 11.743l-14.353 86.774H430.6z" fill-opacity=".19" fill-rule="nonzero"/>
  <path id="screen" d="M407.764 214.911c20.552-37.841 309.83-47.555 336.656-26.75 114.828 89.057 68.883 215.977 22.835 256.629-37.15 32.796-336.125 16.964-375.24-17.512-39.114-34.476.724-184.702 15.749-212.367z" fill="#2249b3" fill-rule="nonzero"/>
  <path id="heads" d="M522.48 274.855c-54.11-42.11-76.611-2.602-81.104 22.717-4.493 25.319 2.408 42.155 6.774 64.826 2.26 11.737.531 19.495-2.871 30.954l-3.903 13.147s-5.883 14.907-9.145 19.474c-3.262 4.567-3.263 16.311-3.263 16.311 40.761 9.248 54.019 9.576 93.512 14.68 1.018-7.438-11.232-28.726-24.458-50.465 0-13.892-1.033-7.226 0-32.085 0 0 24.458 3.267 24.458-7.583 0-6.174 4.714-26.857 4.714-26.857s8.321 1.531 6.637-2.006c-1.544-3.242-3.55-8.644-3.55-8.644s-.463-4.476-2.178-8.44c-1.604-3.707.496-15.781 0-19.79-2.845-22.998-5.623-26.239-5.623-26.239zm98.789 4.872c54.11-42.109 76.611-2.602 81.104 22.717 4.493 25.319-2.409 42.156-6.775 64.827-2.26 11.737-.531 19.495 2.871 30.953l3.904 13.147s5.883 14.908 9.145 19.475c3.262 4.567 3.868 27.749 3.868 27.749-41.429 5.872-83.511 3.915-94.602 3.915-1.018-7.438 11.716-29.4 24.942-51.139 0-13.891 1.033-7.226 0-32.085 0 0-24.457 3.267-24.457-7.583 0-6.174-4.715-26.856-4.715-26.856s-8.321 1.531-6.637-2.007c1.544-3.241 3.55-8.643 3.55-8.643s.464-4.477 2.178-8.441c1.604-3.707-.495-15.781 0-19.789 2.845-22.998 5.624-26.24 5.624-26.24z" fill="#fff" fill-rule="nonzero"/>
  <path id="hair" d="M632.874 289.039c-15.435-8.026-18.936-9.4-14.46-19.072 7.1-24.696 56.542-14.867 59.734-13.274 24.745 12.347 16.708 22.594 26.548 39.359 10.007 17.051 5.044 4.718 5.044 24.938 0 20.219 21.195 21.83 32.926 35.721 11.73 13.891 10.24 22.167 10.187 42.731-.034 12.789-19.56 5.027-20.177 28.488-.494 18.769-29.117 1.294-42.082-9.46-12.713-10.545-13.175-38.303-17.126-38.673-4.94-.463-12.916-15.523-11.373-32.656 1.544-17.132 3.346-25.071-11.008-30.936-14.354-5.865 1.08-17.133-18.213-27.166z" fill="#222f9e" fill-rule="nonzero"/>
  <clipPath id="_clip1">
    <path id="hair1" d="M632.874 289.039c-15.435-8.026-18.936-9.4-14.46-19.072 7.1-24.696 56.542-14.867 59.734-13.274 24.745 12.347 16.708 22.594 26.548 39.359 10.007 17.051 5.044 4.718 5.044 24.938 0 20.219 21.195 21.83 32.926 35.721 11.73 13.891 10.24 22.167 10.187 42.731-.034 12.789-19.56 5.027-20.177 28.488-.494 18.769-29.117 1.294-42.082-9.46-12.713-10.545-13.175-38.303-17.126-38.673-4.94-.463-12.916-15.523-11.373-32.656 1.544-17.132 3.346-25.071-11.008-30.936-14.354-5.865 1.08-17.133-18.213-27.166z" clip-rule="nonzero"/>
  </clipPath>
  <g clip-path="url(#_clip1)" fill="none" stroke="#fff" stroke-opacity=".54" stroke-width=".65">
    <path d="M696.466 324.52s10.439 10.199 10.439 19.247c0 3.915 17.811 12.788 26.423 26.097"/>
    <path d="M672.652 284.721c10.765 1.958 14.288 21.139 16.637 43.061 2.936 27.402 8.156 33.274 18.268 32.295 8.09-.783 22.727 25.228 28.707 34.253"/>
    <path d="M641.662 278.197c10.765 1.958 32.882 11.353 35.231 33.275 2.936 27.402 2.283 57.74 12.396 56.761 8.09-.783 22.074 17.072 28.055 26.098"/>
  </g>
  <g class="speech" id="speech">
    <path d="M727.968 243.865h-37.352c-6.138 0-11.113-4.975-11.113-11.113v-1.08c0-6.734 5.459-12.194 12.193-12.194h36.272c6.735 0 12.194 5.46 12.194 12.194 0 6.734-5.459 12.193-12.194 12.193z" fill="#f9f9f9" fill-rule="nonzero"/>
    <path d="M725.808 231.715a6.684 6.684 0 00-6.681-6.681H701.31a6.683 6.683 0 00-6.681 6.681 6.684 6.684 0 006.681 6.681h17.817a6.685 6.685 0 006.681-6.681z" fill="#f2f2f2"/>
    <circle class="bubble" cx="703.092" cy="231.716" r="1.782" fill="#c4c4c4"/>
    <circle class="bubble" cx="710.218" cy="231.716" r="1.782" fill="#c4c4c4"/>
    <circle class="bubble" cx="717.345" cy="231.716" r="1.782" fill="#c4c4c4"/>
  </g>
  <path id="shadow" d="M815.209 312.776l-424.408-51.868-5.546 25.119 429.954 44.039v-17.29z" fill="#fff7f7" fill-opacity=".1" fill-rule="nonzero"/>
  <g class="speech" id="speech1">
    <path d="M452.253 243.213h37.353c6.138 0 11.113-4.975 11.113-11.113v-1.08c0-6.735-5.459-12.194-12.193-12.194h-36.273c-6.734 0-12.193 5.459-12.193 12.194 0 6.734 5.459 12.193 12.193 12.193z" fill="#f9f9f9" fill-rule="nonzero"/>
    <path d="M454.414 231.064a6.683 6.683 0 016.681-6.681h17.817a6.684 6.684 0 016.681 6.681 6.685 6.685 0 01-6.681 6.681h-17.817a6.684 6.684 0 01-6.681-6.681z" fill="#f2f2f2"/>
    <circle class="bubble" cx="477.13" cy="231.064" r="1.782" fill="#c4c4c4"/>
    <circle class="bubble" cx="470.004" cy="231.064" r="1.782" fill="#c4c4c4"/>
    <circle class="bubble" cx="462.877" cy="231.064" r="1.782" fill="#c4c4c4"/>
  </g>
  <path id="talk" d="M528.429 352.659s4.822 12.084 11.422 12.502c7.019.445 6.071-11.108 12.965-12.502 8.9-1.799 10.737 14.463 19.602 12.502 6.742-1.491 12.503-12.502 12.503-12.502m30.969 14.922s-5.47 14.914-12.07 15.332c-7.019.445-7.976-5.318-14.87-6.711-8.9-1.799-10.737 14.463-19.602 12.502-6.742-1.491-12.503-12.502-12.503-12.502" fill="none" fill-rule="nonzero" stroke="#fff" stroke-width="2.04" stroke-dasharray="2.53,2.53"/>
  <g id="knob" fill-opacity=".33">
    <circle cx="481.816" cy="524.164" r="15.658" fill="#070707"/>
    <circle cx="481.489" cy="523.838" r="10.765"/>
  </g>
  <path id="motion-path" d="M363.573 273.63l-83.185 40.125c-58.284 34.47-152.017 103.215-60.676 102.432 114.176-.979 339.618-112.395 424.407-76.335 198.666 84.49 335.351-45.996 346.772-114.176 9.13-54.543-82.754-46.866-129.838-36.21" fill="none" fill-rule="nonzero" stroke="#9ab6ff" stroke-width="4.57" stroke-dasharray="9.79,9.79"/>
  <g id="plane" fill-rule="nonzero">
    <path class="plane1" d="M232.729 402.417l-7.852-29.304 91.354 6.93-83.502 22.374z" fill="#f1f1f1"/>
    <path d="M232.729 402.418l-18.644-21.684 102.146-.69-83.502 22.374z" fill="#e7e7e7"/>
  </g>
</svg>
  </div>
              
            
!

CSS

              
                body {
	background-color: #16181D;
	background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
  height: 100vh;
}

.container {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
  position: relative;
}
svg{
  position: absolute;
}
              
            
!

JS

              
                //register the plugin
gsap.registerPlugin(MotionPathPlugin);

const path ="M16.04599,42.88803 C64.52499,32.19703 246.79999,-17.15397 271.80999,-22.57997 296.81899,-28.00597 378.29699,-47.21997 422.91399,-33.60697 467.53199,-19.99397 537.71699,1.38203 578.11799,-4.43597 618.51799,-10.25297 741.41199,-69.34797 754.52399,-101.32397 767.63599,-133.29997 789.14899,-185.39497 740.36999,-188.26297 691.58999,-191.13097 652.64399,-175.98297 603.96399,-177.06597 554.04299,-178.17797 252.21899,-141.20597 149.74999,-103.03397 87.33899,-79.78497 -5.01801,-14.88397 -21.49601,-0.09897 -37.07901,13.88503 -47.88201,35.03403 -19.06301,41.56603 3.27399,46.62903 5.81299,45.14503 16.04599,42.88803 ";

gsap.set('#plane',{align: "path", xPercent: -50, yPercent: -50, transformOrigin: "50% 50%"})
gsap.set('.speech, .bubble',{opacity:0, scale:0.1})


gsap.to('#plane',{
    duration: 6,
    ease: "none",
    motionPath: {
      path: path,
      autoRotate: true,
      type: "thru",
      curviness: 0.5
    },
    repeat: -1
    })

gsap.to('#screen', {
  duration: gsap.utils.random(0.3, 0.9),
  opacity: gsap.utils.random(0.5, 1),
  yoyo: true,
  repeat: -1
})
gsap.to('#ant', {
  transformOrigin: "100% 100%",
  duration: gsap.utils.random(0.5, 1),
  rotate: gsap.utils.random(-5, 5),
  yoyo: true,
  repeat: -1
})
gsap.to('#talk, #motion-path', {
  duration: 6,
  strokeDashoffset: -1000,
  ease: "none",
  repeat: -1
})

 gsap.timeline({repeat: -1, defaults:{
   scale: 1,
   opacity: 1,
   transformOrigin: "0% 50%",
 }}).to('.speech',{
    duration: 1,
    ease: "none",
    stagger: 1
    })
  .to(".bubble", {
    duration: 1,
    stagger: {
    amount: 0.5,
    from:"start"
  },
 yoyo:true,
 repeat: 1})
   .to('.speech',{
    duration: 1,
    scale: 0,
    opacity: 0,
    ease: "none",
    stagger: 1
    })
 



// MotionPathHelper.create("#plane")
              
            
!
999px

Console