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 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

              
                <div id="main">

	<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="photo-frame">
		<g>
			<rect width="200" height="200" fill="white" />
			<g id="photo" clip-path="url(#clip0_8_89)">
				<rect width="180" height="180" transform="translate(10 10)" fill="#7DBDFC" />
				<g id="photo-car">
					<path id="photo-car-body" fill-rule="evenodd" clip-rule="evenodd" d="M25.6453 110.038C29.3626 110.038 32.3761 113.052 32.3761 116.769V116.769C32.3761 131.638 44.4299 143.692 59.2992 143.692C74.1684 143.692 86.2222 131.638 86.2222 116.769V116.769C86.2222 113.052 89.2357 110.038 92.953 110.038H106.415C110.132 110.038 113.145 113.052 113.145 116.769V116.769C113.145 131.638 125.199 143.692 140.068 143.692C154.938 143.692 166.991 131.638 166.991 116.769V116.769C166.991 113.052 170.005 110.038 173.722 110.038H187.184C198.336 110.038 207.376 119.079 207.376 130.231V190.808C207.376 201.96 198.336 211 187.184 211H-65.6838C-79.9692 211 -89.7373 196.572 -84.4319 183.308L-80.51 173.504C-65.1777 135.173 -28.0532 110.038 13.2304 110.038H25.6453Z" fill="#DB5D5D" />
					<path id="photo-go-faster-stripes" fill-rule="evenodd" clip-rule="evenodd" d="M190 162H10V166H190V162ZM190 168H10V172H190V168Z" fill="#FFF175" />
				</g>
				<path id="photo-front-body" d="M39 96.5C39 85.1782 48.1782 76 59.5 76V76C70.8218 76 80 85.1782 80 96.5V116.5C80 127.822 70.8218 137 59.5 137V137C48.1782 137 39 127.822 39 116.5V96.5Z" fill="#333333" />
				<path id="photo-back-body" d="M119.292 96.5C119.292 85.1782 128.47 76 139.792 76V76C151.114 76 160.292 85.1782 160.292 96.5V116.5C160.292 127.822 151.114 137 139.792 137V137C128.47 137 119.292 127.822 119.292 116.5V96.5Z" fill="#605DE4" />
				<path id="photo-front-left-arm" d="M43.6385 72.6096C49.7522 82.1687 47.7606 94.7884 39 102V102C39 102 39.5 90.5 30.5 75C25.852 66.9952 21.6041 60.9248 18.5827 56.9258C16.282 53.8807 16.9353 49.3757 20.1505 47.3194V47.3194C23.0168 45.4861 26.8266 46.3236 28.6598 49.19L43.6385 72.6096Z" fill="#333333" />
				<path id="photo-back-left-arm" d="M123.93 72.6096C130.044 82.1687 128.052 94.7884 119.292 102V102C119.292 102 119.792 90.5 110.792 75C106.144 66.9952 101.896 60.9248 98.8746 56.9258C96.5739 53.8807 97.2272 49.3757 100.442 47.3194V47.3194C103.309 45.4861 107.118 46.3236 108.952 49.19L123.93 72.6096Z" fill="#605DE4" />
				<rect id="photo-image 2" width="69" height="69" transform="matrix(-1 0 0 1 92 29)" fill="url(#pattern0)" />
				<rect id="photo-image 3" width="69" height="69" transform="matrix(-1 0 0 1 177 29)" fill="url(#pattern1)" />
				<path id="photo-front-right-arm" d="M80 103C80 112.5 58 86.4263 58 86.4263L95.4646 55.2751C97.6399 53.4663 100.87 53.7635 102.678 55.9388V55.9388C105.121 58.8762 103.665 63.6651 100.314 65.4994C96.6427 67.5091 92.2447 70.6709 88.5 75.5C80.3083 86.064 80 93.5 80 103Z" fill="#333333" />
				<path id="photo-back-right-arm" d="M160.292 103C160.292 112.5 138.292 86.4263 138.292 86.4263L175.756 55.2751C177.932 53.4663 181.161 53.7635 182.97 55.9388V55.9388C185.413 58.8762 183.957 63.6651 180.606 65.4994C176.935 67.5091 172.537 70.6709 168.792 75.5C160.6 86.064 160.292 93.5 160.292 103Z" fill="#605DE4" />
			</g>
		</g>
		<defs>
			<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
				<use xlink:href="#image0_8_89" transform="scale(0.005)" />
			</pattern>
			<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
				<use xlink:href="#image1_8_89" transform="scale(0.005)" />
			</pattern>
			<clipPath id="clip0_8_89">
				<rect width="180" height="180" fill="white" transform="translate(10 10)" />
			</clipPath>
			<image id="image0_8_89" data-name="image.png" width="200" height="200" xlink:href="data:image/png;base64,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" />
			<image id="image1_8_89" data-name="image.png" width="200" height="200" xlink:href="data:image/png;base64,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" />
		</defs>
	</svg>

	<svg width="700" height="437" viewBox="0 0 700 437" fill="none" xmlns="http://www.w3.org/2000/svg" id="rollercoaster">
		<g>
			<path id="camera" fill-rule="evenodd" clip-rule="evenodd" d="M378 32H382V49H385C385.552 49 386 49.4477 386 50V56C386 56.5523 385.552 57 385 57H375C374.448 57 374 56.5523 374 56V50C374 49.4477 374.448 49 375 49H378V32ZM380 55C381.105 55 382 54.1046 382 53C382 51.8954 381.105 51 380 51C378.895 51 378 51.8954 378 53C378 54.1046 378.895 55 380 55Z" fill="white" />

			<g id="supports">
				<rect id="supports_2" opacity="0.5" x="109" y="398" width="4" height="39" fill="white" />
				<rect id="supports_3" x="170" y="185" width="10" height="252" fill="white" />
				<rect id="supports_4" opacity="0.5" x="229" y="74" width="2" height="363" fill="white" />
				<rect id="supports_5" opacity="0.5" x="289" y="31" width="4" height="406" fill="white" />
				<rect id="supports_6" opacity="0.5" x="405" y="35" width="4" height="402" fill="white" />
				<rect id="supports_7" opacity="0.5" x="349" y="21" width="2" height="416" fill="white" />
				<rect id="supports_8" opacity="0.5" x="465" y="52" width="2" height="385" fill="white" />
				<rect id="supports_9" x="520" y="185" width="10" height="252" fill="white" />
				<rect id="supports_10" opacity="0.5" x="587" y="398" width="4" height="39" fill="white" />
			</g>
			<path id="exit-under" d="M106 363C106 355.268 99.732 349 92 349V349C84.268 349 78 355.268 78 363V437H106V363Z" fill="#333333" />
			<path id="right-rail" d="M349.707 6.96538C445.529 6.96538 523.208 85.9458 523.208 183.373C523.208 352.347 281.885 401.965 97 401.965" stroke="white" stroke-width="13.6231" />
			<path id="cover" fill-rule="evenodd" clip-rule="evenodd" d="M349 13.9725C348.911 13.9724 348.822 13.9723 348.733 13.9723V13.9731C255.205 14.2649 179.746 91.2123 179.746 185.751C179.746 266.825 236.37 318.752 310.589 350.274C249.006 365.277 180.397 371.187 118.362 371.187V393.897C191.753 393.897 275.437 385.811 347.11 363.797C419.602 387.13 504.932 395.892 579.638 395.892V373.182C516.443 373.182 446.397 366.763 383.915 350.766C459.823 319.893 518.254 268.112 518.254 185.751C518.254 91.2123 442.795 14.2649 349.267 13.9731V13.9723C349.178 13.9723 349.089 13.9724 349 13.9725ZM349 36.6825C268.192 36.8288 202.456 103.361 202.456 185.751C202.456 255.684 252.057 302.434 326.391 332.228C333.181 334.95 340.15 337.516 347.273 339.933C355.62 337.228 363.766 334.322 371.669 331.207C445.996 301.903 495.544 255.643 495.544 185.751C495.544 103.361 429.808 36.8288 349 36.6825Z" fill="#7DBDFC" />
			<path id="path" d="M706.5 380.5H585C432.5 380.5 194.5 342 194.5 185C194.5 94.5 268.5 26 350 26C431.5 26 505.5 94 505.5 185C505.5 318.173 326.5 382.5 114.5 382.5C65 382.5 32.8981 382.5 -9.5 382.5" stroke="black" />
			<path id="entrace-under" d="M595 363C595 355.268 601.268 349 609 349V349C616.732 349 623 355.268 623 363V437H595V363Z" fill="#333333" />
			<g id="car">
				<path id="car-body" fill-rule="evenodd" clip-rule="evenodd" d="M641 380C641.552 380 642 380.448 642 381V381C642 383.209 643.791 385 646 385C648.209 385 650 383.209 650 381V381C650 380.448 650.448 380 651 380H653C653.552 380 654 380.448 654 381V381C654 383.209 655.791 385 658 385C660.209 385 662 383.209 662 381V381C662 380.448 662.448 380 663 380H665C666.657 380 668 381.343 668 383V392C668 393.657 666.657 395 665 395H627.431C625.309 395 623.857 392.856 624.646 390.886L625.228 389.429C627.506 383.734 633.022 380 639.156 380H641Z" fill="#DB5D5D" />
				<rect id="front-body" x="643" y="375" width="6" height="9" rx="3" fill="#525D67" />
				<rect id="front-head" x="644" y="369" width="6" height="6" rx="3" fill="#E8E8E8" />
				<rect id="front-arm" x="645" y="369" width="2" height="8" rx="1" fill="#525D67" />
				<rect id="back-head" x="656" y="369" width="6" height="6" rx="3" fill="#E8E8E8" />
				<rect id="back-body" x="655" y="375" width="6" height="9" rx="3" fill="#525D67" />
				<rect id="back-arm" x="657" y="369" width="2" height="8" rx="1" fill="#525D67" />
				<path id="Vector 1" d="M633 387.5C631 387.5 630 385 629 384" stroke="#FFF175" />
				<path id="Vector 2" d="M633 389.5C629 389.5 629 386.5 627.5 385.5" stroke="#FFF175" />
				<rect id="Rectangle 22" x="633" y="387" width="35" height="1" fill="#FFF175" />
				<rect id="Rectangle 23" x="633" y="389" width="35" height="1" fill="#FFF175" />
			</g>
			<rect id="entrance-cover" x="623" y="349" width="77" height="88" fill="#7DBDFC" />
			<rect id="exit-cover" y="349" width="78" height="88" fill="#7DBDFC" />
			<path id="exit-over" d="M92 349C84.268 349 78 355.268 78 363V437H92V349V349Z" fill="url(#paint0_linear_2_21)" />
			<path id="entrace-over" d="M609 349C616.732 349 623 355.268 623 363V437H609V349V349Z" fill="url(#paint1_linear_2_21)" />
			<path id="left-rail" d="M350.293 6.96538C254.471 6.96538 176.792 85.9458 176.792 183.373C176.792 352.347 418.115 401.965 603 401.965" stroke="white" stroke-width="13.6231" />
			<circle id="camera-flash" cx="380" cy="53" r="10" stroke="white" stroke-width="2" />
		</g>
		<defs>
			<linearGradient id="paint0_linear_2_21" x1="78" y1="393" x2="92" y2="393" gradientUnits="userSpaceOnUse">
				<stop offset="0.302083" stop-color="#333333" />
				<stop offset="1" stop-color="#333333" stop-opacity="0" />
			</linearGradient>
			<linearGradient id="paint1_linear_2_21" x1="623" y1="393" x2="609" y2="393" gradientUnits="userSpaceOnUse">
				<stop offset="0.302083" stop-color="#333333" />
				<stop offset="1" stop-color="#333333" stop-opacity="0" />
			</linearGradient>
		</defs>
	</svg>

</div>
              
            
!

CSS

              
                body{
	background-color:#7DBDFC;
}

#path{
	stroke:none;
}

#main{
	position:absolute;
	top:50%;
	left:50%;
	width:551px;
	height:437px;
	transform: translate(-50%, -50%);
	
	#rollercoaster{
		display:block;
		margin-left: 50%;
		transform: translate(-50%);
	}
	
	#photo-frame{
		position:absolute;
		top:15%;
		left:-22%;
		transform: rotate(5deg);
		box-shadow:0 0 20px #208BF3;
		
	}

}

#camera-flash{
	opacity:0;
}


              
            
!

JS

              
                /**
Submission for the GSAP weekly challenge LOOP!

A animation of a Roller Coaster car doing a loop using GSAP.

A souvenir photograph is taken at the loops peak which rider can purchase at the kiosk after the ride!
*/


gsap.registerPlugin(MotionPathPlugin);

const coasterTimeline = gsap.timeline({ repeat: -1 });

/**
 * Generates a string containing a combination of letters and numbers
 * @returns string
 */
const randomSeed = () => {
  return Math.random().toString(36).slice(2);
};

/**
 * Returns a random hex colour from a list of colours
 * @param frontRiderColour if provided, the returned colour will not be the same as the one provided
 * @returns string
 */
const randomColour = (frontRiderColour = false) => {
  const colours = [
    "#D56C0C",
    "#605DE4",
    "#238D80",
    "#333333",
    "#E9B729",
    "#9A3E91",
  ];
  let randomColour = colours[Math.floor(Math.random() * colours.length)];

  while (randomColour === frontRiderColour) {
    randomColour = colours[Math.floor(Math.random() * colours.length)];
  }

  return randomColour;
};

/**
 * Changes the faces abd colours of both riders
 */
const changeRiders = () => {
  // Get all riders
  const riders = document.querySelectorAll("#photo-frame image");

  // Change front rider head
  riders[0].setAttribute(
    "href",
    `https://avatars.dicebear.com/api/big-smile/${randomSeed()}.svg?w=200&scale=90`
  );

  // Get a new colour for the front rider
  const frontRiderColour = randomColour();
  // Change front riders clothing colour
  document
    .getElementById("photo-front-body")
    .setAttribute("fill", frontRiderColour);
  document
    .getElementById("photo-front-left-arm")
    .setAttribute("fill", frontRiderColour);
  document
    .getElementById("photo-front-right-arm")
    .setAttribute("fill", frontRiderColour);

  // Change back rider head
  riders[1].setAttribute(
    "href",
    `https://avatars.dicebear.com/api/big-smile/${randomSeed()}.svg?w=200&scale=90`
  );

  // Get a new colour for the back rider (not the same as the front rider)
  const backRiderColour = randomColour(frontRiderColour);
  // Change front riders clothing colour
  document
    .getElementById("photo-back-body")
    .setAttribute("fill", backRiderColour);
  document
    .getElementById("photo-back-left-arm")
    .setAttribute("fill", backRiderColour);
  document
    .getElementById("photo-back-right-arm")
    .setAttribute("fill", backRiderColour);
};

const coasterDuration = 5;

// -------------------------
// Start of coaster timeline
// -------------------------
coasterTimeline.set("#camera", { scale: 1 });
coasterTimeline.to("#car", {
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.4],
    autoRotate: 180,
    start: 0,
    end: 1,
  },
  transformOrigin: "50% 50%",
  duration: coasterDuration,
  ease: "slow(0.01, 0.9, false)",
});

// Timeline labels
coasterTimeline.addLabel("slowMoStart", "<35%");
coasterTimeline.addLabel("cameraFlash", "<40%");
coasterTimeline.addLabel("slowMoEnd", "<75%");

// Photo fade out
coasterTimeline.add(
  gsap.to("#photo", { duration: 1, opacity: 0, onComplete: () => changeRiders() }),
  "<0%"
);

// Camera flash
coasterTimeline.add(
  gsap.fromTo(
    "#camera-flash",
    { strokeWidth: 30, scale: 0, transformOrigin: "50% 50%", opacity: 1 },
    {
      duration: 1,
      strokeWidth: 2,
      scale: 4,
      transformOrigin: "50% 50%",
      opacity: 0,
      ease: "power3.out",
    }
  ),
  "cameraFlash"
);

// Camera bounce
coasterTimeline.add(
  gsap.fromTo(
    "#camera",
    { scale: 0.5 },
    { duration: 1, scale: 1, ease: "elastic" }
  ),
  "cameraFlash"
);

// Photo fade in
coasterTimeline.add(
  gsap.to("#photo", { duration: 0.3, opacity: 1, delay: 0.3 }),
  "cameraFlash"
);

// Riders arm animation(s)
coasterTimeline.add(
  gsap.from(["#front-arm", "#back-arm"], {
    duration: coasterDuration / 2,
    rotation: 90,
    transformOrigin: "50% 100%",
    ease: "elastic.out",
  }),
  "slowMoStart"
);

coasterTimeline.add(
  gsap.to(["#front-arm", "#back-arm"], {
    duration: coasterDuration / 5,
    rotation: 90,
    transformOrigin: "50% 100%",
    ease: "none",
  }),
  "slowMoEnd"
);

              
            
!
999px

Console