{"id":15987,"date":"2019-07-18T21:32:03","date_gmt":"2019-07-18T21:32:03","guid":{"rendered":"http:\/\/democontent.codex-themes.com\/thegem-creative\/?page_id=15987"},"modified":"2026-04-16T11:31:07","modified_gmt":"2026-04-16T11:31:07","slug":"page-404-dark-with-effects","status":"publish","type":"page","link":"https:\/\/cs2indonesia.com\/index.php\/pages\/404-pages\/page-404-dark-with-effects\/","title":{"rendered":"With Particles (Demo)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15987\" class=\"elementor elementor-15987\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-153e723 elementor-section-stretched elementor-section-height-full elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"153e723\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-thegem\"><div class=\"elementor-row\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21729958\" data-id=\"21729958\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-38bdbe6c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"38bdbe6c\" data-element_type=\"section\" data-e-type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-thegem\"><div class=\"elementor-row\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4fd3883\" data-id=\"4fd3883\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-48806ec9 flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-html\" data-id=\"48806ec9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<svg viewBox=\"0 0 600 170\">\r\n\r\n  <!-- Gradient -->\r\n  <linearGradient id=\"gr-simple\" x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\">\r\n    <stop stop-color=\"#9575cd\" offset=\"0%\"\/>\r\n    <stop stop-color=\"#00bcd4\" offset=\"100%\"\/>\r\n  <\/linearGradient>\r\n\r\n  <!-- Text -->\r\n  <text text-anchor=\"middle\"\r\n        x=\"50%\"\r\n        y=\"50%\"\r\n        dy=\".35em\"\r\n        class=\"text title-h1 light\"\r\n        style=\"fill: url(#gr-simple); font-size: 230px; line-height: 1;\"\r\n        >\r\n    404\r\n  <\/text>\r\n<\/svg>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79db2414 flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-heading\" data-id=\"79db2414\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<div class=\"title-h1 elementor-heading-title elementor-size-default\">PAGE NOT FOUND<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2386bfe flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-text-editor\" data-id=\"2386bfe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\r\n\t\t\t\t\t\t<div class=\"styled-subtitle\"><span style=\"color: #ffffff;\">We\u2019re sorry, the page you have looked for does not exist in our database! Maybe go to our\u00a0\u00a0 <a style=\"color: #ffffff; background-color: #9575cd; padding: 2px 10px;\" href=\"https:\/\/codex-themes.com\/thegem\/\">home page<\/a>\u00a0\u00a0 or try to use a <a style=\"color: #ffffff; background-color: #00bcd4; padding: 2px 10px;\" href=\"#\">search?<\/a><\/span><\/div>\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c6ff4be flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-thegem-searchbar\" data-id=\"7c6ff4be\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;thegem_elementor_preset&quot;:&quot;dark&quot;,&quot;add_icon&quot;:&quot;yes&quot;}\" data-widget_type=\"thegem-searchbar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"gem-search-form gem-search-form-style-dark gem-search-form-submit-inside  gem-search-form-submit-icon-\">\n\t\t\t<form role=\"search\" method=\"get\" class=\"search-form\" action=\"https:\/\/cs2indonesia.com\/\">\n\t\t\t\t\t\t\t\t<input class=\"search-field\" type=\"search\" name=\"s\" placeholder=\"Search...\" aria-label=\"Search\"\/>\n\t\t\t\t<button class=\"gem-button gem-button-size-normal gem-button-style-flat search-submit gem-button-text-weight-thin\" type=\"submit\" aria-label=\"Search\">\n\t\t\t\t<span class=\"search-submit-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-search\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\"><\/path><\/svg><\/span>\t\t\t\t<\/button>\n\t\t\t\t\t\t\t<\/form>\n\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div><\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-699bbd25 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"699bbd25\" data-element_type=\"section\" data-e-type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-thegem\"><div class=\"elementor-row\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7bf714e6\" data-id=\"7bf714e6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-770e621d elementor-fixed flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-html\" data-id=\"770e621d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;fixed&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"animation-wrapper\">\r\n    <canvas id=\"animation-visual-canvas\"><\/canvas>\r\n<\/div>\r\n    \r\n<style>\r\n.animation-wrapper {\r\nwidth: 100%;\r\nheight: 1000px;\r\nposition: absolute;\r\ntop: 0;\r\nleft: 0;\r\noverflow: hidden;\r\nz-index: 1;\r\n}\r\n.animation-wrapper canvas {\r\nwidth: 100%;\r\nheight: 100%;\r\nposition: absolute;\r\nleft: 0;\r\ntop: 0;\r\nopacity: 1;\r\nz-index: 1;\r\n}\r\n<\/style>\r\n\r\n    <script type=\"text\/javascript\" src=\" https:\/\/codex-themes.com\/thegem\/wp-content\/plugins\/thegem-custom-options\/js\/TweenLite.min.js\"><\/script>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/codex-themes.com\/thegem\/wp-content\/plugins\/thegem-custom-options\/js\/EasePack.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n    (function() {\r\n        var lastTime = 0;\r\n        var vendors = ['ms', 'moz', 'webkit', 'o'];\r\n        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {\r\n            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];\r\n            window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];\r\n        }\r\n\r\n        if (!window.requestAnimationFrame)\r\n            window.requestAnimationFrame = function(callback, element) {\r\n                var currTime = new Date().getTime();\r\n                var timeToCall = Math.max(0, 16 - (currTime - lastTime));\r\n                var id = window.setTimeout(function() { callback(currTime + timeToCall); },\r\n                    timeToCall);\r\n                    lastTime = currTime + timeToCall;\r\n                return id;\r\n            };\r\n\r\n            if (!window.cancelAnimationFrame)\r\n                window.cancelAnimationFrame = function(id) {\r\n                    clearTimeout(id);\r\n                };\r\n    }());\r\n\r\n    (function() {\r\n        var canvas,\r\n            contentWidth,\r\n            contentHeight,\r\n            ctx,\r\n            points = [],\r\n            target;\r\n\r\n        function initVisualAnimation() {\r\n            canvas = document.getElementById(\"animation-visual-canvas\");\r\n\r\n            resize();\r\n\r\n            ctx = canvas.getContext('2d');\r\n\r\n            target = {\r\n                x: contentWidth \/ 2,\r\n                y: contentHeight \/ 2\r\n            };\r\n\r\n            \/\/ create points\r\n            for (var x = 0; x < contentWidth; x = x + contentWidth \/ 20) {\r\n                for (var y = 0; y < contentHeight; y = y + contentHeight \/ 20) {\r\n                    var px = x + Math.random() * contentWidth \/ 20;\r\n                    var py = y + Math.random() * contentHeight \/ 20;\r\n                    points.push({\r\n                        x: px,\r\n                        originX: px,\r\n                        y: py,\r\n                        originY: py\r\n                    });\r\n                }\r\n            }\r\n\r\n            \/\/ for each point find the 5 closest points\r\n            for (var i = 0; i < points.length; i++) {\r\n                var closest = [];\r\n                var p1 = points[i];\r\n                for (var j = 0; j < points.length; j++) {\r\n                    var p2 = points[j];\r\n                    if (p1 != p2) {\r\n                        var placed = false;\r\n                        for (var k = 0; k < 5; k++) {\r\n                            if (!placed) {\r\n                                if (closest[k] == undefined) {\r\n                                    closest[k] = p2;\r\n                                    placed = true;\r\n                                }\r\n                            }\r\n                        }\r\n\r\n                        for (var k = 0; k < 5; k++) {\r\n                            if (!placed) {\r\n                                if (getDistance(p1, p2) < getDistance(p1, closest[k])) {\r\n                                    closest[k] = p2;\r\n                                    placed = true;\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n                p1.closest = closest;\r\n            }\r\n\r\n            \/\/ assign a circle to each point\r\n            for (var i in points) {\r\n                points[i].circle = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255, 255, 255, 0.3)');\r\n            }\r\n\r\n            addListeners();\r\n\r\n            animate();\r\n            for (var i in points) {\r\n                shiftPoint(points[i]);\r\n            }\r\n        }\r\n\r\n        function addListeners() {\r\n            if( !('ontouchstart' in window)) {\r\n                window.addEventListener('mousemove', mouseMove);\r\n            }\r\n\r\n            window.addEventListener('resize', resize);\r\n        }\r\n\r\n        function mouseMove(e) {\r\n            var posx = posy = 0;\r\n            var offset_top = getElementPosition(canvas).top;\r\n\r\n            if (e.pageX || e.pageY) {\r\n                posx = e.pageX;\r\n                posy = e.pageY;\r\n            } else if (e.clientX || e.clientY)    {\r\n                posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;\r\n                posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;\r\n            }\r\n\r\n            target.x = posx;\r\n            target.y = posy - offset_top;\r\n        }\r\n\r\n        function getElementPosition(elem) {\r\n            var w = elem.offsetWidth,\r\n                h = elem.offsetHeight,\r\n                l = 0,\r\n                t = 0;\r\n\r\n            while (elem) {\r\n                l += elem.offsetLeft;\r\n                t += elem.offsetTop;\r\n                elem = elem.offsetParent;\r\n            }\r\n\r\n            return {\r\n                left: l,\r\n                top: t,\r\n                width: w,\r\n                height: h\r\n            };\r\n        }\r\n\r\n        function resize() {\r\n            \/\/ parent node size\r\n            contentWidth = canvas.parentNode.offsetWidth;\r\n            contentHeight = canvas.parentNode.offsetHeight;\r\n\r\n            \/\/ set canvas size equal size of parent node\r\n            canvas.width = contentWidth;\r\n            canvas.height = contentHeight;\r\n        }\r\n\r\n        function getDistance(p1, p2) {\r\n            return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);\r\n        }\r\n\r\n        function Circle(pos, rad, color) {\r\n            var _this = this;\r\n\r\n            (function() {\r\n                _this.pos = pos || null;\r\n                _this.radius = rad || null;\r\n                _this.color = color || null;\r\n            })();\r\n\r\n            this.draw = function() {\r\n                if (!_this.active) return;\r\n                ctx.beginPath();\r\n                ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);\r\n                ctx.fillStyle = 'rgba(255, 255, 255, ' + _this.active + ')';\r\n                ctx.fill();\r\n            };\r\n        }\r\n\r\n        function animate() {\r\n            ctx.clearRect(0, 0, contentWidth, contentHeight);\r\n\r\n            for (var i in points) {\r\n                \/\/ detect points in range\r\n                if (Math.abs(getDistance(target, points[i])) < 4000) {\r\n                    points[i].active = 0.3;\r\n                    points[i].circle.active = 0.6;\r\n                } else if (Math.abs(getDistance(target, points[i])) < 20000) {\r\n                    points[i].active = 0.1;\r\n                    points[i].circle.active = 0.3;\r\n                } else if (Math.abs(getDistance(target, points[i])) < 40000) {\r\n                    points[i].active = 0.02;\r\n                    points[i].circle.active = 0.1;\r\n                } else {\r\n                    points[i].active = 0;\r\n                    points[i].circle.active = 0;\r\n                }\r\n\r\n                drawLines(points[i]);\r\n                points[i].circle.draw();\r\n            }\r\n\r\n            requestAnimationFrame(animate);\r\n        }\r\n\r\n        function drawLines(p) {\r\n            if (!p.active) {\r\n                return;\r\n            }\r\n\r\n            for (var i in p.closest) {\r\n                ctx.beginPath();\r\n                ctx.moveTo(p.x, p.y);\r\n                ctx.lineTo(p.closest[i].x, p.closest[i].y);\r\n                ctx.strokeStyle = 'rgba(255, 255, 255, ' + p.active + ')';\r\n                ctx.stroke();\r\n            }\r\n        }\r\n\r\n        function shiftPoint(p) {\r\n            TweenLite.to(\r\n                p,\r\n                1 + 1 * Math.random(),\r\n                {\r\n                    x: p.originX - 50 + Math.random() * 100,\r\n                    y: p.originY - 50 + Math.random() * 100,\r\n                    ease:Circ.easeInOut,\r\n                    onComplete: function() {\r\n                        shiftPoint(p);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n\r\n        window.onload = initVisualAnimation;\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div><\/div>\r\n\t\t<\/section>\r\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div><\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":16128,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15987","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/pages\/15987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/comments?post=15987"}],"version-history":[{"count":1,"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/pages\/15987\/revisions"}],"predecessor-version":[{"id":33370,"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/pages\/15987\/revisions\/33370"}],"up":[{"embeddable":true,"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/pages\/16128"}],"wp:attachment":[{"href":"https:\/\/cs2indonesia.com\/index.php\/wp-json\/wp\/v2\/media?parent=15987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}