swamp lights

��

mybb@mybb.ru (Sheol) — Tue, 28 Jan 2025 13:42:12 +0300

[hideprofile][html]
<style>
/* member group colors from athena codes' list here:
https://codepen.io/athenacodes/pen/ExMYXpg?editors=1000

member group icons from yuan's list here:
https://codepen.io/kingslayerr/pen/ZYzLXPx?editors=1000

big mcthankies <3 */

@font-face {
font-family: 'Distrela Extra Light';
src: url('https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Extra_Light.otf'); }
@font-face {
font-family: 'Distrela Light';
src: url('https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Light.otf'); }
@font-face {
font-family: 'Distrela';
src: url('https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Regular.otf'); }
@font-face {
font-family: 'Distrela Semibold';
src: url('https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Semi_Bold.otf'); }
@font-face {
font-family: 'Distrela Bold';
src: url('https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Bold.otf'); }
@font-face {
font-family: 'Distrela Extra Bold';
src: url('https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Extra_Bold.otf'); }

body { margin:0px;background-color:var(--bg1);scrollbar-width:thin;scrollbar-color:var(--accent) transparent;

--bg1: #e3e3e3;
--bgInverse: #595959;
--bgInverse2: #444;

--accent: #897666;

--title: 'Distrela', serif;
--titleL: 'Distrela Light', serif;
--titleEL: 'Distrela Extra Light', serif;
--titleSB: 'Distrela Semibold', serif;
--titleB: 'Distrela Bold', serif;
--titleEB: 'Distrela Extra Bold', serif;
--body: 'Noto Serif', serif;

--lightOutline: var(--bg1) 1px 0px 0px, var(--bg1) 0.540302px 0.841471px 0px, var(--bg1) -0.416147px 0.909297px 0px, var(--bg1) -0.989993px 0.14112px 0px, var(--bg1) -0.653644px -0.756803px 0px, var(--bg1) 0.283662px -0.958924px 0px, var(--bg1) 0.96017px -0.279416px 0px;
--darkOutline: var(--bgInverse) 1px 0px 0px, var(--bgInverse) 0.540302px 0.841471px 0px, var(--bgInverse) -0.416147px 0.909297px 0px, var(--bgInverse) -0.989993px 0.14112px 0px, var(--bgInverse) -0.653644px -0.756803px 0px, var(--bgInverse) 0.283662px -0.958924px 0px, var(--bgInverse) 0.96017px -0.279416px 0px;

--astorRender: url(https://i.ibb.co/PGYN9Fy/Viviiiii.png);
--astorBorder: url(https://i.ibb.co/GH0HwDj/Vivi2.png);
--astorIcon: url(--accent:#cc7670;);

}
body.darkmode {
--bg1: #222;
--bgInverse: #777;
--bgInverse2: #888;
--bgInverse3: #bbb;
}
.GID-hope { --accent: #ccb05a; }
.GID-fate { --accent:#986fa0; }
.GID-unity { --accent:#a17a7d; }
.GID-liberty { --accent:#a7acd9; }
.GID-fortune { --accent:#c77a5a; }
.GID-entropy { --accent:#829199; }
.GID-passion { --accent:#ba6a87; }
.GID-knowledge { --accent:#8faa90; }
.GID-vitality { --accent:#ab8476; }
.GID-destruction { --accent:#9a8c98; }
.GID-space { --accent:#a1b66f; }
.GID-time { --accent:#b6565d; }
.GID-order { --accent:#897666; }
.GID-unbound { --accent:#cc7670; }

.astor { padding:50px;padding:clamp(35px,5px,125px);color:var(--bgInverse);min-height:300px;min-width:1150px; }
.astor-border { position:fixed;top:0px;left:0px;right:0px;height:24px;z-index:100000000;background-color:var(--accent);border-bottom:solid 1px var(--bgInverse2);box-shadow:0px 2px 0px var(--bg1); }
.astor-border div {
mask-image: var(--astorBorder);
mask-size: 100% auto;
mask-position: center bottom;
-webkit-mask-image: var(--astorBorder);
-webkit-mask-size: 100% auto;
-webkit-mask-position: center bottom;
width:100%;height:24px; }
.astor-border div::before { content:'';display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%;background-color:var(--bgInverse2); }
.darkmode .astor-border { border-color:var(--bgInverse3); }
.darkmode .astor-border div::before { background-color:var(--bgInverse3); }

.astor-menu { position:fixed;z-index:1000000;top:clamp(35px,5vw,125px);margin-top:25px;right:clamp(35px,5vw,125px);border:solid 1px var(--bgInverse);background-color:var(--bg1);font:800 11px / 10px var(--body);text-transform:uppercase;letter-spacing:1px;outline:solid 2px var(--bg1);display:flex; }
.astor-menu-left { position:relative;padding:14px;box-shadow:1px 0px 0px var(--bgInverse);margin-right:1px;background: linear-gradient(-135deg,transparent 25%,var(--accent));background-size:400% 100%;background-position:75% 0%;outline:solid 2px var(--bg1);outline-offset:-2px;cursor:pointer;transition: color .5s; }
.astor-menu-left:hover { color:var(--accent); }
.astor-menu-left b { position:relative;z-index:1;text-shadow:var(--lightOutline); }
.astor-menu-right { display:flex;gap:7px;align-items:center;padding:1px 12px 0px 12px;font-size:13px; }
.astor-menu-right a { cursor:pointer;transition: color .5s;text-decoration:none;color:var(--bgInverse); }
.astor-menu-right a:hover { color:var(--accent); }

.astor-header { position:relative;height:350px; }
.astor-header::before { content:'';display:block;position:absolute;bottom:0px;left:550px;right:0px;border-bottom:solid 1px var(--bgInverse); }
.astor-render {
mask-image: var(--astorRender);
mask-size: auto 100%;
mask-repeat:no-repeat;
mask-position: top left;
-webkit-mask-image: var(--astorRender);
-webkit-mask-size: auto 100%;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position: top left;
height:1000px;width:700px;position:absolute;top:-300px;left:-75px;pointer-events:none; }
.astor-render::before { content:'';display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%;background-color:var(--bgInverse2); }

.astor-header input { display:none; }
.astor-header-label { position:absolute;outline:solid 2px var(--bg1);outline-offset:-3px;bottom:60px;right:0px;border:solid 1px var(--bgInverse);padding:13px 14px 15px 14px;font:16px / 10px var(--titleEB);letter-spacing:1.5px;cursor:pointer;background-color:var(--bg1);text-shadow:var(--lightOutline);background: linear-gradient(-135deg,transparent 25%,var(--accent));background-size:400% 100%;background-position:99% 0%;transition: background-position .5s, color .5s; }
.astor-header-label:hover, input:checked + label { background-position:75% 0%;color:var(--accent); }

.astor-name { font:175px / 175px var(--titleEB);position:absolute;left:465px;bottom:100px;opacity:0;text-shadow: var(--darkOutline);color:var(--bg1);transition: bottom .5s, opacity .5s;pointer-event:none; }
#astor-header-tab-1:checked ~ .astor-name { opacity:1;bottom:60px!important;pointer-event:auto; }
.astor-name::before { padding:50px 0px;content:'ora';display:block;position:absolute;bottom:-50px;background: linear-gradient(-135deg,transparent 50%,var(--accent));background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;background-size:300% 100%;background-position:100% 0%;transition: background-position .5s;-webkit-text-stroke: 3px #fff;text-stroke: 3px #fff;mix-blend-mode:multiply; }
.darkmode .astor-name::before { mix-blend-mode:lighten;-webkit-text-stroke: 3px #000;text-stroke: 3px #000; }
.astor-header:hover .astor-name::before { background-position:40% 0%; }
.astor-sub { font:21px / 15px var(--titleEB);text-transform:lowercase;letter-spacing:10.45px;position:absolute;bottom:240px;left:510px;opacity:0;white-space:nowrap;transition: bottom .5s, opacity .5s;pointer-event:none; }
#astor-header-tab-1:checked ~ .astor-sub { opacity:1;bottom:200px!important;pointer-event:auto; }

.astor-updates { position:absolute;left:525px;right:150px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;bottom:100px;font:13px / 20px var(--body);text-align:justify;letter-spacing:.25px;opacity:0;pointer-events:none;transition: bottom .5s, opacity .5s; }
#astor-header-tab-2:checked ~ .astor-updates { bottom:60px;opacity:1;pointer-events:auto; }
.astor-updates div { display:flex;flex-direction:column;gap:20px;justify-content:flex-end;transition: opacity .5s; }
.astor-updates div:nth-child(2) { opacity:.6; }
.astor-updates div:nth-child(3) { opacity:.35; }
.astor-updates div:hover { opacity:1!important; }
.astor-updates b:first-of-type { background: linear-gradient(-135deg,var(--bgInverse) 25%,var(--accent));background-size:400% 100%;background-position:40% 0%;max-width:fit-content;display:block;outline:solid 1px var(--bgInverse);outline-offset:1px;margin:2px;color:var(--bg1);padding:12px 12px 14px 15px;font:12px / 10px var(--titleEB);text-transform:uppercase;letter-spacing:3px; }
.astor-updates p { max-height:160px;overflow:auto;padding-right:20px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;margin:0px; }
@media (max-width: 1400px) {
.astor-updates { grid-template-columns:1fr 1fr; }
.astor-updates div:nth-child(3) { display:none!important; }
}

.astor-creds { top:25px;left:525px;right:150px;position:absolute;display:none; }
.astor-staff { display:flex;flex-wrap:wrap;gap:10px;margin-right:70px; }
.astor-staff a { display:block;border:solid 1px var(--bgInverse);padding:14px;background: linear-gradient(-135deg,var(--bg1) 25%,var(--accent));background-size:400% 100%;background-position:75% 0%;outline:solid 2px var(--bg1);outline-offset:-3px;cursor:pointer;font:800 11px / 10px var(--body);text-transform:uppercase;letter-spacing:1px;text-decoration:none;color:var(--bgInverse);display:flex;gap:3px;text-shadow:var(--lightOutline);transition: color .5s; }
.astor-staff a b, .astor-staff a:hover { color:var(--accent);transition: color .5s; }
.astor-staff a:hover b { color:var(--bgInverse); }

.astor-nav { margin-left:585px;display:flex;gap:10px;font:800 11px / 9px var(--body);text-transform:uppercase;margin-top:-11px;position:relative;letter-spacing:1px;white-space:nowrap; }
.astor-nav a { display:block;background-color:var(--bg1);font:800 11px / 9px var(--body);padding:5px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;position:relative;transition: color .5s; }
.astor-nav a::after { content:'';display:block;width:0%;height:1px;background-color:var(--bgInverse);position:absolute;bottom:-5px;transition: width .5s; }
.astor-nav a:hover::after { width:calc(100% - 21px); }
.astor-nav a:hover { color:var(--accent); }

.astor-cat-1 { margin:30px 15px 0px 10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px; }
.astor-guide { border-bottom:solid 1px var(--bgInverse);padding:0px 0px 60px 235px;grid-column:1 / 4;display:grid;grid-template-columns:auto auto;gap:35px;margin-right:-15px; }
.astor-guide-name { display:block;position:relative;text-decoration:none;font:86px / 86px var(--titleEB);color:var(--bgInverse);white-space:nowrap;text-transform:uppercase;text-align:right;width:100%;grid-column:2 / 3;grid-row:1 / 2; }
.astor-guide-name::before { content:'';display:none;height:1px;background-color:var(--bgInverse);flex-grow:1;margin:35px 0px 0px 0px; }
.astor-guide-name::after { content:'guidebook';display:block;position:absolute;z-index:1;top:0px;right:0px;background: linear-gradient(-135deg,transparent 50%,var(--accent));background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;background-size:300% 100%;background-position:100% 0%;transition: background-position .5s; }
.astor-guide:hover .astor-guide-name::after { background-position:30% 0%; }
.astor-guide-blurb { font:13px / 20px var(--body);text-align:justify;letter-spacing:.25px;margin-top:29px;max-height:60px;overflow:auto;grid-column:1 / 2;grid-row:1 / 2; }
.astor-guide-links { display:flex;gap:10px;grid-column:1 / 3; }
.astor-guide-links a { border:solid 1px var(--bgInverse);text-decoration:none;flex-grow:1;text-align:center;text-transform:uppercase;font:800 11px / 9px var(--body);padding:14px;letter-spacing:1px;color:var(--bgInverse);text-shadow:var(--lightOutline);outline:solid 2px var(--bg1);outline-offset:-3px;background: linear-gradient(-135deg,transparent 30%,var(--accent));background-size:400% 100%;background-position:99% 0%;transition: background-position .5s, color .5s; }
.astor-guide-links a:hover { background-position:65% 0%;color:var(--accent); }
@media (max-width: 1400px) {
.astor-guide { grid-template-columns:1fr; }
.astor-guide-name { grid-column:1 / 2;grid-row:1 / 2;letter-spacing:3px;display:flex;gap:30px;align-items:center; }
.astor-guide-name::before { display:block; }
.astor-guide-blurb { margin-top:-10px;grid-column:1 / 2;grid-row:2 / 3; }
.astor-guide-links { grid-column:1 / 2;margin-left:-235px; }
}

.astor-board1 { display:flex;flex-direction:column;gap:30px;border-left:solid 1px var(--bgInverse);padding-left:40px;position:relative; }
.astor-board1::before { content:'';display:block;top:0px;right:-15px;width:150px;height:150px;position:absolute;z-index:1;background:radial-gradient(circle at top right,var(--accent),transparent 70%);opacity:0;transition: opacity .5s;pointer-events:none; }
.astor-board1:hover::before { opacity:.35; }
.darkmode .astor-board1:hover::before { opacity:.1; }
.astor-board1-name { display:block;text-decoration:none;font:51px / 35px var(--titleEB);text-transform:uppercase;color:var(--bgInverse);margin-top:13px;position:relative;border-bottom:solid 1px var(--accent);padding-bottom:36px;word-spacing:100%; }
.astor-board1-name div { position:absolute;z-index:1;top:0px;left:0px;padding-bottom:20px;background: linear-gradient(-135deg,transparent 50%,var(--accent));background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;background-size:300% 100%;background-position:100% 0%;transition: background-position .5s; }
.astor-board1:hover .astor-board1-name div { background-position:30% 0%; }
.astor-board1-num { display:flex;gap:10px;margin:-41px 0px 0px 10px;position:relative;text-transform:uppercase;letter-spacing:2px; }
.astor-board1-num div { display:block;background-color:var(--bg1);font:800 11px / 9px var(--body);padding:5px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;position:relative;white-space:nowrap; }
.astor-board1-desc { font:13px / 20px var(--body);text-align:justify;letter-spacing:.25px;max-height:80px;overflow:auto;padding-right:20px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent; }
.astor-board1-recent { display:grid;grid-template-columns:56px auto;gap:20px;align-items:flex-start; }
.astor-board1-icon { padding:2px;border:solid 1px var(--bgInverse);background-color:var(--bgInverse);width:50px;height:50px;outline:solid 2px var(--bg1);outline-offset:-3px; }
.darkmode .astor-board1-icon { background-color:var(--bg1);mix-blend-mode:lighten; }
.astor-board1-icon1 { mix-blend-mode:lighten;background-color:var(--accent); }
.astor-board1-icon1 div { height:50px;width:50px;background-image:var(--astorBorder);background-size:cover;background-position:center;mix-blend-mode:multiply;filter:grayscale(100%); }
.astor-board1-recent1 { font:800 11px / 11px var(--body);text-transform:uppercase;letter-spacing:1px;align-self:center; }
.astor-board1-recent1 a { text-decoration:none;color:var(--bgInverse);background:linear-gradient(to right,var(--accent),var(--accent));background-position:0 100%;background-repeat:no-repeat;background-size:0% 1px;transition: background-size .5s;padding-bottom:2px; }
.astor-board1-recent1 a:hover { background-size:100% 1px; }
.astor-board1-recent1 a:first-of-type { color:var(--accent);display:block;font:21px / 15px var(--titleEB);margin:-5px 0px 6px 0px;letter-spacing:.5px;max-height:30px;padding-bottom:5px;background:none;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }

.astor-board1.astor-bulletin { padding-left:0px;border-left:0px; }
.astor-event { border:solid 1px var(--bgInverse2);outline:solid 2px var(--bg1);outline-offset:-3px;height:95px;background-color:var(--bgInverse2);display:block;cursor:pointer;position:relative;z-index:1;margin:15px 0px -32px 0px; }
.darkmode .astor-event { mix-blend-mode:lighten;background-color:var(--bg1); }
.astor-event1 { background-color:var(--accent);mix-blend-mode:lighten;position:absolute;top:2px;right:2px;bottom:2px;left:2px; }
.astor-event1 div { background-image:var(--astorBorder);background-size:cover;background-position:center;mix-blend-mode:multiply;filter:grayscale(100%);position:absolute;height:100%;width:100%; }
</style>

<div id="top"></div>
<div class="astor GID-destruction">
<div class="astor-border"><div></div></div>
<div class="astor-menu">
<div class="astor-menu-left"><b>full menu</b></div>
<div class="astor-menu-right">
<a href="#top"><i class="iconsax" icon-name="arrow-up-circle"></i></a>
<a id="darkmode"><i class="iconsax" icon-name="sun"></i></a>
<a href="#bot"><i class="iconsax" icon-name="arrow-down-circle"></i></a>
</div>
</div>
<div class="astor-header">
<input type="radio" id="astor-header-tab-1" name="astor-header-tabs" checked="true">
<label for="astor-header-tab-1" class="astor-header-label" style="margin-bottom:100px;">landing</label>
<input type="radio" id="astor-header-tab-2" name="astor-header-tabs">
<label for="astor-header-tab-2" class="astor-header-label" style="margin-bottom:50px;">updating</label>
<input type="radio" id="astor-header-tab-3" name="astor-header-tabs">
<label for="astor-header-tab-3" class="astor-header-label">credits</label>

<div class="astor-render"></div>
<div class="astor-sub">an apocalyptic fantasy rp</div>
<div class="astor-name">ora</div>

<div class="astor-updates">
<div><b>month 00</b><p>
One last cue from love true to final adieu. Hearts will break for future's sake, but mine just won't take. Can't love if you don't, I can't try if you won't. Oh, I know. Please just let me go, my dear, 'cause I'd stay near and lose myself here.
</p></div>
<div><b>month 00</b><p>
Astoria, I'm warnin' ya', I'm comin' for, comin' for ya'. It's do or die for you and I, and I'll never be taken alive. Here's everything that's led me here, but our future still remains unclear. High time I face you, Astoria. So get up and face me, Astoria. Come and face the music, Astoria. About time now, Astoria. I'm wasting away here, Astoria. Goodbye, Astoria.
</p></div>
<div><b>month 00</b><p>
I'm so afraid of trying something new, 'cause every start begins with saying goodbye to you.
</p></div>
</div>

<div class="astor-creds">
<div class="astor-staff">
<a href="#"><b>admin</b>alias</a>
<a href="#"><b>admin</b>alias</a>
<a href="#"><b>admin</b>alias</a>
<a href="#"><b>admin</b>alias</a>
</div>
</div>
</div>
<div class="astor-nav">
<a>astoria</a>
<a>it's do or die for you and i</a>
<a>but i'll never be taken alive</a>
</div>
<div class="astor-cat-1">
<div class="astor-guide">
<a href="#" class="astor-guide-name">guidebook</a>
<div class="astor-guide-blurb"><div>One last cue from love true to final adieu. Hearts will break for future's sake, but mine just won't take. Can't love if you don't, I can't try if you won't. Oh, I know. Please just let me go, my dear, 'cause I'd stay near and lose myself here.</div></div>
<div class="astor-guide-links">
<a href="#">guidelines</a>
<a href="#">premise</a>
<a href="#">setting</a>
<a href="#">member groups</a>
<a href="#">faq</a>
<a href="#">credits</a>
</div>
</div>
<div class="astor-board1 astor-bulletin GID-time">
<a href="#" class="astor-event"><div class="astor-event1"><div></div></div></a>
<a href="#" class="astor-board1-name"><div>bulletin board</div>bulletin board</a>
<div class="astor-board1-num">
<div>000 topics</div>
<div>000 replies</div></div>
<div class="astor-board1-recent">
<div class="astor-board1-icon"><div class="astor-board1-icon1"><div></div></div></div>
<div class="astor-board1-recent1">
<a href="#">a really, really long thread title can go here or whatever</a>
written by <a href="#">first lastname</a></div>
</div>
</div>
<div class="astor-board1 GID-entropy">
<a href="#" class="astor-board1-name"><div>member services</div>member services</a>
<div class="astor-board1-num">
<div>000 topics</div>
<div>000 replies</div></div>
<div class="astor-board1-desc">
One last cue from love true to final adieu. Hearts will break for future's sake, but mine just won't take. Can't love if you don't, I can't try if you won't. Oh, I know. Please just let me go, my dear, 'cause I'd stay near and lose myself here.
</div>
<div class="astor-board1-recent">
<div class="astor-board1-icon"><div class="astor-board1-icon1"><div></div></div></div>
<div class="astor-board1-recent1">
<a href="#">a really, really long thread title can go here or whatever</a>
written by <a href="#">first lastname</a></div>
</div>
don't forget the sub-boards, you dingus
</div>
<div class="astor-board1">meow</div>
</div>

<div id="bot"></div>

��

mybb@mybb.ru (Sheol) — Wed, 26 Jun 2024 15:33:07 +0300

��

mybb@mybb.ru (��) — Fri, 23 Dec 2022 12:22:53 +0300

��

mybb@mybb.ru (Sheol) — Fri, 08 Jan 2021 00:17:22 +0300

[hideprofile][html]
<style>
@import url('https://forumstatic.ru/files/001a/d9/23/19268.ttf?family=EnglishRose&display=swap');

.punbb {
margin-left: 0px !important; }

.wrapper {
margin: auto auto;
width: 90%;
height: auto;
background-color: #3a3a3a;
margin-top: 25px;
}

.content {
background-color: transparent;
font-size: 1.5em;
width: 95%;
margin: auto auto;
padding: 5px 10px 5px 10px;
color: #CCC;
font-family: 'Old Standard TT', serif;
}
.heading {
text-align: center;
font-size: 5em;
color: #fff;
font-family: 'English Rose';
margin-bottom: -90px;
text-shadow: 5px 5px 1px #000;
}
#icon {
width: 100%;
height: 120px;
float: none;
margin-top: -3px;
background-color: #111;
border-radius: 10px;
align-items: center;
}
#icon .face {
margin: 5px 10px 5px 5px;
border: 5px outset #000;
border-radius: 10px;
width: 96%;
height: 100px;
align-items: center;
background-image: url(https://data.whicdn.com/images/66408641/original.gif)
}
</style>

</div>
</div>

</div>

</body>

[/html]

��

mybb@mybb.ru (Sheol) — Thu, 10 Dec 2020 19:32:22 +0300

[html]
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
<script>
const cycleDuration = 60 * 4; // time it takes for an orb pair to complete half an orbit

setTimeout(() => {
const canvasEl = document.getElementById('js-canvas');
const {width, height} = canvasEl;
const canvasCtx = canvasEl.getContext('2d');
const interpolator = createInterpolator(0, Math.PI, 1); // only does a half circle because the orb pairs shouldn't immediately swap back
const numberOfOrbs = 12; // number of orb pairs
animate(0, canvasCtx, width, height, interpolator, numberOfOrbs);
}, 0);

function animate (iteration, ctx, width, height, interpolator, count) {
ctx.clearRect(0, 0, width, height);
renderCollection(iteration, ctx, width, height, interpolator, count);
requestAnimationFrame(() => {
animate(iteration + 1, ctx, width, height, interpolator, count);
});
}

function renderCollection (iteration, ctx, width, height, interpolator, count) {
const radius = ((Math.min(width, height) - 20) / 2) * 0.65; // just to add some margin, so orbs don't go off screen during orbit
const stepSize = (Math.PI * 2) / count;
const x = width / 2;
const y = height / 2;
Array(...Array(count)).forEach((_, index) => {
const pairHeading = index * stepSize;
const pairX = x + Math.cos(pairHeading) * radius;
const pairY = y + Math.sin(pairHeading) * radius;
const offset = index * (cycleDuration / count); // staggers the start time of the orbits, this is why everything doesn't orbit in unison
const t = Math.max(0, Math.min(1, ((iteration + cycleDuration - offset) % cycleDuration) / (cycleDuration / 3))); // where the magic happens
renderOrbPair(ctx, pairX, pairY, radius * 0.4266, 12, width, height, interpolator, pairHeading, t); // 0.4266 is a magic number that interlaces the orb pairs
});
}

[/html]

�� 08,07

mybb@mybb.ru (Sheol) — Thu, 16 Jul 2020 03:10:53 +0300

#pun-index .tclcon >div b {display: inline-block;
}

#pun-index .tclcon >div center {margin-top: 5px;
background: #c1c1bc;
font-size: 8px;
padding: 2px 0;
font-family: lora;
text-transform: uppercase;
height: 10px;
line-height: 9px}

#pun-index .tclcon >div center a {font-weight: bold;}

��

mybb@mybb.ru (Sheol) — Sat, 04 Jul 2020 17:20:24 +0300

</map>

swamp lights

����

��������

��������

����������

�������� ���������

��� ���� 08,07

�����

��

��

��

��

��

�� 08,07

��