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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="500" xmlns:bx="https://boxy-svg.com">
  <defs>
    <style bx:fonts="Baloo 2">@import url(https://fonts.googleapis.com/css2?family=Baloo+2%3Aital%2Cwght%400%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800&amp;display=swap);</style>
    <linearGradient gradientUnits="userSpaceOnUse" x1="250" y1="0" x2="250" y2="500" id="gradient-0">
      <stop offset="0" style="stop-color: rgb(229, 124, 245);"></stop>
      <stop offset="1" style="stop-color: rgb(113, 0, 148);"></stop>
    </linearGradient>
  </defs>
  <rect width="500" height="500" style="stroke: rgb(0, 0, 0); fill: url(#gradient-0);"></rect>
  <g id="myText">
    <path d="M 48.51 248.44 L 48.51 256.98 L 34.09 256.98 L 34.09 248.44 L 48.51 248.44 Z M 44.17 256.98 L 44.52 250.4 C 48.63 250.4 52.03 250.84 54.74 251.73 C 57.45 252.62 59.49 253.9 60.86 255.58 C 62.24 257.26 62.93 259.34 62.93 261.81 C 62.93 266.38 61.2 269.79 57.75 272.03 C 54.3 274.27 49.37 275.39 42.98 275.39 C 41.91 275.39 40.62 275.34 39.13 275.25 C 37.64 275.16 36.12 274.98 34.58 274.72 C 33.04 274.47 31.64 274.11 30.38 273.64 C 27.81 272.66 26.53 270.96 26.53 268.53 L 26.53 235.84 C 26.53 234.86 26.81 234.1 27.37 233.56 C 27.93 233.03 28.65 232.6 29.54 232.27 C 31.13 231.71 33.12 231.3 35.52 231.04 C 37.93 230.79 40.37 230.66 42.84 230.66 C 48.77 230.66 53.35 231.67 56.59 233.7 C 59.84 235.73 61.46 238.83 61.46 242.98 C 61.46 245.31 60.75 247.26 59.32 248.82 C 57.9 250.39 55.88 251.55 53.27 252.32 C 50.66 253.09 47.55 253.48 43.96 253.48 L 43.54 248.44 C 45.55 248.44 47 248.07 47.91 247.32 C 48.82 246.57 49.28 245.48 49.28 244.03 C 49.28 242.77 48.75 241.77 47.7 241.02 C 46.65 240.27 45.08 239.9 42.98 239.9 C 42.28 239.9 41.47 239.92 40.56 239.97 C 39.65 240.02 38.94 240.09 38.43 240.18 L 38.43 265.52 C 39.08 265.71 39.93 265.83 40.98 265.9 C 42.03 265.97 43 266.01 43.89 266.01 C 45.76 266.01 47.31 265.62 48.54 264.85 C 49.78 264.08 50.4 262.88 50.4 261.25 C 50.4 259.71 49.87 258.61 48.82 257.96 C 47.77 257.31 46.22 256.98 44.17 256.98 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 112.07 252.99 C 112.07 257.84 111.1 261.95 109.16 265.31 C 107.23 268.67 104.59 271.21 101.25 272.94 C 97.92 274.67 94.13 275.53 89.88 275.53 C 85.63 275.53 81.84 274.67 78.5 272.94 C 75.17 271.21 72.54 268.67 70.63 265.31 C 68.72 261.95 67.76 257.84 67.76 252.99 C 67.76 248.14 68.74 244.04 70.7 240.7 C 72.66 237.37 75.31 234.84 78.64 233.11 C 81.98 231.38 85.73 230.52 89.88 230.52 C 94.03 230.52 97.79 231.38 101.15 233.11 C 104.51 234.84 107.17 237.37 109.13 240.7 C 111.09 244.04 112.07 248.14 112.07 252.99 Z M 99.47 252.99 C 99.47 248.84 98.61 245.7 96.88 243.57 C 95.15 241.45 92.82 240.39 89.88 240.39 C 87.03 240.39 84.73 241.44 82.98 243.54 C 81.23 245.64 80.36 248.79 80.36 252.99 C 80.36 257.24 81.23 260.41 82.98 262.51 C 84.73 264.61 87.06 265.66 89.95 265.66 C 92.84 265.66 95.15 264.61 96.88 262.51 C 98.61 260.41 99.47 257.24 99.47 252.99 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 137.76 275.53 C 133.84 275.53 130.47 274.83 127.64 273.43 C 124.82 272.03 122.65 270.07 121.13 267.55 C 119.62 265.03 118.86 262.09 118.86 258.73 L 118.86 254.46 L 131.11 254.46 L 131.11 258.52 C 131.11 260.71 131.73 262.45 132.96 263.73 C 134.2 265.02 135.8 265.66 137.76 265.66 C 139.72 265.66 141.32 265.02 142.55 263.73 C 143.79 262.45 144.41 260.71 144.41 258.52 L 144.41 254.46 L 156.66 254.46 L 156.66 258.73 C 156.66 262.09 155.9 265.03 154.38 267.55 C 152.87 270.07 150.7 272.03 147.87 273.43 C 145.05 274.83 141.68 275.53 137.76 275.53 Z M 131.11 256.35 L 118.86 256.35 L 118.86 231.71 C 119.42 231.62 120.25 231.49 121.34 231.32 C 122.44 231.16 123.5 231.08 124.53 231.08 C 126.86 231.08 128.54 231.48 129.57 232.27 C 130.6 233.06 131.11 234.6 131.11 236.89 L 131.11 256.35 Z M 156.66 256.49 L 144.41 256.49 L 144.41 231.71 C 144.97 231.62 145.8 231.49 146.89 231.32 C 147.99 231.16 149.05 231.08 150.08 231.08 C 152.41 231.08 154.09 231.48 155.12 232.27 C 156.15 233.06 156.66 234.6 156.66 236.89 L 156.66 256.49 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 165.54 246.27 L 176.81 246.27 C 177 248.42 177.12 250.47 177.19 252.43 C 177.26 254.39 177.3 256.24 177.3 257.99 C 177.3 259.74 177.3 261.46 177.3 263.14 L 177.3 274.27 C 176.83 274.36 176.07 274.48 175.02 274.62 C 173.97 274.76 172.91 274.83 171.84 274.83 C 169.51 274.83 167.87 274.42 166.94 273.6 C 166.01 272.79 165.54 271.33 165.54 269.23 L 165.54 246.27 Z M 203.97 259.57 L 192.7 259.57 C 192.42 256.3 192.27 253.29 192.24 250.54 C 192.22 247.79 192.21 245.17 192.21 242.7 L 192.21 231.64 C 192.72 231.55 193.49 231.43 194.52 231.29 C 195.55 231.15 196.6 231.08 197.67 231.08 C 200 231.08 201.64 231.49 202.57 232.3 C 203.5 233.12 203.97 234.58 203.97 236.68 L 203.97 259.57 Z M 203.97 255.79 L 203.97 272.8 C 203.32 273.41 202.37 273.9 201.13 274.27 C 199.9 274.64 198.42 274.83 196.69 274.83 C 194.96 274.83 193.33 274.57 191.79 274.06 C 190.25 273.55 188.99 272.31 188.01 270.35 L 181.08 256.21 C 180.61 255.23 180.18 254.31 179.78 253.44 C 179.39 252.58 179 251.68 178.63 250.75 C 178.26 249.82 177.84 248.79 177.37 247.67 L 165.54 250.26 L 165.54 234.02 C 166.19 233.09 167.2 232.39 168.55 231.92 C 169.9 231.45 171.35 231.22 172.89 231.22 C 174.62 231.22 176.26 231.49 177.82 232.02 C 179.39 232.56 180.64 233.79 181.57 235.7 L 188.57 249.84 C 189.04 250.77 189.47 251.68 189.86 252.57 C 190.26 253.46 190.66 254.37 191.05 255.3 C 191.45 256.23 191.86 257.26 192.28 258.38 L 203.97 255.79 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 246.39 238.01 C 246.39 239.18 246.09 240.21 245.48 241.12 C 244.87 242.03 244.17 242.75 243.38 243.26 C 242.21 242.47 240.93 241.79 239.53 241.23 C 238.13 240.67 236.52 240.39 234.7 240.39 C 232.32 240.39 230.3 240.89 228.64 241.89 C 226.99 242.9 225.73 244.34 224.86 246.23 C 224 248.12 223.57 250.4 223.57 253.06 C 223.57 257.17 224.61 260.29 226.68 262.44 C 228.76 264.59 231.64 265.66 235.33 265.66 C 237.24 265.66 238.86 265.4 240.19 264.89 C 241.52 264.38 242.8 263.79 244.01 263.14 C 244.8 263.75 245.42 264.52 245.86 265.45 C 246.31 266.38 246.53 267.46 246.53 268.67 C 246.53 269.74 246.25 270.72 245.69 271.61 C 245.13 272.5 244.17 273.24 242.82 273.85 C 241.98 274.22 240.79 274.6 239.25 274.97 C 237.71 275.34 235.84 275.53 233.65 275.53 C 229.45 275.53 225.63 274.74 222.2 273.15 C 218.77 271.56 216.04 269.11 214.01 265.8 C 211.98 262.49 210.97 258.24 210.97 253.06 C 210.97 248.21 211.95 244.11 213.91 240.77 C 215.87 237.44 218.52 234.89 221.85 233.14 C 225.19 231.39 228.87 230.52 232.88 230.52 C 235.73 230.52 238.15 230.85 240.16 231.5 C 242.17 232.15 243.71 233.04 244.78 234.16 C 245.85 235.28 246.39 236.56 246.39 238.01 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 275.23 261.11 L 264.24 261.11 C 263.07 259.38 261.77 257.39 260.32 255.12 C 258.87 252.86 257.44 250.52 256.02 248.09 C 254.59 245.66 253.27 243.32 252.06 241.05 C 250.85 238.79 249.89 236.77 249.19 235 C 249.8 234.16 250.63 233.39 251.68 232.69 C 252.73 231.99 254.02 231.64 255.56 231.64 C 257.38 231.64 258.86 232.01 260.01 232.76 C 261.15 233.51 262.23 234.91 263.26 236.96 C 263.77 237.99 264.29 239.01 264.8 240.04 C 265.31 241.07 265.83 242.1 266.34 243.15 C 266.85 244.2 267.37 245.24 267.88 246.27 C 268.39 247.3 268.91 248.32 269.42 249.35 L 269.84 249.35 C 270.73 247.39 271.51 245.59 272.19 243.96 C 272.86 242.33 273.54 240.63 274.22 238.88 C 274.89 237.13 275.67 235.16 276.56 232.97 C 277.4 232.55 278.33 232.22 279.36 231.99 C 280.39 231.76 281.37 231.64 282.3 231.64 C 283.93 231.64 285.32 232.07 286.47 232.93 C 287.61 233.8 288.18 235.09 288.18 236.82 C 288.18 237.38 288.02 238.14 287.69 239.09 C 287.36 240.05 286.75 241.4 285.84 243.15 C 284.93 244.9 283.62 247.23 281.92 250.12 C 280.21 253.01 277.98 256.68 275.23 261.11 Z M 263.68 256.91 L 275.65 256.91 L 275.65 274.2 C 275.14 274.34 274.36 274.48 273.31 274.62 C 272.26 274.76 271.19 274.83 270.12 274.83 C 267.69 274.83 266.01 274.41 265.08 273.57 C 264.15 272.73 263.68 271.26 263.68 269.16 L 263.68 256.91 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 315.97 241.65 L 315.97 231.85 L 339.28 231.85 C 339.61 232.36 339.9 233.04 340.15 233.88 C 340.41 234.72 340.54 235.63 340.54 236.61 C 340.54 238.34 340.15 239.61 339.38 240.42 C 338.61 241.24 337.58 241.65 336.27 241.65 L 315.97 241.65 Z M 328.85 231.85 L 328.85 241.65 L 305.54 241.65 C 305.21 241.14 304.92 240.46 304.66 239.62 C 304.41 238.78 304.28 237.87 304.28 236.89 C 304.28 235.12 304.66 233.83 305.43 233.04 C 306.2 232.25 307.24 231.85 308.55 231.85 L 328.85 231.85 Z M 316.11 239.76 L 328.36 239.76 L 328.36 274.2 C 327.85 274.34 327.05 274.48 325.98 274.62 C 324.91 274.76 323.81 274.83 322.69 274.83 C 320.26 274.83 318.56 274.4 317.58 273.53 C 316.6 272.67 316.11 271.17 316.11 269.02 L 316.11 239.76 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 346.48 243.33 L 358.38 243.33 L 358.38 273.85 C 357.87 273.99 357.12 274.13 356.14 274.27 C 355.16 274.41 354.11 274.48 352.99 274.48 C 350.98 274.48 349.4 273.9 348.23 272.73 C 347.06 271.56 346.48 269.98 346.48 267.97 L 346.48 243.33 Z M 358.38 263 L 346.48 263 L 346.48 238.36 C 346.48 236.35 347.06 234.77 348.23 233.6 C 349.4 232.43 350.98 231.85 352.99 231.85 C 354.11 231.85 355.16 231.92 356.14 232.06 C 357.12 232.2 357.87 232.34 358.38 232.48 L 358.38 263 Z M 352.99 257.47 L 352.99 247.95 L 374.13 247.95 C 374.46 248.46 374.75 249.12 375.01 249.91 C 375.26 250.7 375.39 251.59 375.39 252.57 C 375.39 254.3 375.02 255.54 374.27 256.31 C 373.52 257.08 372.5 257.47 371.19 257.47 L 352.99 257.47 Z M 352.99 274.48 L 352.99 264.82 L 376.37 264.82 C 376.7 265.33 376.99 266.01 377.25 266.85 C 377.5 267.69 377.63 268.6 377.63 269.58 C 377.63 271.31 377.26 272.55 376.51 273.32 C 375.76 274.09 374.74 274.48 373.43 274.48 L 352.99 274.48 Z M 352.99 241.44 L 352.99 231.85 L 376.09 231.85 C 376.42 232.36 376.71 233.02 376.97 233.81 C 377.22 234.6 377.35 235.49 377.35 236.47 C 377.35 238.2 376.98 239.46 376.23 240.25 C 375.48 241.04 374.46 241.44 373.15 241.44 L 352.99 241.44 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 398.21 255.86 L 395.55 255.37 L 382.6 237.03 C 383.07 235.72 383.93 234.46 385.19 233.25 C 386.45 232.04 388.11 231.43 390.16 231.43 C 391.51 231.43 392.72 231.77 393.77 232.44 C 394.82 233.12 395.85 234.28 396.88 235.91 L 405.07 248.51 L 408.22 250.4 L 421.59 269.23 C 421.26 270.96 420.46 272.32 419.18 273.32 C 417.89 274.33 416.22 274.83 414.17 274.83 C 412.86 274.83 411.72 274.49 410.74 273.81 C 409.76 273.14 408.73 271.98 407.66 270.35 L 398.21 255.86 Z M 407.31 256.07 L 403.74 258.17 L 392.82 274.69 C 392.49 274.74 392.16 274.77 391.81 274.79 C 391.46 274.82 391.12 274.83 390.79 274.83 C 388.18 274.83 386.23 274.29 384.95 273.22 C 383.66 272.15 383.02 270.82 383.02 269.23 C 383.02 267.88 383.32 266.7 383.93 265.69 C 384.54 264.69 385.35 263.51 386.38 262.16 L 395.55 250.47 L 401.08 246.2 L 410.46 232.13 C 410.83 231.99 411.35 231.86 412 231.74 C 412.65 231.63 413.33 231.57 414.03 231.57 C 416.08 231.57 417.72 232.08 418.93 233.11 C 420.14 234.14 420.75 235.4 420.75 236.89 C 420.75 238.2 420.41 239.36 419.74 240.39 C 419.06 241.42 418.14 242.65 416.97 244.1 C 415.38 246.11 413.8 248.1 412.21 250.08 C 410.62 252.07 408.99 254.06 407.31 256.07 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
    <path d="M 436.37 241.65 L 436.37 231.85 L 459.68 231.85 C 460.01 232.36 460.3 233.04 460.55 233.88 C 460.81 234.72 460.94 235.63 460.94 236.61 C 460.94 238.34 460.55 239.61 459.78 240.42 C 459.01 241.24 457.98 241.65 456.67 241.65 L 436.37 241.65 Z M 449.25 231.85 L 449.25 241.65 L 425.94 241.65 C 425.61 241.14 425.32 240.46 425.06 239.62 C 424.81 238.78 424.68 237.87 424.68 236.89 C 424.68 235.12 425.06 233.83 425.83 233.04 C 426.6 232.25 427.64 231.85 428.95 231.85 L 449.25 231.85 Z M 436.51 239.76 L 448.76 239.76 L 448.76 274.2 C 448.25 274.34 447.45 274.48 446.38 274.62 C 445.31 274.76 444.21 274.83 443.09 274.83 C 440.66 274.83 438.96 274.4 437.98 273.53 C 437 272.67 436.51 271.17 436.51 269.02 L 436.51 239.76 Z" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
  </g>
</svg>
              
            
!

CSS

              
                body {
	margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#1d1d1d;
}
.demo {
	border:1px solid #333;
	width:45vmax;
	margin:50px;
	overflow:hidden;
}


              
            
!

JS

              
                const chars = gsap.utils.toArray("#myText path")
const tl = gsap.timeline()
	.from(chars, {scale:0, ease:"elastic", duration:1.2, transformOrigin:"50% 50%", stagger:0.05}, 0)

//squash and jump
.set(chars, {transformOrigin:"0% 100%"  })
.to(chars, {keyframes:{
		"20%":{scaleY:0.2, y:0},
	   "50%":{scaleY:1.3, y:-100, ease:"sine.out"},
	   "80%":{scaleY:1, y:0, ease:"sine.in"},
		"82%":{scaleY:0.5, y:0, ease:"sine.out"},
		"100%":{scaleY:1, y:0, ease:"back(2)"},	
	},
	duration:1,
	stagger:0.02
})


//skew and remove
.to(chars, {skewX:30, x:-20, duration:0.3, ease:"power1.inOut"})
.to(chars, {transformOrigin:"50% 50%", skewX:-30, scale:1.5, x:"+=550",ease:"power1.in", duration:0.25,stagger:{
	each:0.02,
	from:"end"
}})
GSDevTools.create({animation:tl})

// Master GreenSock Animaiton
// https://www.creativeCodingClub.com

              
            
!
999px

Console