oda-framework/tools/styles/wallpapers/dots/dots.js

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

ODA({is: 'oda-dots',
    styleNode: undefined,
    attached() {
        this.styleNode = document.createElement("style");
        document.head.appendChild(this.styleNode);
        this.styleNode.innerHTML = style;
    },
    stopAnimation() {
        document.head.removeChild(this.styleNode);
    }
})

const style = `
html {
    font: 5vmin/1.3 Serif;
    overflow: hidden;
    background: #123;
}
body,
head {
    display: block;
    font-size: 52px;
    color: transparent;
}
head::before,
head::after,
body::before,
body::after {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: ".";
    mix-blend-mode: screen;
    animation: 44s -27s move infinite ease-in-out alternate;
}
body::before {
    text-shadow: 0.0102944492em 1.1770979424em 7px rgba(255, 186, 0, 0.9), 1.5707970122em 1.4853643273em 7px rgba(255, 125, 0, 0.9), 0.1941651795em 1.473138641em 7px rgba(0, 178, 255, 0.9), 2.0645933468em 1.8293557615em 7px rgba(99, 0, 255, 0.9), 1.5451571319em 0.3806272874em 7px rgba(255, 250, 0, 0.9), 1.7333734725em 0.3207805694em 7px rgba(255, 206, 0, 0.9), 0.5940620516em 1.4058396334em 7px rgba(255, 0, 20, 0.9), 0.730097609em 2.1058555685em 7px rgba(0, 203, 255, 0.9), 0.8495756916em 1.0517893433em 7px rgba(180, 255, 0, 0.9), -0.1567896558em 0.1878353593em 7px rgba(92, 255, 0, 0.9), 1.5840677524em 1.5448619196em 7px rgba(250, 255, 0, 0.9), 2.1941238792em -0.2409934358em 7px rgba(255, 0, 5, 0.9), 0.4146757077em 0.7425082408em 7px rgba(9, 0, 255, 0.9), 2.2001330114em 1.3965770914em 7px rgba(255, 0, 88, 0.9), 0.911374864em 0.4646807393em 7px rgba(255, 0, 228, 0.9), -0.2422713212em 1.2951604124em 7px rgba(255, 144, 0, 0.9), 0.9226314915em 0.1830164276em 7px rgba(0, 255, 112, 0.9), 1.2887540315em 0.8495078733em 7px rgba(0, 255, 241, 0.9), 0.9827099219em -0.1525498202em 7px rgba(255, 0, 235, 0.9), 1.5680087059em -0.1820118002em 7px rgba(24, 255, 0, 0.9), -0.2305848497em 1.3536699474em 7px rgba(255, 0, 159, 0.9), 1.1377346302em -0.2433267299em 7px rgba(0, 60, 255, 0.9), 0.7885667729em 0.7100023023em 7px rgba(31, 0, 255, 0.9), -0.3957994874em 2.4991861631em 7px rgba(111, 255, 0, 0.9), 0.286028502em 1.0021311336em 7px rgba(255, 0, 80, 0.9), 1.5103706769em 1.8877691891em 7px rgba(255, 0, 34, 0.9), 1.148768451em 1.5789618901em 7px rgba(133, 255, 0, 0.9), 1.8069684355em 0.8260789665em 7px rgba(255, 0, 229, 0.9), 1.8204406852em 1.3942749771em 7px rgba(255, 0, 94, 0.9), 1.1709342735em 1.5404761369em 7px rgba(126, 0, 255, 0.9), 2.092515516em 1.2474444987em 7px rgba(0, 235, 255, 0.9), 1.9531937044em 1.334421685em 7px rgba(25, 0, 255, 0.9), 0.507541563em 0.9435639979em 7px rgba(243, 255, 0, 0.9), 1.8811412855em 1.3258735486em 7px rgba(0, 255, 163, 0.9), 1.4247307695em -0.2321743632em 7px rgba(124, 0, 255, 0.9), 1.3421769877em -0.0754005819em 7px rgba(105, 0, 255, 0.9), 0.1006001243em 0.5450189723em 7px rgba(97, 255, 0, 0.9), 1.3052709785em 1.6549526728em 7px rgba(47, 0, 255, 0.9), 1.2297589503em 1.4725507032em 7px rgba(0, 255, 91, 0.9), 0.1884815566em 0.1507762948em 7px rgba(0, 197, 255, 0.9), 1.0589006774em -0.1482468583em 7px rgba(56, 0, 255, 0.9);
    animation-duration: 44s;
    animation-delay: -27s;
}
body::after {
    text-shadow: 0.2902096212em 2.10610508em 7px rgba(0, 147, 255, 0.9), 1.2749685725em 1.8601228466em 7px rgba(0, 43, 255, 0.9), 1.410339994em 0.887276576em 7px rgba(0, 255, 241, 0.9), 2.4859659518em 1.9061772724em 7px rgba(255, 0, 246, 0.9), 0.4467993418em 2.3720215381em 7px rgba(255, 115, 0, 0.9), 0.9123123719em -0.0218507307em 7px rgba(255, 104, 0, 0.9), 0.8889773997em 2.1423973534em 7px rgba(255, 0, 7, 0.9), 1.2948615052em 0.7499330229em 7px rgba(255, 0, 144, 0.9), 2.4593800707em 0.5715869369em 7px rgba(0, 255, 47, 0.9), 1.2460295817em 0.5102181283em 7px rgba(167, 0, 255, 0.9), 0.2845621663em 0.2365892158em 7px rgba(153, 0, 255, 0.9), 0.4313461938em 0.9226826238em 7px rgba(0, 223, 255, 0.9), 0.1172416628em 1.8690680804em 7px rgba(255, 0, 11, 0.9), 1.1513015231em -0.1661785486em 7px rgba(255, 0, 189, 0.9), 2.1552131602em 0.4049001855em 7px rgba(255, 87, 0, 0.9), 1.8526826661em 0.8603068697em 7px rgba(255, 64, 0, 0.9), -0.1185775872em 1.0938078047em 7px rgba(255, 0, 88, 0.9), -0.1909353542em 1.501616093em 7px rgba(0, 230, 255, 0.9), 2.0597543557em 0.6388113193em 7px rgba(13, 255, 0, 0.9), -0.469754628em -0.4052199065em 7px rgba(0, 255, 100, 0.9), -0.4005245924em 2.3033610004em 7px rgba(14, 255, 0, 0.9), 0.0213240037em 0.6400232759em 7px rgba(255, 102, 0, 0.9), 0.6052754568em -0.3147912316em 7px rgba(255, 0, 82, 0.9), 2.0930309755em 0.6906387655em 7px rgba(0, 255, 4, 0.9), 1.7297384341em 2.3360752226em 7px rgba(0, 255, 44, 0.9), 1.8480023392em 0.2945956993em 7px rgba(3, 0, 255, 0.9), 0.1749241894em 1.9927525307em 7px rgba(239, 255, 0, 0.9), 1.8951869758em 0.9342943216em 7px rgba(105, 255, 0, 0.9), -0.1333759484em 0.2449615198em 7px rgba(255, 84, 0, 0.9), 0.3549950628em 1.5772936228em 7px rgba(0, 24, 255, 0.9), 1.844808176em 1.7008615137em 7px rgba(255, 0, 195, 0.9), 2.0774865438em -0.3376616109em 7px rgba(213, 255, 0, 0.9), 0.1988706697em 2.0132112001em 7px rgba(255, 0, 239, 0.9), 0.9457437246em 1.5862196925em 7px rgba(255, 0, 235, 0.9), 1.4994082751em 1.6909119312em 7px rgba(120, 0, 255, 0.9), 2.1612670074em 0.8854200262em 7px rgba(0, 255, 93, 0.9), 2.3495115813em 2.4107895266em 7px rgba(255, 148, 0, 0.9), 2.2528988268em 0.7217832578em 7px rgba(160, 255, 0, 0.9), 0.6383885871em 1.5326677433em 7px rgba(195, 0, 255, 0.9), 0.145231241em -0.1177019371em 7px rgba(0, 255, 198, 0.9), 0.1077940685em -0.4139042158em 7px rgba(44, 255, 0, 0.9);
    animation-duration: 43s;
    animation-delay: -32s;
}
head::before {
    text-shadow: 0.9634113574em -0.3936717898em 7px rgba(255, 23, 0, 0.9), 1.2379901239em -0.3588698121em 7px rgba(0, 226, 255, 0.9), 0.415936748em 0.7375947136em 7px rgba(0, 48, 255, 0.9), 1.3172231839em 1.6709812294em 7px rgba(255, 0, 28, 0.9), 2.2639164913em 0.691220328em 7px rgba(255, 0, 112, 0.9), 0.4059287538em 1.0125817284em 7px rgba(118, 0, 255, 0.9), 1.551955544em 2.3355633773em 7px rgba(0, 187, 255, 0.9), 1.4231817256em -0.3722030592em 7px rgba(186, 255, 0, 0.9), 0.7265349608em 0.87826568em 7px rgba(0, 255, 132, 0.9), 1.1266927405em 1.3610373132em 7px rgba(255, 0, 141, 0.9), 2.1897465855em 0.936829853em 7px rgba(0, 255, 97, 0.9), -0.0451076414em 0.5019349168em 7px rgba(255, 0, 236, 0.9), 1.6656739263em 1.8699564931em 7px rgba(255, 0, 230, 0.9), -0.1665166396em 1.1326185372em 7px rgba(19, 0, 255, 0.9), 0.6560429095em 1.9916130694em 7px rgba(0, 255, 245, 0.9), -0.4725225001em 1.6815120366em 7px rgba(0, 217, 255, 0.9), 2.3903651687em 0.4977270894em 7px rgba(0, 122, 255, 0.9), 0.2516492055em 0.9168163592em 7px rgba(0, 255, 4, 0.9), 0.4804663043em 2.433256263em 7px rgba(0, 109, 255, 0.9), 1.37931684em 0.2127884695em 7px rgba(188, 255, 0, 0.9), 0.321077219em -0.4515956158em 7px rgba(75, 0, 255, 0.9), -0.0343951294em 1.4577308478em 7px rgba(0, 66, 255, 0.9), 0.1848384183em 0.177167157em 7px rgba(0, 255, 255, 0.9), 0.4555090997em 0.4033173519em 7px rgba(0, 255, 241, 0.9), 1.5358136703em 0.3431043364em 7px rgba(255, 0, 174, 0.9), -0.0185232588em 0.715926053em 7px rgba(210, 0, 255, 0.9), -0.2785758772em 0.3989302913em 7px rgba(255, 0, 151, 0.9), 0.7500727484em -0.015251644em 7px rgba(0, 255, 60, 0.9), 1.9799263408em 0.139871977em 7px rgba(0, 255, 210, 0.9), 1.2139418823em 1.8113464774em 7px rgba(255, 0, 175, 0.9), 0.1527002085em -0.2292121317em 7px rgba(255, 133, 0, 0.9), 2.4221111425em -0.0184791898em 7px rgba(202, 0, 255, 0.9), 0.3415082582em 0.2077354376em 7px rgba(255, 220, 0, 0.9), -0.1472480205em 0.719504353em 7px rgba(104, 0, 255, 0.9), 0.8671210866em 0.1608640935em 7px rgba(255, 1, 0, 0.9), -0.078989348em 0.7761719139em 7px rgba(255, 135, 0, 0.9), 1.7867901531em 0.1670728661em 7px rgba(255, 0, 90, 0.9), 1.5279246788em 2.0319911921em 7px rgba(255, 0, 57, 0.9), 2.4807649183em 1.9298767254em 7px rgba(7, 255, 0, 0.9), 0.0409592539em 2.225530114em 7px rgba(255, 0, 184, 0.9), 0.4171367696em -0.1195806651em 7px rgba(218, 0, 255, 0.9);
    animation-duration: 42s;
    animation-delay: -23s;
}
head::after {
    text-shadow: 1.3521748019em 2.1563532417em 7px rgba(101, 0, 255, 0.9), -0.2605040185em -0.1821043349em 7px rgba(255, 0, 128, 0.9), 1.6283275842em -0.2497526562em 7px rgba(0, 255, 185, 0.9), 2.2225628625em 2.3405442589em 7px rgba(255, 122, 0, 0.9), 2.0024066694em 0.115619883em 7px rgba(0, 18, 255, 0.9), 0.2176924992em 2.2570696275em 7px rgba(149, 0, 255, 0.9), 0.1851760986em 2.0932336366em 7px rgba(255, 0, 18, 0.9), 0.3561827215em 1.4170137957em 7px rgba(255, 119, 0, 0.9), 0.3006683423em 0.8694812555em 7px rgba(255, 0, 71, 0.9), 0.4281669183em 1.8893834737em 7px rgba(148, 255, 0, 0.9), -0.2660295154em 1.8617071755em 7px rgba(0, 146, 255, 0.9), 0.0329450834em -0.450090981em 7px rgba(0, 255, 228, 0.9), 2.3611139822em 0.465603423em 7px rgba(138, 0, 255, 0.9), 2.2673146122em 0.7642675424em 7px rgba(0, 125, 255, 0.9), 0.2878097558em 0.3486801221em 7px rgba(77, 0, 255, 0.9), 1.7943123237em 0.9901398583em 7px rgba(58, 255, 0, 0.9), 0.4913664017em 1.6655789575em 7px rgba(234, 0, 255, 0.9), 0.0812759445em 1.1533019877em 7px rgba(255, 208, 0, 0.9), 0.9066608582em 1.8825134881em 7px rgba(255, 0, 63, 0.9), 1.3957505077em 0.0124276267em 7px rgba(61, 255, 0, 0.9), -0.2441700249em 1.9796512912em 7px rgba(0, 255, 166, 0.9), 2.0744047667em 0.8073826207em 7px rgba(0, 149, 255, 0.9), 1.7763551121em 1.7583089739em 7px rgba(0, 255, 242, 0.9), 2.0249101214em -0.1102387144em 7px rgba(255, 179, 0, 0.9), 1.2003358645em 0.8983228146em 7px rgba(255, 0, 55, 0.9), 0.134590167em 1.3740109342em 7px rgba(0, 131, 255, 0.9), 2.073315912em 0.3849179811em 7px rgba(0, 255, 48, 0.9), 0.5176419916em 0.0741823867em 7px rgba(206, 0, 255, 0.9), 1.6649579778em 2.0225502145em 7px rgba(255, 175, 0, 0.9), 0.6472239512em 0.8643882397em 7px rgba(0, 255, 164, 0.9), 1.1893520046em 0.6225709009em 7px rgba(0, 255, 77, 0.9), -0.028275221em 1.9132590996em 7px rgba(255, 0, 98, 0.9), 1.0048982976em 1.210997221em 7px rgba(149, 0, 255, 0.9), -0.2079477478em -0.0863629691em 7px rgba(0, 255, 133, 0.9), 0.2917337575em 0.7578102099em 7px rgba(32, 0, 255, 0.9), 0.0414771734em 1.834254364em 7px rgba(146, 255, 0, 0.9), 0.9448832878em 0.9003095117em 7px rgba(0, 176, 255, 0.9), 0.306528em 1.9781816377em 7px rgba(0, 255, 65, 0.9), 0.1004974252em 0.4936883558em 7px rgba(43, 255, 0, 0.9), 2.1638172776em 1.5079224196em 7px rgba(1, 0, 255, 0.9), 1.9893348821em 0.9048470389em 7px rgba(94, 0, 255, 0.9);
    animation-duration: 41s;
    animation-delay: -19s;
}
@keyframes move {
    from { transform: rotate(0deg) scale(12) translateX(-20px); }
    to { transform: rotate(360deg) scale(18) translateX(20px); }
}
`