How to make a simulated green running line on a monochrome screen, as it was before the advent of color displays and modern OS.

enter image description here

    1 answer 1

    For a more comfortable viewing, open - "Full page"

    <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> </head> <body> <canvas id ='NewYear'></canvas> <script> var db = document.body; var c = document.getElementById('NewYear'); var $ = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; var resume; function relay(){ window.requestAnimationFrame(relay); resume(); } </script> <!--Script to Relay!--> <script> //BEGIN SCRIPT RELAY TO ru.StackOverflow.com... _s = db.querySelectorAll("script")[1].innerHTML.split("\n"); x = 0; y = 1; c.width = w = window.innerWidth; c.height = h = _s.length*20; db.style.margin = 0; db.style.background = "hsla(0,0%,0%,1)"; db.style.overflow = "hidden"; $.textBaseline = "top"; $.font = "1.1em monospace"; //PAUSE RELAY: ... // ะŸะฃะกะขะฌ ะ˜ะะžะกะขะ ะะะะซะ• ะ“ะžะกะขะ˜ ะฃะ”ะ˜ะ’ะ›ะฏะฎะขะกะฏ ะ˜ // ะกะŸะ ะะจะ˜ะ’ะะฎะข ะ’ะะก, ะงะขะž ะญะขะž ะ—ะะะงะ˜ะข: //ะกะž ะกะขะะ ะซะœ ะะžะ’ะซะœ 2018 ะ“ะžะ”ะžะœ! // ะฃะ”ะะงะ˜ ะ˜ ะ’ะ•ะ—ะ•ะะ˜ะฏ ะ’ะž ะ’ะกะ•ะฅ ะะะงะ˜ะะะะ˜ะฏะฅ, ะšะะš ะ’ ะ’ะ˜ะ ะขะฃะะ›ะฌะะžะœ, // ะขะะš ะ˜ ะ’ ะ ะ•ะะ›ะฌะะžะœ ะœะ˜ะ ะ•! /* โ˜… *o* *โ™ฅ*o* ***o*** **o**โ™ฅ*o* **โ™ฅ**o**o** **o**โ™ฅ***โ™ฅ*o* *****โ™ฅ*o**o**** **โ™ฅ**o*****o**โ™ฅ** ******o*****โ™ฅ**o*** ****o***โ™ฅ**o***o***โ™ฅ || \____ ||_____/ โ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌโ•ฌ */ resume = function(){ $.globalCompositeOperation = "source-over"; $.shadowBlur = 0; $.fillStyle = "hsla(0,0%,0%,0.4)"; $.fillRect(0,0,w,h); $.shadowColor = "hsla(120,100%,50%,0.5)"; $.shadowBlur = 9; $.fillStyle = "hsla(120,100%,20%,1)"; $.globalCompositeOperation = "lighter"; _s.forEach(function(t, i) { if (i <= y) { if (i == y) { t = t.substr(0, x); } $.fillText(t, 100, 100+i*16); } }); $.fillStyle = "hsla(120,100%,50%,1)"; $.fillRect(100+$.measureText(_s[y].substr(0, x)).width, 102+y*16, 10, 14); x++; if (x >= _s[y].length) { y++; x = 0;} if (y*16 > innerHeight-340) { $.translate(0, -0.5);} if (y >= _s.length-1) { window.clearInterval();}} relay(); </script> </body> </body> </html>

    The script found on your computer. Once downloaded. Now I could not find a link to the source.

    Who will indicate the correct link, add. Slightly modified the script to work without errors in our snippet.
    Congratulations to stackoverflow members.
    Special thanks for the Christmas tree @Hamster

    Jsfiddle

    Option graphics Alexei Shimansky

    Jsfiddle

     <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> </head> <body> <canvas id ='NewYear'></canvas> <script> var db = document.body; var c = document.getElementById('NewYear'); var $ = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; var resume; function relay(){ window.requestAnimationFrame(relay); resume(); } </script> <!--Script to Relay!--> <script> //BEGIN SCRIPT RELAY TO ru.StackOverflow.com... _s = db.querySelectorAll("script")[1].innerHTML.split("\n"); x = 0; y = 1; c.width = w = window.innerWidth; c.height = h = _s.length*20; db.style.margin = 0; db.style.background = "hsla(0,0%,0%,1)"; db.style.overflow = "hidden"; $.textBaseline = "top"; $.font = "1.1em monospace"; //PAUSE RELAY: ... //ะกะž ะกะขะะ ะซะœ ะะžะ’ะซะœ 2018 ะ“ะžะ”ะžะœ! // ะฃะ”ะะงะ˜ ะ˜ ะ’ะ•ะ—ะ•ะะ˜ะฏ ะ’ะž ะ’ะกะ•ะฅ ะะะงะ˜ะะะะ˜ะฏะฅ, ะšะะš ะ’ ะ’ะ˜ะ ะขะฃะะ›ะฌะะžะœ, // ะขะะš ะ˜ ะ’ ะ ะ•ะะ›ะฌะะžะœ ะœะ˜ะ ะ•! /* โ–ˆโ–€โ–ˆโ–‘โ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–€โ–ˆโ–‘โ–ˆโ–€โ–ˆโ–‘โ–ˆโ–‘โ–‘โ–‘โ–ˆโ–‘โ–ˆโ–€โ–„โ–€โ–ˆ โ–ˆโ–‘โ–„โ–‘โ–‘โ–ˆโ–€โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–€โ–„โ–‘โ–ˆโ–€โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆ โ–€โ–€โ–€โ–‘โ–‘โ–€โ–‘โ–€โ–‘โ–€โ–€โ–€โ–‘โ–€โ–€โ–€โ–‘โ–€โ–€โ–€โ–‘โ–€โ–‘โ–€โ–‘โ–‘โ–‘โ–€ โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ โ–‘โ–ˆโ–€โ–€โ–‘โ–ˆโ–€โ–ˆโ–‘โ–‘โ–ˆโ–€โ–ˆโ–‘โ–‘โ–ˆโ–€โ–ˆโ–‘โ–ˆโ–€โ–„โ–€โ–ˆโ–‘โ–‘โ–ˆโ–‘ โ–‘โ–ˆโ–‘โ–‘โ–‘โ–ˆโ–‘โ–ˆโ–‘โ–‘โ–ˆโ–‘โ–ˆโ–‘โ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–‘โ–‘โ–€โ–‘ โ–‘โ–€โ–‘โ–‘โ–‘โ–€โ–€โ–€โ–‘โ–ˆโ–€โ–€โ–€โ–ˆโ–‘โ–€โ–€โ–€โ–‘โ–€โ–‘โ–‘โ–‘โ–€โ–‘โ–‘โ–€โ–‘ โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ โ–‘โ–‘โ–€โ–ˆโ–ˆโ”€โ”€โ”€โ”€โ–ˆโ–ˆโ–€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ˆโ–€โ–€โ–‘โ–‘ โ–‘โ–‘โ”€โ”€โ–ˆโ–€โ–ˆโ–€โ–ˆโ–ˆโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ˆโ”€โ”€โ”€โ–‘โ–‘ โ–‘โ–‘โ”€โ”€โ–ˆโ–„โ–ˆโ–„โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ”€โ”€โ”€โ–‘โ–‘ โ–‘โ–‘โ”€โ”€โ”€โ–ˆโ–ˆโ–ˆโ”€โ”€โ–โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ”€โ”€โ”€โ–‘โ–‘ โ–‘โ–‘โ”€โ”€โ”€โ”€โ–€โ”€โ”€โ”€โ–„โ–ˆโ–ˆโ”€โ–„โ–ˆโ–ˆโ”€โ”€โ”€โ–„โ–ˆโ–ˆโ”€โ”€โ”€โ–‘โ–‘ โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ โ–‘โ–‘โ–ˆโ–€โ–€โ–€โ–ˆโ–‘โ–ˆโ–€โ–€โ–€โ–€โ–ˆโ–‘โ–ˆโ–ˆโ–€โ–ˆโ–ˆโ–‘โ–ˆโ–€โ–€โ–€โ–€โ–ˆโ–‘ โ–‘โ–‘โ–ˆโ–„โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–„โ–‘โ–ˆโ–ˆโ–‘โ–ˆโ–‘โ–€โ–€โ–‘โ–ˆโ–‘ โ–‘โ–‘โ–ˆโ–‘โ–„โ–ˆโ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–ˆโ–‘โ–ˆโ–ˆโ–‘โ–ˆโ–‘โ–ˆโ–ˆโ–‘โ–ˆโ–‘ โ–‘โ–‘โ–ˆโ–„โ–„โ–„โ–ˆโ–‘โ–ˆโ–„โ–„โ–„โ–„โ–ˆโ–‘โ–ˆโ–„โ–„โ–„โ–ˆโ–‘โ–ˆโ–„โ–„โ–„โ–„โ–ˆโ–‘ */ resume = function(){ $.globalCompositeOperation = "source-over"; $.shadowBlur = 0; $.fillStyle = "hsla(0,0%,0%,0.4)"; $.fillRect(0,0,w,h); $.shadowColor = "hsla(120,100%,50%,0.5)"; $.shadowBlur = 9; $.fillStyle = "hsla(120,100%,20%,1)"; $.globalCompositeOperation = "lighter"; _s.forEach(function(t, i) { if (i <= y) { if (i == y) { t = t.substr(0, x); } $.fillText(t, 100, 100+i*16); } }); $.fillStyle = "hsla(120,100%,50%,1)"; $.fillRect(100+$.measureText(_s[y].substr(0, x)).width, 102+y*16, 10, 14); x++; if (x >= _s[y].length) { y++; x = 0;} if (y*16 > innerHeight-340) { $.translate(0, -0.5);} if (y >= _s.length-1) { window.clearInterval();}} relay(); </script> </body> </body> </html>

    • one
      bloody snippet broke the whole tree - Aleksey Shimansky
    • @ Alexey Shimansky yes. He fought, fought and this is the maximum that JSFiddle could do everything is fine. Do you mind if I try your graphics? - Alexandr_TT
    • one hundred baxof at the expense !!!) - Alexey Shimansky
    • one
      Beauty! ....... - Dmitry Polyanin