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

              
                <!DOCTYPE html>
<html style="background-color:#222;">
    <head>
        <meta charset="utf-8">
        <title>ZIM JavaScript Canvas Framework - Code Creativity!</title>
        <script src="https://d309knd7es5f10.cloudfront.net/vee/vee.js"></script>
        <link href="https://zimjs.com/ten/secondary.css" rel="stylesheet" type="text/css" />

    </head>
    <body>
        <div id="top" style="background-color:#a2c441;">JavaScript Canvas Framework - Code Creativity!</div>
        <header>
            <h1>ZIM - Code and Learn Coding with ZIM for JavaScript and HTML Canvas with CreateJS</h1>
            <a target=_blank href="https://zimjs.com/ten.html"><img id="logo" src="https://d309knd7es5f10.cloudfront.net/ten/logo.png" alt="ZIM - Logo - JavaScript Canvas Framework - Learn to Code"></a><div id="title"><h3>TEN</h3></div>
            <a target=_blank href="https://zimjs.com/about.html?#reviews"><img id="reviews" src="https://d309knd7es5f10.cloudfront.net/ten/incredible.png" alt="reviews for ZIM -  best canvas framework"></a>
        </header>

        <nav>
            <h2>Navigation for the ZIM JavaScript Canvas Framework</h2>
            <a id="news" target=_blank href="https://zimjs.com/news.html">News</a>
            <a id="about" target=_blank href="https://zimjs.com/about.html">About</a>
            <a id="examples" target=_blank href="https://zimjs.com/examples.html">Examples</a>
            <a id="learn" target=_blank href="https://zimjs.com/learn.html">Learn</a>
            <a id="code" target=_blank href="https://zimjs.com/code.html">Code</a>
            <a id="docs" target=_blank href="https://zimjs.com/docs.html">Docs</a>
        </nav>

        <div id=marquee style="height:120px;"></div>

        <div id="abstract">
            <div style="text-align:center; margin-bottom:1px; position:relative; left:-80px;">
                <img id="drabstract" src="https://d309knd7es5f10.cloudfront.net/ten/drabstract.png" alt="" />
            </div>
            <div id="intro">
                <h1>Welcome! You can make games, art, puzzles and apps we call Zapps! Click to enter our <a target=_blank href="https://zimjs.com/zapp.html" style="padding:2px 4px; display:inline-block; background-color:#333; border-radius:2px">ZIM&nbsp;Zapp</a> <em>Prizaria Compet!</em></h1>
                <!-- <h1>Welcome! Press the banners below to see what you can <a target=_blank href="https://zimjs.com/learn.html">MAKE</a> with ZIM's simple <a target=_blank href="https://zimjs.com/code.html">CODE</a> using just a text editor and Browser!</h1> -->
            </div>
        </div>

        <main>

            <a target=_blank href="https://zimjs.com/art.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/genart.jpg" alt="GenArt - generative art and making computer art and visualizations with ZIM JavaScript Canvas Framework"></a>
            <a target=_blank href="https://zimjs.com/games.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/gamezaps.jpg" alt="Canvas Games with ZIM - 2D games, casual games, arcade games, espape games, minigames, flash games, games of chance, isometric games, physics games, simulations, action and educational games good for e-learning, advergaming and gamification"></a>
            <a target=_blank href="https://zimjs.com/logos.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/logoplay.jpg" alt="Interactive Logo - play with branding to build engagement with the JavaScript Canvas and ZIMjs"></a>
            <a target=_blank href="https://zimjs.com/ads.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/admuse.jpg" alt="Interactive Advertising, admusements, advergaming engaging brands with the ZIM JavaScript Canvas Framework"></a>
            <a target=_blank href="https://zimjs.com/data.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/datavis.jpg" alt="Data Visualization, charts, graphs on the Canvas with JavaScript and ZIM"></a>
            <a target=_blank href="https://zimjs.com/uiux.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/uiux.jpg" alt="UI UX - ZIM canvas components such as slider, dial, button, label, keyboard, color picker, check box, radio buttons, toggle, pane, window, layer, waiter, progress bar, tabs, pad, loader, text area and accessibility"></a>
            <a target=_blank href="https://zimjs.com/apps.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/learnapps.jpg" alt="Apps - desktop and mobile apps with JavaScript and Canvas - responsive and adaptive design with ZIM Layout class - swipe pages with ZIM Pages class - gesture control with ZIM Gesture for pinch, pan, and rotate"></a>
            <a target=_blank href="https://zimjs.com/puzzles.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/escapepuzzles.jpg" alt="Escape Puzzles - challenge your curiousity, problem solving and intuition!"></a>
            <a target=_blank href="https://zimjs.com/infoactives.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/infoactives.jpg" alt="Interactive Infographics - infoactives - with the ZIM JavaScript Canavas Framework"></a>
            <a target=_blank href="https://zimjs.com/cards.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/wondercards.jpg" alt="Wonder Things - gadgets, widgets, inventions and features that defy description"></a>
        </main>

        <div id="welcome">
            <h1>ZIM has many <a target=_blank href=https://zimjs.com/about.html#features>conveniences</a>, <a target=_blank href=https://zimjs.com/about.html#features>components</a> and <a target=_blank href=https://zimjs.com/about.html#features>controls</a> and is great for learning code
                yet still powerful for professionals!</h1>
            <div id="host2"><img src="https://d309knd7es5f10.cloudfront.net/vee/learn.png" alt="ZIM LEARN for JavaScript HTML Canvas Coding"></div>
        </div>

        <footer>
            <nav>
                <h2>Navigation for the ZIM JavaScript Canvas Framework</h2>
                <a id="intro" target=_blank href="https://zimjs.com/intro.html">Intro</a>
                <a id="zoo" target=_blank href="https://zimjs.com/zoo.html">Zoo</a>
                <a id="tips" target=_blank href="https://zimjs.com/tips.html">Tips</a>
                <a id="skool" target=_blank href="https://zimjs.com/skool.html">Skool</a>
                <a id="ten"  target=_blank href="https://zimjs.com/ten.html">Ten</a>
                <a id="vids" target=_blank href="https://zimjs.com/vids.html" target="_blank">Vids</a>
                <a id="kids" target=_blank href="https://zimjs.com/kids.html">Kids</a>
                <a id="zap" target=_blank href="https://zimjs.com/zap">Zap</a>
            </nav>

            <h3 style="margin-top:0px;">Please visit us on Social Media and share with friends!</h3>
            <div id="socialmedia">
                <a class="imageLink" target=_blank href="https://www.facebook.com/zimjs/" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_facebook.png" alt="ZIM on Facebook - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
                <a class="imageLink" target=_blank href="https://twitter.com/zimlearn" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_twitter.png" alt="ZIM on Twitter - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
                <a class="imageLink" target=_blank href="https://www.youtube.com/c/zimlearn" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_youtube.png" alt="ZIM on YouTube - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
                <a class="imageLink" target=_blank href="https://zimjavascript.wordpress.com/" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_wordpress.png" alt="ZIM on Wordpress - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
                <a class="imageLink" target=_blank href="https://www.patreon.com/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_patreon.png" alt="ZIM on Patreon - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
                <a class="imageLink" target=_blank href="https://zimjs.com/slack" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_slack.png" alt="ZIM on Slack - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
                <a class="imageLink" target=_blank href="https://codepen.io/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_codepen.png" alt="ZIM on CodePen - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
                <a class="imageLink" target=_blank href="https://github.com/danzen/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_github.png" alt="ZIM on GitHub - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
            </div>

            <br>
            <img id=footerlogo src="https://d309knd7es5f10.cloudfront.net/ten/footer_dark.png" alt="">

            <div id=copy>&copy 2020 ZIM - join us on <a target=_blank target=_blank href="https://zimjs.com/slack">SLACK</a> - help us grow on <a target=_blank target=_blank href="https://zimjs.com/donate">PATREON</a></div>
        </footer>
    </body>
</html>

              
            
!

CSS

              
                body {
	/* background-color: #dddddd; */
	margin:0px 0px 0px 0px;
	overflow-x: hidden;
}
h2 {
	display:none;
}
footer h3 {
	font-family: verdana;
	font-size:20px;
	color:#aaa;
	font-weight:normal;
	font-style:italic;
	margin-bottom:30px;
}
header {
	position:relative;
	text-align:center;
	overflow: hidden;
}
nav {
	margin-top:3vh;
	margin-bottom:3vh;
	text-align:center;
	color:#ccc;
	font-family: verdana;
	font-size:3vmin;
}
nav a {
	color:#888;
	background-color:#ededed;
	border:thin solid #cccccc;
	font-family: verdana;
	margin:.3vw;
	/* font-size:20px; */
	font-size:3vmin;
	padding:.6vw;
	display:inline-block;
	text-transform: uppercase;
	text-decoration:none;
}
nav a:hover {
	background-color:white;
	color:#333;
}
#topbutton {
	position:relative;
	top:-63px;
}
main {
	margin:20px auto 0px auto;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-around;
	text-align:center;
	max-width:1200px;
}
main img {
	width: 90%;
	margin:1vw;
	align-self: center;
	box-shadow: 5px 5px 5px rgba(0,0,0,.2);
	font-size:0px;

}
main a:hover {
	background-color:#eeeeee;
}
@media (orientation: landscape) {
	main img {
		max-width:450px;
	}
}
footer {
	background-color:#333;
	position:relative;
	text-align: center;
	margin:0px;
	margin-top:3em;
	padding-top:3em;
	padding-bottom:0em;
}
footer img {
	width:200px;
}
footer #socialmedia {
	width:100%;
	text-align:center;
	margin-bottom:2em;
}
footer #socialmedia img {
	width:8%;
	max-width:3em;
	margin-bottom:.5em;
	opacity: .7;
	filter: alpha(opacity=70);
}
footer #socialmedia img:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
footer nav {
	margin-top:0px;
	margin-bottom:5vh;
}
footer nav a {
	background-color: #ebcb35;
	border:none;
	font-size:2.5vmin;
	margin:.2vw;
	padding:.5vw 1vw;
	color:#444;
	margin-right:.7vw;
	border-radius:3px;
	box-shadow:2px 2px 5px rgba(0,0,0,.2);
	/* border:thin solid rgba(0,0,0,.2) */
}
footer nav a:hover {
	background-color:#acd241;
	color:#333;
}

#bottom {
	margin-left: 50%;
	transform: translateX(-50%);
	width:98%;
	min-width:500px;
	max-width:900px;
}
#review {
	transform: translateY(-50%);
	position:absolute;
	top:13%;
	right:2%;
	width:30%;
	max-width:254px;
}
#footerlogo {
	max-width:500px;
	width:60%;
	margin-top:-1.2vw;
	margin-bottom:.5vw;
}
#copy {
	margin-top:1.5vw;
	background-color: #222;
}
#reviews {
	width:200px;
	position:absolute;
	margin-top:8px;
	margin-left:-20px;
	opacity:.8;
	filter: alpha(opacity=80);
}
#host2 img {
	width:130px;
}
#host2 {
	margin-top:6px;
	margin-bottom:10px;
}
#welcome, #intro {text-align: center;}
#welcome h1, #intro h1 {
	width:60%;
	max-width:600px;
	min-width:300px;
	font-weight:normal;
	font-size:1.3em;
	display:inline-block;
	padding:16px;
	background-color:white;
	margin-top:3em;
	border-radius:12px;
	text-transform: none;
	box-shadow: 5px 5px 5px rgba(0,0,0,.2);
	color:#999999;
	font-style: normal;
}
#welcome a, #intro a {
	color:#50c4b7;
}
#welcome a:hover, #intro a:hover {
	color:#e472c4;
}
#intro h1 {
	margin-top:0;
	margin-bottom:1.5em;
}

#code {
	color:#50c4b7;
	border-color:#50c4b7;
}
#docs {
	color:#e472c4;
	border-color:#e472c4;
}
#marquee {
	width:390px;
	margin:3px auto 20px auto;
}
@media all and (max-width: 640px){
	/* these styles show if screen width is less than or equal to 640 */
	#marquee {display:none;}
}
@media all and (min-width: 641px){
	/* these styles show if screen width is greater than or equal to 641 */
	#marquee {display:block;}
}
.host {
	/* text-align:left; */
	display:inline-block;
	width:60%;
	max-width:600px;
	min-width:300px;
}
#drabstract {
	width:56px;
	/* margin-left:34px; */
	margin-bottom:-3px;
}
#abstract {
	margin-bottom:-20px;
}
.reviewfront {
	width:40%;
	color:#ddd;
	font-style:italic;
	padding-bottom:5px;
}
.reviewtext {
	display:inline-block;
	padding:3px;
	background-color:#999;
}
.reviewer {
	display:inline-block;
	margin-top:4px;
	font-style:normal;
	color:#999
}

              
            
!

JS

              
                
// Place two Frames on the page 
// one with the oil texture at zIndex -1 
// and one with the circles at zIndex 1
// as the default zIndex is 0 
// we want the html to capture the mouse
// so both frames will have interactivity turned off

var frame = new Frame({
	scaling:"full",
	captureMouse:false,
	rollover:false,
	allowDefault:true // leave document scrollable
});
frame.on("ready", function() { // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	var stage = frame.stage;
	var stageW = frame.width;
	var stageH = frame.height;

	frame.canvas.style.position = "absolute";
	frame.canvas.style.zIndex = -1;
	frame.canvas.style.pointerEvents = "none";

	// REFERENCES for ZIM at http://zimjs.com
	// see http://zimjs.com/learn.html for video and code tutorials
	// see http://zimjs.com/docs.html for documentation
	// see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
	// see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

	// CODE HERE

	var holder = new Container(stageW, stageH).sca(1.4, 1).centerReg(stage);

	// oval to more box like shapes
	var shapeFactor = {val:90};
	// wiggle starting at 90 +- between 0 and 30 for time between 2000 and 8000
	wiggle(shapeFactor, "val", 90, 0, 20, 2000, 8000);

	// custom function to wiggle blobs
	// color, minTime, maxTime, rotTime, deg, factor1, factor2
	// factors affect scale of controls
	makeBlob("#FF1EAD", 10000, 20000, 50000, "360", 15, 10).sca(1).ble("difference");
	makeBlob(red, 10000, 20000, 50000, "-360", 15, 10).sca(.9).ble("difference")
	makeBlob(green, 2500, 5000, 50000, "-360", 18, 13).sca(.4).ble("difference")
	makeBlob(yellow, 2500, 5000, 50000, "360", 18, 13).sca(.36).ble("difference")

	function makeBlob(color, minTime, maxTime, rotTime, deg, factor1, factor2) {

		// make a Blob and rotate it slowly
		var blob = new Blob({
			color:color,
			interactive:false,
		})
		.noMouse()
		.centerReg(holder)
		.animate({
			props:{rotation:deg},
			time:rotTime,
			ease:"linear",
			loop:true
		});

		// wiggle the points of the blob
		// min and max distance and min and max time
		var spread = [stageH/factor1, stageH/factor2, minTime, maxTime]
		var pc = blob.pointControls;
		// second parameter is where to start min and max distance
		pc[0].wiggle("y",stageH/4-blob.y,...spread); // ES6 spread operator ... !
		pc[1].wiggle("x",stageW*3/4-blob.x,...spread);
		pc[2].wiggle("y",stageH*3/4-blob.y,...spread);
		pc[3].wiggle("x",stageW/4-blob.x,...spread);

		Ticker.add(function() {
			loop(blob.pointControls, control=>{
				// widen Bezier sticks the farther from the center
				// note that control.x and control.y is relative to the origin inside the Blob
				// press the checkbox in bottom left to see the controls
				control.sca(Math.abs(control.x+control.y)/shapeFactor.val);
			});
			blob.update();
		});
		return blob;
	}

	frame.on("resize", function () {
		stageW = frame.width;
		stageH = frame.height;
		holder.centerReg();
	})

}); // end of ready

var frame2 = new Frame({
	scaling:"full",
	captureMouse:false,
	rollover:false,
	allowDefault:true
});
frame2.on("ready", function() { // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	var stage = frame2.stage;
	var stageW = frame2.width;
	var stageH = frame2.height;

	frame2.canvas.style.position = "absolute";
	frame2.canvas.style.zIndex = 1;
	frame2.canvas.style.pointerEvents = "none";

	// make planets with words

	var words = ["MAKE", "ZAPPS", "FOR", "TEN", "$202", "WINS", "TOTAL", "$2020"];
	var planets = []; // pool circles
	var count = 0;
	timeout(500, function () {
		interval({min:500, max:2000}, function (obj) {
			// pool the planets otherwise after 5/10 minutes
			// starts to bog due to making so many text vectors
			if (planets.length < words.length) {
				var c = new Circle(50).ble("difference");
				c.label = new Label(words[count], 24, null, white).centerReg(c);
				planets.push(c);
			} else {
				var c = planets[count];
			}
			c.sca(.5).reg(0).center(stage).bot().ord(1).alp(0).rot(rand(360))
				.animate({alpha:1}, 2000)
				.animate({
				props:{regX:stageW/2, scale:2},
				time:10000,
				call:function (target) {
					target.animate({alpha:0}, 300);
				}
			});
			c.color = Pick.choose([red,green,blue,yellow,pink,orange]);
			c.label.rot(-c.rotation+rand(-10,10));
			if (count == words.length-1) {
				obj.pause();
				count = 0;
				timeout(10000, function () {
					obj.pause(false)
				});
			} else {
				count++;
			}
		});
	});

	frame2.on("resize", function () {
		stageW = frame2.width;
		stageH = frame2.height;
	});

}); // end of ready

// Docs for items used:
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Circle
// https://zimjs.com/docs.html?item=Blob
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=noMouse
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=wiggle
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=bot
// https://zimjs.com/docs.html?item=ord
// https://zimjs.com/docs.html?item=alp
// https://zimjs.com/docs.html?item=ble
// https://zimjs.com/docs.html?item=rot
// https://zimjs.com/docs.html?item=reg
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=centerReg
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=timeout
// https://zimjs.com/docs.html?item=interval
// https://zimjs.com/docs.html?item=zog
// https://zimjs.com/docs.html?item=Ticker
              
            
!
999px

Console