#Particles.js

[cssmonster]

Discover 14 Mesmerizing CSS Particle Backgrounds

Explore a curated collection of HTML and CSS particle background code examples sourced from Codepen, GitHub, and other reputable resources. This update from September 2019 introduces 7 captivating new additions to enhance your web design with dynamic visuals. Immerse your website in a world of particles and creativity. Related Articles: - Explore 31 Captivating CSS Animated Backgrounds for Your Website Author Riley Adrianza October 14, 2022 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code Reversed HTML/CSS Particles Explore a unique take on HTML and CSS particles with a reversed animation. Immerse your web design in this singular particle animation detail, adding a dynamic and intriguing visual element to your website effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: - Author Noel C March 2, 2020 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Particles Animation Experience the magic of a pure CSS take on the particles.js library. This singular animation detail utilizes CSS-generated circles, with the option to incorporate SVGs for a mesmerizing web design effect. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: - Author 胡嘉仕 July 23, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code Pure CSS Particle Animation Immerse your web design in the captivating world of pure CSS particle animation, showcasing mesmerizing random movement without the need for JavaScript. Explore the unique vignetting effect created using the mask-image property for a distinctive visual experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: - Author rx0079 July 3, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Particle Background Immerse your website with captivating particle backgrounds using CSS. Explore this singular animation detail to add dynamic flair to your web design effortlessly. Discover creative particle effects for your digital canvas. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: - Author Dronca Raul October 24, 2018 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code CSS Particles Immerse your web design in the enchanting world of CSS particles. Explore captivating examples of HTML and CSS particle backgrounds to add dynamic and visually stunning effects to your website. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Takeshi Kano September 20, 2018 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Particle Animation (No JavaScript) Immerse your web design with mesmerizing CSS particle animations – no JavaScript needed. Explore this singular animation detail that adds dynamic visual depth to your website effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Paolo Duzioni February 11, 2018 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Particles Dive into the world of CSS particles, a singular animation detail that brings dynamic visual flair to your web design. Explore the magic of particles with this creative addition to your website's aesthetics. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Envato Tuts+ December 21, 2017 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Pure CSS Animated Particle Background Experience the enchantment of a singular animated particle background created entirely with CSS. Elevate your web design with this mesmerizing animation detail that adds a touch of magic to your website's visuals. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Rémi Denimal July 18, 2017 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Random Particles Animation with Sass & Compass Immerse your web design in the charm of a singular random particles animation loop, powered by Sass & Compass. Explore this captivating animation detail that adds a dynamic touch to your website's aesthetics, creating an engaging visual experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Alexi Taylor June 28, 2017 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS Particles Immerse your web design in the captivating world of CSS particles. Explore this singular animation detail that brings dynamic visual appeal to your website effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author leoman March 24, 2017 Links Download Made with HTML / CSS (SCSS) About a Code Pure CSS Particles Immerse your website in the captivating world of pure CSS particles, a singular animation detail that brings dynamic visual allure to your web design. Explore the magic of particles and enhance your website's aesthetics effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Lorenzo Verzini June 3, 2016 Links Demo and Code Download Made with HTML / CSS (Less) About a Code Quantum Project X EEDI Dive into the world of Quantum Project X EEDI, a singular animation detail that pushes the boundaries of web design. Experience cutting-edge creativity and innovation with this unique project. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author John March 16, 2016 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code CSS Particle-Style Animation Explore a captivating CSS animation detail reminiscent of particles, designed for integration into the product page of Outfit.io. Add a touch of visual allure and dynamism to your web design with this singular animation effect. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: - Author Nate Wiley February 6, 2015 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code CSS Particle Orb Explore the mesmerizing world of the CSS Particle Orb, a singular animation detail that brings a touch of magic to your web design. Immerse your website in the captivating visual effects of this creative element. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Read the full article

[divinector]

Particles.js as Background

[syndicode]

Particles.js for awesome background effects

World gets smarter every day! As well as you! If you checked recently our monthly most popular JS repositories, you could find there a great variety of different useful instruments and libraries. But let us present you something new today. Particles.js for awesome background ef...

[friendraichu]

I have found the stimmiest website ever.

There are so many ways to play with this, you can even make it NASA-themed!

[terencetrey]

Pixel, Pixel, Pixel’s, Cant You See,  Why You Just Need To Work For Me!

Hi my name is Terence Stephens from Bronx NY, and I am a software engineering student at The Flatiron coding school. This is my first of many blog post on my journey, my ups and downs, what I’ve learned and most importantly the fun I’m having. Currently I’m doing a team project and it is coming out Amazing. Two seconds into planning our project we had 1645283 ideas and the motivation was through the roof. We picked a video game project and I love video games so you can only imagine how far I’m willing to go to make this perfect.  

When I realized I might be out of my league, and I have so much more too learn.

I wanted a really good animated background that was video game like and for any of that to happen I had todo a little work with CSS particles and Pixels.  

What is a pixel animation?

“Pixel art is a form of digital art, created through the use of software, where” images are edited on the pixel level. The aesthetic for this kind of graphics comes from 8-bit and 16-bit computers and video game consoles, in addition to other limited systems such as graphing calculators.  In most pixel art, the color palette used is extremely limited in size, with some pixel art using only two colors. “.

How does particle JS work? 

Particles.JS 

“is a lightweight JavaScript library used for creating particles which looks likes the vertices of polygon. We can also interact by hovering over the particles and create more particles by clicking on particles.”

So I started my project and all my ideas started to fall one at a time .

some examples:

Found these pixels and knew I NEEDED them but this was not something I could just copy and paste. 

THE CODE

FINDING OUT THE HARD WAY:

I got them to show but this was the problem, they would stay at the bottom of the page.

Trying with the best knowledge I have with CSS/JAVA I just could not get it to position correctly. 

I DELETED EVERYTHING!!!!! 

Forgetting about positioning made me waste so many hours but there was light at the tunnel with the help from my team.

Resources that helped me:

 https://datacadamia.com/web/css/pixel

https://www.w3schools.com/w3css/w3css_examples.asp

https://www.w3schools.com/css/css_positioning.asp

 Github Particle.js demo

https://vincentgarreau.com/particles.js/

[ixd2-appstate-sp18]

particles.js

Designer Vincent Garrearu created a lightweight JavaScript library for creating particles. The site has several features that allows the user to modify and interact with the code itself. If the user would like to use the code they have created, they can get the code linked from Codepen. 

Though I don’t know what kind of use the particle.js could be for, but it is an interesting and quite of an interactive feature for a website. As Garrearu had used it for his own portfolio website, it could be used for other’s as well, which made his web portfolio unique and more drawn to. The exploration I had on this website was kept me entertain for awhile. I can imagine an interactive game using the particle.js, or a projection on a wall for the user to play with. Experience the details for yourself @ particles.js. 

[cssscriptcom]

Particles Background With Collision And Bounce Effects

Particles Background With Collision And Bounce Effects

Make use of JavaScript and Canvas API to create a particle system with collision and bounce effects. How to use it: 1. Create an HTML canvas element for the particle system. <canvas id="canvas1"></canvas> 2. Load the particles.js JavaScript library in the document and done. <script src="particles.js"></script>

[tak4hir0]

格好いいパーティクルは魅力的です。アプリケーションやWebサイトの彩りとして、未来感を与えたり、インタラクティブ性を感じられます。炎や星空など、様々なパーティクルがあるでしょう。 今回紹介するparticles.jsは線が結びついたパーティクルを生成します。使いどころは意外とありそうです。 particles.jsの使い方 星座や分子のようにつながっています。

[t-baba]

A lot of questions for JavaScript developers

#492 — June 12, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

153 JavaScript Questions (With Their Answers Explained) — Want to test your JavaScript knowledge? Whether for fun or a job interview, this is an interesting set of questions, complete with explanations of the answers. We first linked to this a year ago when it only had about 40 questions, so it’s grown a lot!

Lydia Hallie

An ECMAScript Proposal: Logical Assignment Operators — Dr. Axel covers another proposal in the pipeline for the language that would let us do things like a ||= b or a &&= b as you might in, say, Ruby or Perl.

Dr. Axel Rauschmayer

New Course: React Native — Leverage your JavaScript and React skills for mobile iOS and Android platforms using React Native – ship your very own native mobile applications.

Frontend Masters sponsor

Node Weekly: Our Sister Newsletter for Node Developers — Earlier this week I was speaking with a long time JavaScript Weekly subscriber who hadn’t heard of Node Weekly, our Node-focused weekly newsletter, so I thought I should invite you all to check out the latest issue as we cover a lot of Node things there that we don’t include in JSW :-) Be sure to check out the “7 Interesting Node Modules and Tools” section at the bottom!

Cooperpress

⚡️ Quick bytes:

JSGrids is a handy compilation of the best spreadsheet and data grid libraries so you can compare and pick the right one for you.

VS Code May 2020 has been released with a preview of editor setting syncing between multiple machines, CommonJS auto imports, preserved newlines during JS/TS refactorings, and more.

Excited for Vue 3? There's now an 'awesome' list for Vue 3 resources, links, videos, etc.

MDN has introduced a new front-end development learning pathway to add an opinionated and curated set of tutorials to guide you through learning things like CSS and JavaScript.

There's a JavaScript game you can play in your browser's title bar. Yes, it's open source.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find A Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📚 Tutorials, Opinions and Stories

An Old School Doom Clone (in 13KB of JavaScript) — I have no idea how we missed this last year, but wow, what a neat piece of work. You can even grab it and play with the code yourself.

Nicholas Carlini

Type Assertions in TypeScript — A way to temporarily override a type, a little like lightweight casting.

Dr. Axel Rauschmayer

How to Deploy a Gridsome App on Azure Static Web Apps — Brings together the Gridsome Vue.js site generator with Azure’s new static app deployment service.

Gift Egwuenu

Bitmovin Magazine 5th Edition: Shaping the Future of Video — Get the latest overview of our products, recent feature releases, current video trends, and customer case studies.

Bitmovin Inc. sponsor

Using Higher-Order Components in React — Learn about higher-order components, the syntax of higher-order components, as well as use cases for them.

Shedrack Akintayo

How to Compare Objects in JavaScript — Compares a few different levels of what ‘equality’ actually is when it comes to JS objects.

Dmitri Pavlutin

Svelte, Why So Much Hype? — A closer look at the component-based library.

Anthony Le Goas

Improving the Rendering Performance of a Large List View in AngularJS 1.2.22 — You’re probably not doing this, but this is a pretty neat look at approaching performance issues in legacy apps.

Ben Nadel

🔧 Code & Tools

njt (npm jump to): A Quick Navigation Tool for npm Packages — njt is a tool you can either use locally (npm install njt first) or on the Web site and it acts as a way to quickly reach a package’s issues, homepage, pull request, and numerous other things. Clever idea.

Alexander Kachkaev

Math.js 7.0: An Extensive Math Library for Node.js and Browser — Work with complex numbers, fractions, units, matrices, symbolic computation, etc.

Jos de Jong

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Quotebacks: Embed Quotes Without Losing Context — This is a small library that can embed a quote in an attractive format within the source context. Can also be used as a Chrome extension that saves to local storage.

Tom Critchlow and Toby Shorin

Johnny Five 2.0: A JavaScript Robotics and IoT Programming Framework — If you’d wondered why you haven’t seen much about Johnny Five lately, don’t fear, because… Five is Alive! v2.0 is primarily an internal rewrite release rather than boasting lots of new features, though.

Rick Waldron

Karma 5: A Multiple Real Browser Test Runner for JavaScript — A popular way to test your code in multiple, real browsers at once. GitHub repo.

Karma

React Date Picker 3.0: A Simple and Reusable Date-Picker Component — A mature option that continues to get frequent updates. Demo here.

HackerOne

ModJS: A JavaScript Module for KeyDB and Redis — This isn’t for using Redis (or the KeyDB fork) from JavaScript but for taking JavaScript into the popular data structure server in case you prefer JavaScript to Lua for scripting it.

John Sully

Getting Started With OpenTelemetry In Node.js

Lightstep sponsor

Lightweight Charts 3.0: Canvas-Powered Financial Charts

TradingView, Inc.

tsParticles v1.15.0: A TypeScript Library for Particle Effects — Lots of neat demos in this announcement post. It’s basically Particles.js, but ported to TypeScript. GitHub repo.

Matteo Bruni

Josh.js: A Library to Animate Content on Page Scroll — This effect feels a little overdone nowadays, but this library is small, efficient, and it feels performant to me too.

Al Mamun

SVGuitar: Create SVG-Based Guitar Chord Charts — Very flexible and customizable and you can have a hand-drawn effect as well.

Raphael Voellmy

🗓 Upcoming Online Events

JS Nation (June 18-19) — This free two-day remote conference features over 25 speakers, including Jen Looper, Max Stoiber, John Papa and others.

OpenJS World (June 23-24) — Speakers at this 'virtual experience' include Nicole Sullivan, Prosper Otemuyiwa, Cassidy Williams and more.

CascadiaJS 2020 (September 1-2) — This upcoming online conference is set to take place in September.

by via JavaScript Weekly https://ift.tt/2Yu0uCP

[blondfreeman]

Breaking Down My Portfolio

Ni-release ko kagabi iyong portfolio ko. Sa post na 'to, gusto ko lang ikuwento iyong mga details ng paggawa ko ng portfolio na inabot ng tatlong buwan.

Design

Sa part ng design, ang goal ko ay mag-project ng playful vibes pero may seriousness. Sa pagkakakilala ko kasi sa sarili ko, mahilig ako mag-try ng bago. Sinubukan kong maghanap ng inspirations sa Dribbble, Behance, saka Pinterest, pero wala doon iyong mga type ko na designs na kaayon ng gusto kong mangyari. So ang ginawa ko, gumawa ako ng sarili kong design.

Sa buong project, ito iyong kino-consider ko na pinakamahalagang part. Kailangan kong bumuo ng brand para sa sarili ko, na kapag nakita ng mga employer, alam agad nila kung ano akong type ng employee. Being a fresh grad, wala talaga akong masyadong maipapakitang projects or anything, kaya kinailangan kong bawiin sa portfolio design iyong mga bagay na gano'n.

So para ma-convey ko iyong playful vibes, gumamit ako ng warm colors na fuschia pink or iyong close to purple na color gradients. Ang maganda rito, kasama n'ya iyong emotional connotation ng warmness at energy ng red, pero may touch of feminine vibes dahil pink. Saka bright colors ang ginamit ko, may sense of boldness din siya.

Para naman sa professional settings, pure black ang ginamit kong kulay. Pinag-isipan kong mabuti kung gagawin ko ba talaga 'to kasi masakit sa mata iyong pure black. But after testing sa iba't ibang device (sa pisonet, sa computer shop na may magandang display, sa tablet, sa phone na local, sa phone na orig) nakita ko naman na dahil hindi text-heavy iyong portfolio ko at nagre-rely ako sa images, hindi naman siya gano'n kalaking bagay. Sa katunayan, na-enhance ng black background iyong mga kulay saka iyong mga images.

In line with that professional playful vibes, ang ginamit kong font faces ay Montserrat para sa mga headings, at Barlow naman sa body copy. Makikita sa Montserrat iyong rounded na shapes ng letters, kaya iyong curviness n'ya, may playful na attitude. Meanwhile, kung mapapansin, iyong Barlow ay may square na shapes ay may vibes ng professionalism. And ang maganda rito, mukha siyang typical na font like Arial or Verdana sa normal font sizes na 16px or 12pt, pero mararamdaman mo na iba iyong font.

Para ma-boost din iyong playful na side ng personality ko, nag-rely ako sa maraming rotated na elements. Karamihan sa mga headings, ni-rotate ko nang -5 degrees. Hindi madalas gawin 'to sa Web, so sa tingin ko medyo kakaiba siya in a positive way kapag tiningnan ng recruiter.

Accessibility and Semantics

Alam n'yo namang isa sa mga malalaking pet peeves ko ay iyong accessibility ng site sa kabuuan, saka iyong semantics. Kaya pinagbuhusan ko talaga ng lakas mag-isip kung dapat ba talaga akong gumamit ng <div> instead na <section> or <article>. Pero hindi lang ako basta gumamit ng mga semantic HTML na tags. Nag-review ako ng lahat ng mga semantic tags, naghanap ng mga sagot sa StackOverflow, at nag-browse sa Reddit at Twitter kung aling tags ang puwede kong gamitin. Kaya kapag ni-inspect n'yo iyong HTML code ng site, semantically correct ito sa abot ng aking makakaya.

Sa part naman ng accessibility, pinagbuhusan ko ng time na mag-research nang maigi kung paano magiging accessible sa pinakamaraming devices hangga't posible ang site ko. Ni-research ko iyong tungkol sa source orders ng mga element, focus styles, keyboard navigations, screen readers, at iba pa. Although hindi ko pa siya nate-test as of yet, may around 85% confidence ako na accessible ang portfolio ko.

Development and Coding

Since fresh graduate nga ako, wala akong masyadong projects na puwedeng ipakita. Sa isang job interview na pinuntahan ko, in-inspect ng interviewer iyong code ng portfolio ko dati na luma 'tapos binreak down n'ya for me lahat ng puwede ko pang i-improve sa code. So this time around sinunod ko iyon, dahil itong portfolio ay isa sa mga project na puwede kong ipakita sa kanila.

So ito ang goal: gamitin ang pinakabagong technologies na available sa HTML at CSS, pero siguraduhing gagana ito sa lahat ng browsers, even sa pinakaluma. Pero wala na akong pakialam sa lahat ng versions ng Internet Explorer, that's for sure.

Ang ginawa ko is mag-rely sa error handling ng CSS, or iyong tinatawag na cascade. For example, para sa layout, una kong ginawa iyong sa mobile version. As much as possible, hindi ako gumamit dito ng CSS Grid or flexbox. Then para sa desktop layout, doon ko binonggahan ang paggamit ng mga bagong features ng CSS. Now, ang logic nito ay ganito: kung ang user ay gumagamit ng lumang browser na walang CSS Grid, gagana pa rin ang site sa browser nila, pero mobile version ang makikita nila. Sinamantala ko iyong fallbacks na ginagawa ng CSS para sa akin automatically.

Isa naman sa naging problem ko is iyong malaking Rubio sa unang part ng page. Ang ginawa ko kasi, kapag naka-mobile, nakatagilid iyon, bale ginamitan ko iyon ng writing-mode: vertical-lr;. Tapos nilagyan ko ng rotate(180deg) para umikot siya paharap sa left side. Ang hindi ko nakita ay iyong mga browsers na walang writing-mode. Dahil wala sila no'n, hindi iyon gagana. Pero magro-rotate pa rin iyong text nang 180 degrees kasi 97% ng browsers ang may transform property. Kaya ang nangyari, pa-horizontal iyong text, pero nakabaligtad vertically, sa mga browsers na luma, including iyong browser ng cellphone kong clone. Pero ang naging solusyon ko ay hinayaan ko na lang siyang gano'n. No'ng tiningnan ko kasi, hindi naman siya panget; sa katunayan, medyo inline pa rin siya doon sa playfulness na gusto kong ma-achieve so hinayaan ko na lang. Tutal, 3% lang naman ng browsers ang magkakaroon ng gano'n.

No'ng kino-code ko na iyong site, napansin ko na medyo may kulang. Kaya ang ginawa ko ay kinuha ko ang tulong ng ParticlesJS para lagyan ng sizzle ang ilang parts ng portfolio ko.

Conclusion

Inabot din ako ng tatlong buwan para matapos 'to. Well, mostly, kasi wala kaming kuryente for two months na kaya hindi ko siya matapos-tapos, unless tatiyagain mo sa pisonet. Pero other than that, naging enjoyable pero matrabaho kasi sa dami ng readings na ginawa ko saka research. Pero at least, once na nasa industry na ako, almost ready na ako for deployment! Thanks for reading!

[mana-bou0322]

パーティクル

cssでパーティクル

https://liginc.co.jp/442913

jsライブラリ

bubbly-bg(https://github.com/tipsy/bubbly-bg)

Particlejs(https://vincentgarreau.com/particles.js/)

Particle Develop(https://ics-creative.github.io/project-particle-develop/)

[reynaportfolio-blog]

https://reynaportfolio.000webhostapp.com/Designs/oppy/particles.js-master/demo/index.html

[responsiveportfolio]

Website Development .2

After setting up the navbar, I then looked through for images to use for the landing page, after a few images I found the right match, and proceeded to create an intro to the start as well as the starting pages. The font I originally chose did not work with the theme so that had to change, and a few logo drafts until I reached the final close to final version.

after adding particles.js I felt like the site elevated to another level after this I was just missing more interactivity to make it unique which is why I decided to make the icons in the about section green once they tap it (hover function on pc’s).

^^^ (background colour change on hover)

[fergusjimminson]

Website: Implementing an interactive background

After the first hackathon where Mar showed us a great many javascript options for our website, I knew I wanted to implement something like that in my website especially seeing that there was so many options to implement them from somebody else. I went through a series of options throughout my development (such as https://vincentgarreau.com/particles.js/) , however they were too limited in terms of changing the look of them and with my aim to have my website as close to 100% my own development as possible, I needed something that I could change enough so that it was not instantly recognisable as somebody else. Also I decided on a background because I wanted it to be a subtle finishing touch, as it were, just to give my website that makes the user say, ‘wait, oh thats cool’ and entertain them for long enough but without distracting them from the rest of my site. I knew what kind of design I would like as well as shown in my mood board and after searching on codepen.io I found this: https://codepen.io/brendansparrow/pen/PbzjJa which was exact kind of minimal but eye-catching thing I wanted.

I began trying to implement all the code into my own index.html file and css and linked a new script file to keep the background separate. incorporating this background was probably the most tricky thing I have done for this website, as I wasn't sure what needed to be included and what didn't for it to work. It was hours of trial and error of it not working or it only covering a third of the screen. Again I had help from Tolga with implementing the script and when I got it working, he helped clean the code so I didn’t have all the unnecessary parts.

The above is from when it was first implemented and I had just worked out where to change the colours and so had already changed them once from the original multicoloured state.

Once implemented and again the script was working, that is when I was then free to just explore and take time to work out which snippet of code did each thing. Through this experimenting I was able to work out how to change colours and size of the shapes in the background and how the area around the mouse lit up and how big it was. I changed all of these details to produce the following results as my final background.