Javascript warp speed gradients

Joined
Nov 27, 2024
Messages
1
Reaction score
0
I've been working on a star trek TNG warp field Javascript file. So far, all of the star streaks are white. I'd like to color some of the stars with a rainbow gradient. Is it possible to do using just Javascript?
 
Joined
Jul 4, 2023
Messages
499
Reaction score
62
;)
HTML:
<div id='stars1'></div>
<div id='stars2'></div>
<div id='stars3'></div>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: auto;
  }
  #stars1,
  #stars2,
  #stars3 {
    border-radius: 50%;
    background: transparent;
  }
  #stars1 {
    width: 1px;
    height: 1px; 
    box-shadow: 1117px 1729px white, 79px 222px white, 721px 1130px white, 1769px 249px white, 1877px 1066px white, 1367px 428px white, 349px 1875px white, 1822px 579px white, 72px 1374px white, 1652px 1828px white, 1029px 897px white, 32px 1827px white, 1035px 529px white, 576px 244px white, 1436px 733px white, 1214px 578px white, 1253px 822px white, 65px 715px white, 172px 559px white, 1844px 164px white, 1504px 892px white, 331px 1387px white, 1051px 431px white, 1470px 1171px white, 713px 1592px white, 1019px 1294px white, 889px 1184px white, 436px 715px white, 1392px 786px white, 1157px 1489px white, 430px 1732px white, 130px 856px white, 82px 1527px white, 1330px 1932px white, 1538px 670px white, 858px 1632px white, 1873px 674px white, 706px 1530px white, 18px 662px white, 1631px 506px white, 1449px 594px white, 1530px 799px white, 1868px 590px white, 1170px 1701px white, 867px 577px white, 1484px 104px white, 654px 1315px white, 1299px 239px white, 1553px 1160px white, 762px 93px white, 410px 1159px white, 375px 1956px white, 96px 855px white, 740px 1722px white, 1418px 872px white, 1160px 114px white, 990px 1940px white, 134px 1005px white, 426px 1673px white, 216px 881px white, 1270px 510px white, 355px 807px white, 1411px 317px white, 357px 333px white, 310px 697px white, 1076px 1511px white, 194px 254px white, 661px 981px white, 853px 1323px white, 725px 1686px white, 7px 1660px white, 791px 1014px white, 797px 1940px white, 272px 353px white, 1164px 954px white, 777px 704px white, 1057px 902px white, 1224px 845px white, 703px 1756px white, 1158px 924px white, 970px 1773px white, 718px 281px white, 173px 733px white, 1265px 1149px white, 347px 971px white, 22px 1646px white, 52px 1272px white, 1139px 1916px white, 1455px 444px white, 1903px 923px white, 585px 654px white, 1416px 505px white, 1112px 1480px white, 292px 170px white, 337px 1088px white, 1616px 1440px white, 1852px 112px white, 1205px 175px white, 848px 1018px white, 576px 1263px white, 401px 619px white, 696px 240px white, 592px 643px white, 310px 1971px white, 1414px 1527px white, 893px 1343px white, 1768px 586px white, 731px 417px white, 136px 563px white, 817px 434px white, 760px 396px white, 14px 1684px white, 723px 409px white, 1197px 1456px white, 389px 630px white, 592px 1998px white, 319px 444px white, 835px 1420px white, 1209px 1136px white, 1361px 541px white, 587px 123px white, 1521px 426px white, 666px 217px white, 349px 1344px white, 448px 1128px white, 571px 1974px white, 1901px 1300px white, 1164px 1238px white, 1551px 782px white, 1742px 1880px white, 1503px 443px white, 1822px 469px white, 1350px 226px white, 769px 1173px white, 891px 366px white, 963px 1912px white, 569px 1106px white, 1799px 794px white, 561px 1509px white, 1261px 1727px white, 851px 1990px white, 566px 896px white, 552px 244px white, 1845px 1054px white, 852px 1886px white, 692px 922px white, 694px 1166px white, 1093px 1151px white, 819px 1267px white, 1164px 955px white, 67px 1771px white, 59px 1790px white, 1202px 1164px white, 1494px 1528px white, 442px 1434px white, 1474px 50px white, 994px 1437px white, 1425px 277px white, 479px 738px white, 1001px 273px white, 217px 1718px white, 130px 278px white, 325px 757px white, 71px 773px white, 1894px 89px white, 208px 1030px white, 469px 1008px white, 463px 1135px white, 509px 1160px white, 1677px 1325px white, 58px 594px white, 1382px 1518px white, 563px 80px white, 103px 882px white, 1052px 1921px white, 1392px 851px white, 1274px 526px white, 280px 1309px white, 1825px 1211px white, 487px 1825px white, 1481px 1715px white, 110px 894px white, 875px 1596px white, 1892px 1253px white, 989px 513px white, 794px 1431px white, 617px 331px white, 877px 1493px white, 1083px 1458px white, 567px 756px white, 823px 1621px white, 1366px 713px white, 578px 125px white, 735px 1758px white, 1574px 898px white, 1665px 1527px white, 731px 779px white, 384px 454px white, 91px 1130px white, 1794px 908px white, 1302px 249px white, 245px 394px white, 909px 737px white, 1644px 45px white, 481px 1180px white, 1755px 884px white, 1023px 985px white, 650px 808px white, 1368px 229px white, 1025px 1129px white, 1109px 1894px white, 1501px 379px white, 1720px 471px white, 864px 748px white, 874px 1691px white, 208px 1603px white, 1750px 1703px white, 822px 387px white, 1327px 88px white, 490px 1659px white, 1795px 1239px white, 213px 1305px white, 637px 1619px white, 1600px 966px white, 1559px 534px white, 150px 143px white, 121px 1422px white, 1403px 238px white, 614px 1770px white, 1195px 625px white, 1134px 279px white, 1493px 325px white, 312px 676px white, 117px 1905px white, 1732px 1156px white, 88px 838px white, 847px 1482px white, 414px 905px white, 1006px 367px white, 557px 1939px white, 979px 1513px white, 1917px 1850px white, 1889px 959px white, 48px 410px white, 1530px 441px white, 398px 1227px white, 1611px 1939px white, 607px 440px white, 1263px 124px white, 303px 1476px white, 1666px 219px white, 1740px 1464px white, 368px 1832px white, 290px 160px white, 932px 1727px white, 1806px 1328px white, 970px 446px white, 781px 1906px white, 348px 202px white, 1974px 1304px white, 1654px 689px white, 1934px 1382px white, 1363px 102px white, 1724px 981px white, 1556px 965px white, 1458px 1220px white, 74px 760px white, 595px 607px white, 1629px 1279px white, 1286px 1159px white, 794px 587px white, 892px 1933px white, 1019px 312px white, 1197px 714px white, 968px 749px white, 1374px 1189px white, 1016px 1507px white, 340px 1259px white, 483px 1730px white, 1468px 1866px white, 1209px 1607px white, 1387px 470px white, 94px 1686px white, 493px 1559px white, 678px 91px white, 1863px 1351px white, 1792px 6px white, 1536px 1264px white, 1835px 923px white, 355px 1750px white, 1112px 738px white, 1626px 1245px white, 1347px 1196px white, 850px 599px white, 236px 262px white, 1593px 994px white, 1322px 1485px white, 1803px 16px white, 1903px 846px white, 1067px 687px white, 1437px 98px white, 1887px 1909px white, 1906px 263px white, 790px 1904px white, 527px 1409px white, 1898px 132px white, 1335px 62px white, 347px 855px white, 971px 5px white, 10px 1418px white, 45px 1391px white, 949px 708px white, 437px 1516px white, 294px 1668px white, 1393px 4px white, 217px 1939px white, 1575px 1066px white, 710px 872px white, 1758px 1392px white, 1768px 801px white, 1926px 562px white, 418px 1358px white, 1555px 1224px white, 793px 136px white, 1435px 1872px white, 346px 129px white, 428px 1462px white, 313px 1933px white, 925px 913px white, 963px 1063px white, 1433px 1243px white, 780px 1317px white, 1321px 1961px white, 606px 316px white, 1058px 1978px white, 1961px 1604px white, 1751px 943px white, 1228px 1763px white, 1614px 555px white, 1954px 190px white, 124px 1636px white, 930px 1576px white, 777px 321px white, 198px 786px white, 1440px 967px white, 231px 40px white, 1828px 1035px white, 498px 1161px white, 1822px 1315px white, 1504px 884px white, 827px 10px white, 1293px 1797px white, 1302px 931px white, 163px 10px white, 1159px 917px white, 905px 1385px white, 717px 134px white, 1158px 1056px white, 1590px 808px white, 84px 1499px white, 1288px 316px white, 1525px 133px white, 1763px 660px white, 1120px 788px white, 1407px 1961px white, 1260px 1085px white, 1644px 1701px white, 514px 848px white, 44px 1776px white, 912px 198px white, 989px 480px white, 1730px 1693px white, 306px 1159px white, 1055px 627px white, 962px 553px white, 1602px 819px white, 443px 1454px white, 247px 1805px white, 1351px 1598px white, 556px 934px white, 444px 1537px white, 673px 1817px white, 1039px 1576px white, 399px 920px white, 672px 1628px white, 657px 661px white, 470px 1796px white, 1733px 1056px white, 1002px 347px white, 924px 1698px white, 211px 1430px white, 6px 987px white, 1749px 1595px white, 428px 609px white, 1410px 1484px white, 1981px 1447px white, 276px 271px white, 1490px 1521px white, 277px 835px white, 924px 1750px white, 17px 1272px white, 553px 262px white, 1267px 1779px white, 1653px 1810px white, 1507px 1528px white, 1170px 991px white, 998px 1198px white, 963px 163px white, 1695px 1963px white, 1555px 119px white, 1255px 1461px white, 1043px 1311px white, 241px 1221px white, 777px 1667px white, 1937px 1979px white, 1057px 553px white, 1033px 1263px white, 616px 1907px white, 328px 221px white, 1862px 1549px white, 569px 935px white, 1084px 1381px white, 276px 1347px white, 1105px 772px white, 1819px 1684px white, 1078px 1662px white, 1077px 1950px white, 228px 272px white, 597px 1543px white, 1436px 590px white, 549px 437px white, 1034px 132px white, 1565px 351px white, 1928px 615px white, 1960px 1201px white, 962px 603px white, 86px 903px white, 406px 437px white, 94px 1669px white, 1642px 243px white, 1480px 754px white, 864px 880px white, 590px 1469px white, 313px 1468px white, 811px 1508px white, 402px 533px white, 423px 405px white, 1444px 1175px white, 1530px 976px white, 1312px 1996px white, 876px 1914px white, 1145px 1497px white, 684px 1334px white, 1716px 162px white, 1537px 1767px white, 1896px 1091px white, 1047px 895px white, 137px 131px white, 1558px 1077px white, 285px 437px white, 697px 1583px white, 1435px 757px white, 1560px 1185px white, 582px 1794px white, 1510px 769px white, 488px 1739px white, 508px 1073px white, 106px 276px white, 1647px 334px white, 1735px 472px white, 1599px 1092px white, 1184px 45px white, 351px 179px white, 1631px 97px white, 1983px 445px white, 1599px 34px white, 1140px 1388px white, 878px 1328px white, 21px 1027px white, 1966px 1185px white, 1818px 1159px white, 1248px 1396px white, 1364px 860px white, 39px 880px white, 1164px 1351px white, 947px 1441px white, 96px 1679px white, 1602px 1185px white, 1002px 1712px white, 380px 1277px white, 1219px 595px white, 1001px 98px white, 576px 164px white, 569px 229px white, 1631px 1148px white, 1966px 402px white, 1008px 1993px white, 1773px 171px white, 1044px 1279px white, 1485px 1675px white, 1052px 740px white, 1743px 861px white, 1863px 162px white, 980px 1747px white, 1085px 177px white, 556px 1426px white, 1443px 692px white, 331px 1685px white, 294px 1974px white, 365px 504px white, 1146px 1670px white, 770px 1696px white, 1526px 969px white, 365px 289px white, 1234px 427px white, 1916px 1426px white, 27px 848px white, 1729px 458px white, 1415px 1054px white, 962px 1327px white, 1985px 1100px white, 110px 1422px white, 29px 361px white, 1025px 1624px white, 773px 629px white, 1642px 786px white, 1205px 609px white, 1099px 1099px white, 31px 147px white, 652px 1935px white, 397px 357px white, 966px 1016px white, 266px 1427px white, 847px 1163px white, 373px 1330px white, 478px 1022px white, 695px 1008px white, 1748px 1122px white, 1459px 21px white, 1882px 346px white, 1590px 284px white, 1817px 1106px white, 1469px 584px white, 1558px 1000px white, 1405px 884px white, 753px 1851px white, 1639px 218px white, 1819px 671px white, 569px 877px white, 1663px 1793px white, 525px 1254px white, 1768px 873px white, 639px 1633px white, 111px 1130px white, 336px 1768px white, 1333px 1734px white, 1992px 1991px white, 552px 323px white, 109px 1983px white, 443px 199px white, 1297px 1906px white, 285px 1344px white, 1140px 704px white, 340px 228px white, 1714px 1358px white, 1810px 108px white, 1463px 1262px white, 146px 1750px white, 610px 302px white, 1378px 441px white, 1492px 422px white, 1041px 1773px white, 1760px 1928px white, 1987px 385px white, 1468px 64px white, 1845px 1996px white, 974px 1856px white, 1349px 1589px white, 805px 1106px white, 1097px 1248px white, 653px 852px white, 1925px 596px white, 1848px 1974px white, 238px 1670px white, 936px 1313px white, 1362px 1079px white, 1046px 818px white, 1580px 72px white, 451px 1857px white, 1547px 1924px white, 672px 298px white, 526px 1071px white, 1367px 1845px white, 592px 1877px white, 1476px 1209px white, 805px 1696px white, 1718px 1772px white, 30px 1729px white, 767px 365px white, 316px 403px white, 1461px 365px white, 1125px 1183px white, 1892px 976px white, 555px 1083px white, 451px 1350px white, 1459px 865px white, 656px 546px white, 125px 1370px white, 565px 568px white, 1462px 818px white, 522px 1504px white, 113px 1707px white, 1828px 576px white, 886px 1402px white, 1229px 1262px white, 1281px 713px white, 589px 829px white, 520px 1922px white, 1839px 349px white, 1159px 541px white, 1903px 475px white, 8px 1807px white, 1527px 79px white, 830px 1000px white, 95px 485px white, 554px 430px white, 1698px 850px white, 730px 17px white, 783px 88px white, 1545px 573px white, 1123px 942px white, 1676px 29px white, 1178px 1125px white, 595px 1530px white, 221px 1448px white, 941px 1267px white, 197px 185px white, 133px 565px white, 1195px 85px white, 1507px 1901px white, 113px 544px white, 319px 316px white, 310px 342px white, 436px 290px white, 1649px 1314px white, 1449px 1513px white, 1857px 462px white, 1680px 84px white, 1375px 1127px white, 177px 1865px white, 840px 1876px white, 91px 1369px white, 308px 42px white, 1037px 774px white, 1933px 1587px white, 921px 405px white, 1089px 1942px white, 400px 241px white, 577px 193px white, 647px 196px white, 757px 615px white, 1254px 993px white, 611px 1115px white, 349px 1327px white, 574px 1653px white, 1873px 746px white, 403px 1128px white, 1035px 538px white, 106px 1008px white, 972px 1598px white, 1725px 128px white, 1771px 374px white, 630px 811px white, 800px 1908px white, 30px 737px white, 210px 645px white, 1528px 470px white, 377px 1522px white, 1738px 856px white, 698px 1324px white, 229px 1746px white, 1018px 1777px white, 222px 980px white, 847px 1458px white, 59px 1515px white, 1460px 403px white, 1361px 78px white, 1189px 1407px white, 1707px 1253px white, 1878px 1110px white, 1171px 1349px white, 845px 995px white, 166px 424px white, 1474px 741px white, 1366px 1501px white, 1508px 1971px white, 1388px 1728px white, 1229px 780px white, 701px 1321px white, 140px 705px white;
  }

  #stars2 {
    width: 4px;
    height: 4px;
    box-shadow:
      1084px 258px red, 1783px 1038px orange, 1145px 306px yellow, 759px 1328px green, 1726px 1101px blue,
      659px 837px indigo, 1491px 384px violet, 1027px 762px red, 1224px 498px orange, 1950px 1028px yellow,
      388px 1686px green, 1155px 162px blue, 1473px 1797px indigo, 570px 1682px violet, 476px 913px red,
      272px 1019px orange, 1687px 1576px yellow, 1523px 1074px green, 1543px 1657px blue, 1896px 1881px indigo,
      44px 580px white, 99px 1220px red, 325px 696px orange, 384px 1245px yellow, 1984px 19px green,
      278px 1258px blue, 178px 866px indigo, 71px 767px violet, 1822px 1967px red, 1451px 315px orange,
      1527px 997px yellow, 1699px 933px green, 1929px 62px blue, 339px 79px indigo, 1277px 965px violet,
      1826px 827px red, 1868px 353px orange, 215px 117px yellow, 1410px 829px green, 1026px 15px blue,
      376px 1957px indigo, 610px 675px violet, 556px 594px white, 138px 315px red, 526px 1268px orange,
      1421px 205px yellow, 1432px 537px green, 1523px 1870px blue, 1774px 1270px indigo, 212px 148px violet,
      1892px 563px red, 10px 1028px orange, 833px 1619px yellow, 1613px 1525px green, 1078px 243px blue,
      1612px 1637px indigo, 1120px 574px violet, 1419px 1655px red, 1477px 1402px orange, 889px 1856px yellow,
      1459px 1414px green, 1508px 96px blue, 62px 1765px indigo, 1193px 210px violet, 605px 431px white,
      374px 233px red, 490px 1362px orange, 767px 880px yellow, 1637px 517px green, 226px 1715px blue,
      1676px 933px indigo, 118px 1901px violet, 907px 95px red, 411px 1951px orange, 885px 246px yellow,
      793px 1521px green, 1209px 210px blue, 130px 1013px indigo, 386px 1413px violet, 1414px 1969px red,
      542px 1182px orange, 556px 94px yellow, 811px 909px green, 1813px 1392px blue, 423px 1138px indigo,
      1311px 610px violet, 1971px 76px red, 644px 350px orange, 153px 20px yellow, 1551px 1525px green,
      1129px 427px blue, 779px 837px indigo, 642px 51px violet, 1601px 448px red, 1559px 670px orange,
      109px 1195px yellow, 1798px 924px green, 236px 255px blue, 414px 53px indigo, 1476px 721px violet,
      1377px 1276px red, 60px 1313px orange, 447px 1733px yellow, 1359px 1139px green, 1250px 132px blue,
      1461px 103px indigo, 1501px 1701px violet, 144px 1682px red, 1591px 489px orange, 1250px 207px yellow,
      989px 583px green, 2px 1053px blue, 1392px 1543px indigo, 805px 644px violet, 1156px 417px white;
    animation: animation-star 30s linear infinite;
  }

  #stars3 {
    width: 8px;
    height: 8px;
    box-shadow:
      775px 1086px red, 84px 663px orange, 1188px 1454px yellow, 752px 1281px green, 481px 1000px blue,
      1272px 709px indigo, 683px 907px violet, 1421px 1239px white, 1881px 398px red, 999px 195px orange,
      102px 1966px yellow, 539px 1174px green, 1996px 1245px blue, 1089px 1720px indigo, 748px 572px violet,
      496px 1327px white, 1339px 550px red, 1683px 1595px orange, 1769px 819px yellow, 1634px 1254px green,
      1439px 69px blue, 1031px 626px indigo, 1710px 275px violet, 1911px 641px white, 1720px 626px red,
      451px 1142px orange, 479px 978px yellow, 91px 27px green, 437px 1340px blue, 1085px 404px indigo,
      1670px 764px violet, 585px 243px red, 115px 1099px white, 727px 97px orange, 1368px 1354px yellow,
      1212px 325px green, 428px 686px blue, 1440px 569px indigo, 221px 1125px violet, 1015px 97px red,
      1014px 736px orange, 1022px 1360px yellow, 428px 683px green, 1449px 1437px blue, 1192px 1060px indigo,
      69px 34px violet, 1274px 1203px red, 939px 1483px white, 673px 1248px orange, 1620px 1469px yellow,
      1966px 1977px green, 842px 1115px blue, 1275px 1846px indigo, 1347px 772px violet, 805px 672px red;
    animation: animation-star 50s linear infinite;
  }

  @keyframes animation-star {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-2000px);
    }
  }
</style>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
474,029
Messages
2,570,347
Members
46,984
Latest member
michelwilson

Latest Threads

Top