CodePen Embed - Улыбающийся котик

Live

This Pen is owned by Звонарёва Елизавета on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"ZENbPxe\",\"auto_save\":true},\"hashid\":\"ZENbPxe\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":74887901,\"user_id\":10956458,\"html\":\"<body>\\n    <canvas id=\\\"myCanvas\\\" width=\\\"500\\\" height=\\\"350\\\"></canvas>\\n\\n    <form>\\n        <input type=\\\"button\\\" onclick=\\\"startAnimation()\\\" value=\\\"Старт\\\" />\\n        <input type=\\\"button\\\" onclick=\\\"stopAnimation()\\\" value=\\\"Стоп\\\" />\\n    </form>\\n</body>\\n\\n</html>\",\"css\":\"\",\"js\":\"var animationId;\\n        var animationRunning = false;\\n\\n        function startAnimation() {\\n            if (!animationRunning) {\\n                animationRunning = true;\\n                animateMay(); // вызов функции анимации при нажатии кнопки \\\"старт\\\"\\n            }\\n        }\\n\\n        function stopAnimation() {\\n            animationRunning = false;\\n            cancelAnimationFrame(animationId); // отмена анимации при нажатии кнопки \\\"стоп\\\"\\n        }\\n\\n        var canvas = document.getElementById('myCanvas');\\n        var ctx = canvas.getContext('2d');\\n\\n        var eyeX1 = 160;\\n        var eyeX2 = 240;\\n        var month1 = 0.2;\\n        var month2 = 0.8;\\n\\n        var eyeDirectionX = 0.5;\\n        var monthDirection = 0.01;\\n\\n\\n        function animateMay() {\\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\\n\\n            // уши кота\\n            ctx.beginPath();\\n            ctx.moveTo(110, 170);\\n            ctx.lineTo(70, 70);\\n            ctx.lineTo(170, 110);\\n            ctx.fillStyle = \\\"orange\\\";\\n            ctx.fill();\\n\\n            ctx.beginPath();\\n            ctx.moveTo(120, 170);\\n            ctx.lineTo(100, 100);\\n            ctx.lineTo(150, 115);\\n            ctx.fillStyle = \\\"pink\\\";\\n            ctx.fill();\\n\\n            ctx.beginPath();\\n            ctx.moveTo(340, 70);\\n            ctx.lineTo(290, 180);\\n            ctx.lineTo(240, 110);\\n            ctx.fillStyle = \\\"orange\\\";\\n            ctx.fill();\\n\\n            ctx.beginPath();\\n            ctx.moveTo(310, 100);\\n            ctx.lineTo(280, 180);\\n            ctx.lineTo(220, 130);\\n            ctx.fillStyle = \\\"pink\\\";\\n            ctx.fill();\\n\\n            // голова кота\\n            ctx.beginPath();\\n            ctx.arc(200, 200, 100, 0, 2 * Math.PI);\\n            ctx.fillStyle = \\\"orange\\\";\\n            ctx.fill();\\n\\n            // глаза кота\\n            ctx.beginPath();\\n            ctx.arc(160, 180, 25, 0, 2 * Math.PI);\\n            ctx.fillStyle = \\\"white\\\";\\n            ctx.fill();\\n\\n            ctx.beginPath();\\n            ctx.arc(eyeX1, 180, 5, 0, 2 * Math.PI);\\n            ctx.fillStyle = \\\"black\\\";\\n            ctx.fill();\\n\\n            ctx.beginPath();\\n            ctx.arc(240, 180, 25, 0, 2 * Math.PI);\\n            ctx.fillStyle = \\\"white\\\";\\n            ctx.fill();\\n\\n            ctx.beginPath();\\n            ctx.arc(eyeX2, 180, 5, 0, 2 * Math.PI);\\n            ctx.fillStyle = \\\"black\\\";\\n            ctx.fill();\\n\\n            // рот кота\\n            ctx.beginPath();\\n            ctx.arc(200, 240, 50, month1 * Math.PI, month2 * Math.PI); //0.2   0.8\\n            ctx.fillStyle = \\\"white\\\";\\n            ctx.fill();\\n\\n            // нос кота\\n            ctx.beginPath();\\n            ctx.moveTo(180, 215);\\n            ctx.lineTo(220, 215);\\n            ctx.lineTo(200, 230);\\n            ctx.fillStyle = \\\"pink\\\";\\n            ctx.fill();\\n\\n            //Движение зрачков\\n            eyeX1 += eyeDirectionX; \\n            eyeX2 += eyeDirectionX;\\n\\n            //Проверка достижения границ\\n            if (eyeX1 <= 140 || eyeX1 >= 180){\\n                eyeDirectionX = -eyeDirectionX;\\n            }\\n\\n            month1 += monthDirection;\\n            month2 += monthDirection;\\n\\n            if (month1 <= 0 || month1 >= 1) {\\n                monthDirection *= -1;\\n            }\\n\\n            if (month2 <= 0.5 || month2 >= 1) {\\n                monthDirection *= -1;\\n            }\\n\\n            if (animationRunning) {\\n                animationId = requestAnimationFrame(animateMay); // вызов функции анимации с задержкой\\n            }\\n        }\\n\\n        // Начальная отрисовка\\n        requestAnimationFrame(animateMay);\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-05-17T09:03:10.430Z\",\"updated_at\":\"2024-05-17T09:09:16.684Z\",\"title\":\"Улыбающийся котик\",\"description\":\"\",\"slug_hash\":\"ZENbPxe\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":3,\"pick_visible_at\":null,\"cpid\":\"018f85ca-7a5e-7c34-9dcf-4557fd35873f\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}