Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	This is how I cut my carbs animated
ID	5812343976411136
Created	6 months ago, 1718632721078
Updated	6 months ago, 1720025619594
Code	<!DOCTYPE html> <!-- --> <script> /** check out my other programs here: https://www.khanacademy.org/profile/kaid_1063463007130342809105382/projects / </script> <html> <head> <meta charset="utf-8"> <title>This is how I cut my carbs animated</title> <link href="https://fonts.googleapis.com/css?family=Material+Icons\|Lora\|Noto+Sans\|Material+Symbols\|Cabin\|Staatliches\|Major+Mono+Display\|Material+Icons+Outlined\|Material+Symbols+Outlined\|Josefin+Sans" rel="stylesheet"/> <style> body{ font-size:150px; font-family:"Noto Sans"; margin:0px; text-align:center; } p{ position:fixed; left:0px; top:-1000px; width:600px; height:600px; } </style> <style> @keyframes this-is{ 0%{ top:900px; } 40%{ top:0px; } 50%{ top:0px; } 60%{ top:0px; } 100%{ top:-1200px; } } #this-is{ background: rgb(158, 242, 250); animation: this-is 5s; margin-top:0px; padding-top:200px; animation-iteration-count: 1; } </style> <style> @keyframes how-i{ 0%{ top:-2200px; } 40%{ top:0px; } 50%{ top:0px; } 60%{ top:0px; } 100%{ top:900px; } } #how-i{ background: rgb(250, 195, 132); animation: how-i 13s; margin-top:0px; padding-top:200px; animation-iteration-count: 1; } </style> <style> @keyframes cut-my{ 0%{ left:-9200px; } 40%{ left:0px; } 50%{ left:0px; } 60%{ left:0px; } 100%{ left:900px; } } #cut-my{ top:0px; background: rgb(247, 153, 245); animation: cut-my 23s; font-size:130px; margin-top:0px; padding-top:200px; animation-iteration-count: 1; } </style> <style> @keyframes carbs{ 0%{ left:99200px; } 40%{ left:0px; } 50%{ left:0px; } 60%{ left:0px; } 100%{ left:-900px; } } #carbs{ top:0px; background: rgb(152, 245, 161); animation: carbs 26s; font-size:130px; margin-top:0px; padding-top:200px; animation-iteration-count: 1; } </style> <style> @keyframes canvas{ 0%{ top:-99200px; } 100%{ top:0px; } } #canvas{ position:fixed; top:0px; left:0px; background: rgb(152, 245, 161); animation: canvas 12s; font-size:130px; margin-top:0px; padding-top:0px; animation-iteration-count: 1; } </style> </head> <body> <p id = "this-is">This is...</p> <p id = "how-i">How I...</p> <p id = "cut-my">Cut my...</p> <p id = "carbs">Carbs!!!</p> <canvas id = "canvas"></canvas> <script type> var canvas = document.getElementById('canvas'), img = document.getElementById('img'), ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height = 600; var frameCount = 0; function draw(){ ctx.fillStyle = "rgb(163, 255, 250)" ctx.fillRect(0,0,600,600); ctx.fillStyle = "black" ctx.font = "90px Noto sans" ctx.fillText("This is how I", 29, 90); ctx.fillText("cut my", 123, 180); ctx.font = "110px Noto sans" ctx.fillText("carbs.", 152, 583); ctx.fillStyle = "rgb(196, 196, 196)" ctx.beginPath(); ctx.ellipse(491,420 + Math.sin(frameCount/15) 10,80,80, 0, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); ctx.lineWidth = "8" ctx.strokeStyle = "black" ctx.beginPath(); ctx.ellipse(492 + Math.sin(frameCount/20) * 10,420 + Math.sin(frameCount/18) * 10,80,80, 0, 0, 2 * Math.PI); ctx.stroke(); ctx.closePath(); ctx.fillStyle = "rgb(214, 214, 214)" ctx.save(); ctx.translate(0,Math.sin(frameCount/15) * 10); ctx.beginPath(); ctx.moveTo(347, 291); ctx.quadraticCurveTo(528, 413, 506, 437); ctx.quadraticCurveTo(474, 443, 306, 337); ctx.fill(); ctx.closePath(); ctx.fillStyle = "rgb(71, 46, 1)" ctx.beginPath(); ctx.moveTo(373, 307); ctx.lineTo(336,355); ctx.lineTo(320,345); ctx.lineTo(356,298); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(350, 293); ctx.quadraticCurveTo(274, 212, 130, 180); ctx.quadraticCurveTo(97, 189, 112, 227); ctx.quadraticCurveTo(173, 238, 309, 340); ctx.fill(); ctx.fillStyle = "rgb(237, 237, 237)" ctx.beginPath(); ctx.ellipse(494,423,6,6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); ctx.closePath(); ctx.restore(); frameCount ++; } window.setInterval(draw,10); //<script> </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJvQvMmpCgw
Votes	25
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Vicioustre𝑥 ‮BBB#
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	1 months ago, 1733777411073
Updated	1 months ago, 1733777415357
Source Deleted	unknown