故障元素 组件
2025年9月28日
修订 1
核心指标
评分
9
↑ 10
↓ 1
支持率
91%
总票数 11
Wilson 95% 下界
62.3%
在相同票数下更稳健的支持率估计
争议指数
0.331
评分趋势
加载图表中...
最近修订
1 / 1
修改标签
1 个月前
已新增标签：组件。
创建页面
1 个月前
最近投票
1 / 2
2025-10-30
2025-10-26
2025-10-24
2025-09-29
2025-09-29
2025-09-28
2025-09-28
2025-09-28
2025-09-28
2025-09-28
页面源码
源码字符数 37953文字字数 6015
[[iftags +组件]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");
[[/module]]
[[=]]
[[span class="style03-plaintext animation03" style="--content: '梗概'; font-size: 2rem;"]]梗概[[/span]]
@@@@
@@@@
[[size 160%]][[footnote]]**译注：**
尽管此组件对中文字符同样生效，我建议你将其应用于英文字符。
不过当然了，我也没怎么试过，说不定某些时候效果还更好，用不用看你心意
d(^_^o)
祝使用愉快～[[/footnote]][[/size]]
[[/=]]
该组件由5个不同的元素组成，这些元素可以并排使用，以获得非常酷的效果：
* 纯文本元素 ([[span class="style05-plaintext"]]允许比wikidot格式更复杂的风格化[[/span]])
* 一个“故障文本”元素，可以像纯文本元素一样应用文本样式和[[span class="style01-plaintext animation01" style="--content: '动画！';"]]动画！[[/span]]
* 故障文本可以附加一个链接，这样当读者点击它时，它会跳转到某个地方 (为了[[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]][[span class="style03-plaintext animation03" style="--content: '秘密';"]]秘密[[/span]][[/a]])
* 一个动画div元素 (下文解释了为什么只有一个)
[[=]]
[[collapsible show="看点超级酷的东西" hide="隐藏掉超级酷的东西"]]
[[<]]
[[=]]
[[span class="style01-plaintext animation01" style="--content: "我们于黑暗中死去";"]]我们于黑暗中死去[[/span]]
[[span class="style02-plaintext animation02" style="--content: "让你们在光明中存活";"]]让你们在光明中存活[[/span]]
[[span class="style03-plaintext animation03" style="--content: "**那是收容失效警报吗？**";"]]**那是收容失效警报吗？**[[/span]]
[[span class="style04-plaintext animation04" style="--content: "别在意";"]]别在意[[/span]]
[[span class="style05-plaintext animation05" style="--content: "只是微波炉";"]]只是微波炉[[/span]]
[[/=]]
------
[[=]]
[[div class="style05-plaintext animation05" style="--style05-glitch-size: 1rem; padding-left: 5.0ch; padding-right: 5.0ch;"]]
我们这儿有什么？这很有趣......
我能想象到这个的用法。再配合一些有趣的风格化，比如 太 多 空格，就就是是为为了了 让它看**起**、来**更** ggg-ūū-zhànn--gg！
[[/div]]
[[/=]]
[[/<]]
[[/collapsible]]
[[/=]]
------
++++ 第 1 步 - 引用：
[[div class="blockquote"]]
@@[[include :scp-wiki-cn:component:glitch-elements]]@@
[[/div]]
这就是将此组件中的所有相关代码添加到您的页面的东西。如果你不添加这个，什么都不会奏效。
最好把这个include放在任何会改变页面内容的主题或组件（比如 “croqstyle”）的include**之后**。
++++ 第 2 步 - 一个基本Span：
这个组件本身并没有所谓的独立元素，它实际上只是一些预设好的样式和动画的集合，可以应用到 HTML 对象上（主要是span元素）。像这样：
[[div class="blockquote"]]
++++++ 示例：
@@[[span class="style03-plaintext animation03" style="--content: "我们于黑暗中死去";"]]我们于黑暗中死去[[/span]]@@
++++++ 结果：
[[span class="style03-plaintext animation03" style="--content: "我们于黑暗中死去";"]]我们于黑暗中死去[[/span]]
++++++ 模版：
@@[[span class="@@**{style-class}** **{animation-class}**@@" style="--content: "@@**{Text Content}**@@";"]]@@**{Text Content}**@@[[/span]]@@
[[/div]]
你会注意到上面模板中加粗的部分；这些就是你在几乎每一个使用该组件的span时都会遇到的主要字段：
* "**{style-class}**" 是决定字体颜色、大小等的东西。
* "**{animation-class}**" 不言自明，它将动画应用于元素上。
* 有两个版本的动画类别 - "animation0#" 一直播放动画，而 "animation0#-hover" 仅当光标悬停于Span时，才会播放动画。
* "**{Text Content}**" 这个内容字段出现在两个地方。这两个“字段”必须包含与“@@--@@content”变量相同的文本，这正是让动画能够拥有多层效果进行播放的关键。
++++ 第 3 步 - 你的选择：
如上一步所示，可以将两种“类”应用于一个元素：“text-style”类和“animation”类。下面是一个展示它们的表格！
||~ 纯文本风格 ||~ 动画风格 ||~ 在一起时 ||
|| [[span class="style01-plaintext"]]文本风格 1[[/span]] || [[span class="animation01" style="--content: "动画 1";"]]动画 1[[/span]] || [[span class="style01-plaintext animation01" style="--content: "一起 1";"]]一起 1[[/span]] ||
|| [[span class="style02-plaintext"]]文本风格 2[[/span]] || [[span class="animation02" style="--content: "动画 2";"]]动画 2[[/span]] || [[span class="style02-plaintext animation02" style="--content: "一起 2";"]]一起 2[[/span]] ||
|| [[span class="style03-plaintext"]]文本风格 3[[/span]] || [[span class="animation03" style="--content: "动画 3";"]]动画 3[[/span]] || [[span class="style03-plaintext animation03" style="--content: "一起 3";"]]一起 3[[/span]] ||
|| [[span class="style04-plaintext"]]文本风格 4[[/span]] || [[span class="animation04" style="--content: "动画 4";"]]动画 4[[/span]] || [[span class="style04-plaintext animation04" style="--content: "一起 4";"]]一起 4[[/span]] ||
|| [[span class="style05-plaintext"]]文本风格 5[[/span]] || [[span class="animation05" style="--content: "动画 5";"]]动画 5[[/span]] || [[span class="style05-plaintext animation05" style="--content: "一起 5";"]]一起 5[[/span]] ||
[[=]]
[[size 170%]][[footnote]]**译注：**如有需要，这是英文版表格：
||~ Plaintext Style ||~ Animation Style ||~ All Together Now ||
|| [[span class="style01-plaintext"]]Text Style 1[[/span]] || [[span class="animation01" style="--content: "Animation 1";"]]Animation 1[[/span]] || [[span class="style01-plaintext animation01" style="--content: "Together 1";"]]Together 1[[/span]] ||
|| [[span class="style02-plaintext"]]Text Style 2[[/span]] || [[span class="animation02" style="--content: "Animation 2";"]]Animation 2[[/span]] || [[span class="style02-plaintext animation02" style="--content: "Together 2";"]]Together 2[[/span]] ||
|| [[span class="style03-plaintext"]]Text Style 3[[/span]] || [[span class="animation03" style="--content: "Animation 3";"]]Animation 3[[/span]] || [[span class="style03-plaintext animation03" style="--content: "Together 3";"]]Together 3[[/span]] ||
|| [[span class="style04-plaintext"]]Text Style 4[[/span]] || [[span class="animation04" style="--content: "Animation 4";"]]Animation 4[[/span]] || [[span class="style04-plaintext animation04" style="--content: "Together 4";"]]Together 4[[/span]] ||
|| [[span class="style05-plaintext"]]Text Style 5[[/span]] || [[span class="animation05" style="--content: "Animation 5";"]]Animation 5[[/span]] || [[span class="style05-plaintext animation05" style="--content: "Together 5";"]]Together 5[[/span]] ||
[[/footnote]][[/size]]
[[/=]]
------
------
[[=]]
[[span class="style01-plaintext animation01" style="--content: '更多细节'; font-size: 2rem;"]]更多细节[[/span]]
[[/=]]
这个部分旨在提供特定用例的详细信息，或回答常见问题；随着人们使用此组件，页面的这一部分可能会随着时间的推移而更新。
[[=]]
[[collapsible show="为什么动画文字不会自动换行？" hide="为什么动画文字不会自动换行"]]
[[<]]
不幸的是，由于这些动画是通过使用 ::before 和 ::after 伪元素实现的，自动换行会影响这些图层覆盖在原始文字上的位置，从而产生不美观的效果。对于较长的短语，在较小屏幕上可能会导致文字超出屏幕边缘，这显然不是理想情况。
因此，以下动画类应用到元素上时，全部禁用了自动换行：
* "animation01"
* "animation02"
* "animation03"
* "animation04"
特别说明“animation05”被排除在外，因为它并未使用伪元素来实现动画，而是仅通过 text-shadow 实现动画效果。
> 这也带来了一些有趣的用法，例如可以将该动画应用到整个 div 元素上，其中的文字都会带有动画效果。
------
如果你想要使用长文本或段落，该如何处理呢？在动画 1-4 中实现长文本的唯一方法是将一整句话/短语/段落拆分成多个 span。这会变得有点混乱，并不是因为很难，而是因为最终结果看起来会像“意大利面代码”。
一个简单的解决办法是按照以下步骤来处理这些“意大利面”：
[[div class="blockquote"]]
**首先，将多个 span 写在单独的行上，以保证可读性：**
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "我们";"]]我们[[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "于";"]]于[[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "黑暗中";"]]黑暗[[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "中";"]]中[[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "死去";"]]死去[[/span]]@@
**只有在那之后，再移除每个 span 之间的换行符，这样它才能正常工作：**
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "我们";"]]我们[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "于";"]]于[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "黑暗中";"]]黑暗[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "中";"]]中[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "死去";"]]死去[[/span]]@@
**现在结果能够支持较小的屏幕尺寸：**
[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "我们";"]]我们[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "于";"]]于[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "黑暗中";"]]黑暗[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "中";"]]中[[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "死去";"]]死去[[/span]]
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[=]]
[[collapsible show="把动画应用于 一 整 个 Div元素？" hide="把动画应用于 一 整 个 Div元素？"]]
[[<]]
由于“animation05”没有使用 ::before 和 ::after 伪元素来提供动画所需的重叠图层，它可以被应用到大段文本甚至整个段落中，并且仍然会受到自动换行的影响。
最简单的做法就是创建一个 div，把文本放进去，然后将“animation05”类应用到该 div 上，如下所示：
[[div class="blockquote"]]
@@[[div class="animation05"]]@@
@@Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.@@
@@[[/div]]@@
[[div class="animation05"]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/div]][[footnote]]**译注：**这是一段经典的排版占位文字 Lorem Ipsum，通常不翻译。[[/footnote]]
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[=]]
[[collapsible show="隐藏链接？" hide="隐藏链接？"]]
[[<]]
在页面顶部的项目列表中展示了一个示例，其中“隐藏链接”只是把你送到 SCP-Wiki 主页。归根结底，这只是使用一个 “@@[[a href=“link…”]][[/a]]@@” 元素作为包含文本的内部 span 的包装器。
现在，有一个在 FAQ 部分基础使用步骤中未展示的类是 “style0#-link” 类，它用于为 “@@[[a href=“link…”]][[/a]]@@” 包装器应用样式。
所有现有的链接类都使用相同的样式规则，之所以存在多个类，仅是为了利用该组件提供的变量进行自定义，这在另一个 FAQ 折叠部分有展示。
下面是一个示例：
[[div class="blockquote"]]
**为了清晰，拆开：**
@@[[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]]@@
@@[[span class="style03-plaintext animation03" style="--content: '秘密';"]]秘密[[/span]]@@
@@[[/a]]@@
**重新放到一起:**
@@[[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]][[span class="style03-plaintext animation03" style="--content: '秘密';"]]秘密[[/span]][[/a]]@@
**结果**
[[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]][[span class="style03-plaintext animation03" style="--content: '秘密';"]]秘密[[/span]][[/a]]
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[=]]
[[collapsible show="渲染Bug（BHL + Firefox）" hide="渲染Bug（BHL + Firefox）"]]
[[<]]
我得知在 Firefox 浏览器中，来自该组件的某个特定动画似乎存在错误。经过与社区中一位成员的深入调查，发现问题并不仅仅出在 Firefox 上。实际上，BHL 会干扰动画使用的 ::before 和 ::after 伪元素的 font-weight，将其改为 400，而 span 元素仍为 700。由于只有在使用 Firefox 时才会将 font-weight 考虑进字距计算，这个问题在组件最初发布时并未显现。
下面是一张测试此特定错误的截图，以便你在遇到该问题时进行对比：
[[image http://scp-wiki.wikidot.com/local--files/component:glitch-elements/Glitch%20Elements%20BHL%20Bug.png]]
以下是这么做的一个例子：
[[div class="blockquote"]]
@@[[module css]]@@
@@.animation01, .animation01-hover:hover,@@
@@.animation02, .animation02-hover:hover,@@
@@.animation03, .animation03-hover:hover,@@
@@.animation04, .animation04-hover:hover {@@
@@ font-weight: 700;@@ **或者一个变量，比如** @@ font-weight: var(--style04-plain-weight);@@
@@}@@
@@.animation01::before, .animation01::after, @@
@@.animation01-hover:hover::before, .animation01-hover:hover::after,@@
@@.animation02::before, .animation02::after, @@
@@.animation02-hover:hover::before, .animation02-hover:hover::after,@@
@@.animation03::before, .animation03::after, @@
@@.animation03-hover:hover::before, .animation03-hover:hover::after,@@
@@.animation04::before, .animation04::after, @@
@@.animation04-hover:hover::before, .animation04-hover:hover::after {@@
@@ font-weight: 700;@@ **或者一个变量，比如** @@ font-weight: var(--style04-plain-weight);@@
@@}@@
@@[[/module]]@@
[[/div]]
如上方引用块所示，你可以为每个动画类设置一个固定的 font-weight 值，或者将其设置为 text-style 变量之一，这样在同一元素上同时使用 text-style 和动画时就不必手动匹配。
你也可以只对单个动画类应用此修复，通过分解选择器实现，如下所示：
[[div class="blockquote"]]
@@[[module css]]@@
@@.animation01, .animation01-hover:hover {@@
@@ font-weight: 700;@@ **或者一个变量，比如** @@ font-weight: var(--style04-plain-weight);@@
@@}@@
@@.animation01::before, .animation01::after, @@
@@.animation01-hover:hover::before, .animation01-hover:hover::after {@@
@@ font-weight: 700;@@ **或者一个变量，比如** @@ font-weight: var(--style04-plain-weight);@@
@@}@@
@@[[/module]]@@
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[/iftags]]
[[module css]]
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
:root {
/*Link Style Variables*/
--style01-link-deco: inherit;
--style01-link-color: inherit;
--style02-link-deco: none;
--style02-link-color: green;
--style03-link-deco: none;
--style03-link-color: inherit;
--style04-link-deco: none;
--style04-link-color: inherit;
--style05-link-deco: none;
--style05-link-color: inherit;
/*Plaintext Style Variables*/
--style01-plain-font: inherit;
--style01-plain-weight: inherit;
--style01-plain-size: inherit;
--style01-plain-color: inherit;
--style01-plain-bgcolor: inherit;
--style02-plain-font: 'Orbitron', sans-serif;
--style02-plain-weight: inherit;
--style02-plain-size: inherit;
--style02-plain-color: inherit;
--style02-plain-bgcolor: inherit;
--style03-plain-font: "Audiowide", sans-serif;
--style03-plain-weight: inherit;
--style03-plain-size: inherit;
--style03-plain-color: inherit;
--style03-plain-bgcolor: inherit;
--style04-plain-font: "Press Start 2P", system-ui;
--style04-plain-weight: 700;
--style04-plain-size: inherit;
--style04-plain-color: inherit;
--style04-plain-bgcolor: inherit;
--style05-plain-font: "DotGothic16", sans-serif;
--style05-plain-weight: bold;
--style05-plain-size: inherit;
--style05-plain-color: inherit;
--style05-plain-bgcolor: inherit;
/*Animation Style Variables ("mult" = multipliers to the base values)*/
--anim01-duration-mult: 1;
--anim01-before-duration-mult: 1;
--anim01-after-duration-mult: 1;
--anim01-translate-mult: 1;
--anim02-base-duration-mult: 1;
--anim02-before-duration-mult: 1;
--anim02-after-duration-mult: 1;
--anim02-translate-mult: 1;
--anim03-base-duration-mult: 1;
--anim03-before-duration-mult: 1;
--anim03-after-duration-mult: 1;
--anim03-before-color: #e0287d;
--anim03-after-color: #1bc7fb;
--anim04-before-duration-mult: 1;
--anim04-after-duration-mult: 1;
--anim04-translate-mult: 1;
--anim05-duration-mult: 1;
}
/*===================================*/
.style01-link:link, .style01-link:visited, .style01-link:hover, .style01-link:active {
text-decoration: var(--style01-link-deco);
color: var(--style01-link-color);
}
.style02-link:link, .style02-link:visited, .style02-link:hover, .style02-link:active {
text-decoration: var(--style02-link-deco);
color: var(--style02-link-color);
}
.style03-link:link, .style03-link:visited, .style03-link:hover, .style03-link:active {
text-decoration: var(--style03-link-deco);
color: var(--style03-link-color);
}
.style04-link:link, .style04-link:visited, .style04-link:hover, .style04-link:active {
text-decoration: var(--style04-link-deco);
color: var(--style04-link-color);
}
.style05-link:link, .style05-link:visited, .style05-link:hover, .style05-link:active {
text-decoration: var(--style05-link-deco);
color: var(--style05-link-color);
}
/*===================================*/
.style01-plaintext {
font-family: var(--style01-plain-font);
font-weight: var(--style01-plain-weight);
font-size: var(--style01-plain-size);
color: var(--style01-plain-color);
padding-left: 0.0ch;
padding-right: 0.0ch;
}
.style02-plaintext {
font-family: var(--style02-plain-font);
font-weight: var(--style02-plain-weight);
font-size: var(--style02-plain-size);
color: var(--style02-plain-color);
padding-left: 0.0ch;
padding-right: 0.0ch;
}
.style03-plaintext {
font-family: var(--style03-plain-font);
font-weight: var(--style03-plain-weight);
font-size: var(--style03-plain-size);
color: var(--style03-plain-color);
padding-left: 0.0ch;
padding-right: 0.0ch;
}
.style04-plaintext {
font-family: var(--style04-plain-font);
font-weight: var(--style04-plain-weight);
font-size: var(--style04-plain-size);
color: var(--style04-plain-color);
padding-left: 0.0ch;
padding-right: 0.0ch;
}
.style05-plaintext {
font-family: var(--style05-plain-font);
font-weight: var(--style05-plain-weight);
font-size: var(--style05-plain-size);
color: var(--style05-plain-color);
padding-left: 0.0ch;
padding-right: 0.0ch;
}
/*===================================*/
span.style01-plaintext { background: var(--style01-plain-bgcolor); }
span.style02-plaintext { background: var(--style02-plain-bgcolor); }
span.style03-plaintext { background: var(--style03-plain-bgcolor); }
span.style04-plaintext { background: var(--style04-plain-bgcolor); }
span.style05-plaintext { background: var(--style05-plain-bgcolor); }
.animation01, .animation01-hover:hover,
.animation02, .animation02-hover:hover,
.animation03, .animation03-hover:hover,
.animation04, .animation04-hover:hover {
position: relative;
white-space: nowrap;
display: inline-block;
}
.animation01::before, .animation01::after, .animation01-hover:hover::before, .animation01-hover:hover::after,
.animation02::before, .animation02::after, .animation02-hover:hover::before, .animation02-hover:hover::after,
.animation03::before, .animation03::after, .animation03-hover:hover::before, .animation03-hover:hover::after,
.animation04::before, .animation04::after, .animation04-hover:hover::before, .animation04-hover:hover::after {
content: var(--content);
position: absolute;
bottom: 0rem;
left: 0;
}
/*===================================*/
.animation01, .animation01-hover:hover {}
.animation01::before, .animation01-hover:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
.animation01::after, .animation01-hover:hover::after {
clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0 100%);
}
.animation01::before, .animation01::after, .animation01-hover:hover::before, .animation01-hover:hover::after {}
/*===================================*/
.animation02, .animation02-hover:hover {}
.animation02::before, .animation02-hover:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
opacity: 0.8;
transform: translate(
calc(-0.025em * var(--anim02-translate-mod)),
calc(-0.0125em * 1)
);
}
.animation02::after, .animation02-hover:hover::after {
clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
opacity: 0.8;
transform: translate(
calc(0.0125em * var(--anim02-translate-mod)),
calc(0.025em * 1)
);
}
.animation02::before, .animation02::after, .animation02-hover:hover::before, .animation02-hover:hover::after {}
/*===================================*/
.animation03, .animation03-hover:hover {}
.animation03::before, .animation03-hover:hover::before {
top: 10px;
left: 15px;
color: var(--anim03-before-color);
}
.animation03::after, .animation03-hover:hover::after {
top: 5px;
left: -10px;
color: var(--anim03-after-color);
}
.animation03::before, .animation03::after,
.animation03-hover:hover::before, .animation03-hover:hover::after {
width: 110%;
z-index: -1;
}
/*===================================*/
.animation04, .animation04-hover:hover {}
.animation04::before, .animation04-hover:hover::before {
left: 2px;
color: #192941;
text-shadow: -1px 0 #0ff;
clip: rect(0, 400%, 0, 0);
}
.animation04::after, .animation04-hover:hover::after {
left: -2px;
color: darken(#01A8FF, 33%);
text-shadow: 3px 0 #FF28D7;
clip: rect(0, 400%, 0, 0);
}
.animation04::before, .animation04::after, .animation04-hover:hover::before, .animation04-hover:hover::after {}
/*===================================*/
.animation05, .animation05-hover:hover {
position: relative;
display: inline-block;
}
.animation05::before, .animation05-hover:hover::before {}
.animation05::after, .animation05-hover:hover::after {}
.animation05::before, .animation05::after,
.animation05-hover:hover::before, .animation05-hover:hover::after {}
@media not (prefers-reduced-motion) {
.animation01, .animation01-hover:hover {
animation: ge-anim01-base calc(300ms * var(--anim01-duration-mult)) linear infinite;
}
.animation01::before, .animation01-hover:hover::before {
animation: ge-anim01-top calc(1s * var(--anim01-before-duration-mult)) linear infinite;
}
.animation01::after, .animation01-hover:hover::after {
animation: ge-anim01-bottom calc(1s * var(--anim01-after-duration-mult)) linear infinite;
}
/*===================================*/
.animation02, .animation02-hover:hover {
animation: ge-anim02 calc(500ms * var(--anim02-base-duration-mult)) infinite;
}
.animation02::before, .animation02-hover:hover::before {
animation: ge-anim02 calc(650ms * var(--anim02-before-duration-mult)) infinite;
}
.animation02::after, .animation02-hover:hover::after {
animation: ge-anim02 calc(375ms * var(--anim02-after-duration-mult)) infinite;
}
/*===================================*/
.animation03, .animation03-hover:hover {
animation: ge-anim03-paths calc(5s * var(--anim03-base-duration-mult)) step-end infinite;
}
.animation03::before, .animation03-hover:hover::before {
animation:
ge-anim03-paths calc(5s * var(--anim03-before-duration-mult)) step-end infinite,
ge-anim03-opacity calc(5s * var(--anim03-before-duration-mult)) step-end infinite,
ge-anim03-font calc(8s * var(--anim03-before-duration-mult)) step-end infinite,
ge-anim03-movement calc(10s * var(--anim03-before-duration-mult)) step-end infinite;
}
.animation03::after, .animation03-hover:hover::after {
animation:
ge-anim03-paths calc(5s * var(--anim03-after-duration-mult)) step-end infinite,
ge-anim03-opacity calc(5s * var(--anim03-after-duration-mult)) step-end infinite,
ge-anim03-font calc(7s * var(--anim03-after-duration-mult)) step-end infinite,
ge-anim03-movement calc(8s * var(--anim03-after-duration-mult)) step-end infinite;
}
/*===================================*/
.animation04::before, .animation04-hover:hover::before {
animation: ge-anim04-1 calc(4s * var(--anim04-before-duration-mult)) linear alternate-reverse infinite;
}
.animation04::after, .animation04-hover:hover::after {
animation: ge-anim04-2 calc(2s * var(--anim04-after-duration-mult)) linear alternate-reverse infinite .2s;
}
/*===================================*/
.animation05, .animation05-hover:hover {
animation: ge-anim05 calc(5s * var(--anim05-duration-mult)) step-end infinite;
}
}
@media (prefers-reduced-motion) {
.animation01, .animation01-hover:hover {
transform: translate(calc(-0.025em * var(--anim01-translate-mod)), calc(-0.025em * var(--anim01-translate-mod))) skew(0deg);
}
.animation01::before, .animation01-hover:hover::before {
transform: translate(calc(15% * var(--anim01-translate-mod)), calc(0.5% * var(--anim01-translate-mod))) skew(-15deg);
}
.animation01::after, .animation01-hover:hover::after {
transform: translate(calc(-10% * var(--anim01-translate-mod)), calc(1% * var(--anim01-translate-mod))) skew(35deg);
}
/*===================================*/
.animation02, .animation02-hover:hover {}
.animation02::before, .animation02-hover:hover::before {
text-shadow:
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
.animation02::after, .animation02-hover:hover::after {
text-shadow:
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
/*===================================*/
.animation03, .animation03-hover:hover {}
.animation03::before, .animation03-hover:hover::before {
clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
opacity: 0.7;
font-weight: 100; color: #e0287d; filter: blur(3px);
}
.animation03::after, .animation03-hover:hover::after {
clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
opacity: 0.7;
font-weight: 100; color: #e0287d; filter: blur(3px);
}
/*===================================*/
.animation04::before, .animation04-hover:hover::before {
opacity: 1;
transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
}
.animation04::after, .animation04-hover:hover::after {
opacity: 1;
transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
}
/*===================================*/
.animation05, .animation05-hover:hover {
clip-path: polygon(81% 79%, 25% 5%, 84% 4%, 40% 54%, 81% 17%, 88% 88%, 30% 25%, 46% 6%, 11% 90%, 7% 47%, 67% 2%, 92% 91%, 12% 33%, 76% 75%, 14% 92%, 91% 6%, 85% 60%, 36% 84%, 58% 50%, 43% 53%, 19% 71%, 5% 84%, 83% 11%, 70% 62%, 1% 34%, 87% 11%, 45% 32%, 53% 0%, 73% 6%, 35% 53%, 71% 42%, 12% 51%, 22% 79%, 79% 84%, 3% 7%, 84% 16%, 16% 52%, 81% 92%, 12% 66%, 12% 65%, 43% 89%, 48% 63%, 32% 75%, 1% 40%, 49% 1%, 32% 68%, 42% 33%, 62% 93%, 98% 73%, 46% 48%);
}
}
@keyframes ge-anim01-base {
0% {
transform: translate(
calc(-0.05em * var(--anim01-translate-mult)),
calc(-0.025em * var(--anim01-translate-mult))
) skew(0deg);
}
14% {
transform: translate(
calc(-0.05em * var(--anim01-translate-mult)),
calc(-0.025em * var(--anim01-translate-mult))
) skew(0deg);
}
15% {
transform: translate(
calc(0.025em * var(--anim01-translate-mult)),
calc(0.025em * var(--anim01-translate-mult))
) skew(0deg);
}
49% {
transform: translate(
calc(0.025em * var(--anim01-translate-mult)),
calc(0.025em * var(--anim01-translate-mult))
) skew(5deg);
}
50% {
transform: translate(
calc(0.05em * var(--anim01-translate-mult)),
0
) skew(5deg);
}
99% {
transform: translate(
calc(0.05em * var(--anim01-translate-mult)),
0
) skew(0deg);
}
100% {
transform: translate(
calc(-0.025em * var(--anim01-translate-mult)),
calc(-0.025em * var(--anim01-translate-mult))
) skew(0deg);
}
}
@keyframes ge-anim01-top {
2%, 64% {
transform: translate(
calc(-1% * var(--anim01-translate-mult)),
calc(-1% * var(--anim01-translate-mult))
);
}
4%, 60% {
transform: translate(
calc(1% * var(--anim01-translate-mult)),
calc(-1% * var(--anim01-translate-mult))
);
}
62% {
transform: translate(
calc(15% * var(--anim01-translate-mult)),
calc(0.5% * var(--anim01-translate-mult))
) skew(-15deg);
}
}
@keyframes ge-anim01-bottom {
2%, 64% {
transform: translate(calc(-1% * var(--anim01-translate-mult)), 0);
}
4%, 60% {
transform: translate(calc(-1% * var(--anim01-translate-mult)), 0);
}
62% {
transform: translate(
calc(-10% * var(--anim01-translate-mult)),
calc(1% * var(--anim01-translate-mult))
) skew(35deg);
}
}
/*===================================*/
@keyframes ge-anim02 {
0% {
text-shadow:
0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
-0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}
14% {
text-shadow:
0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
-0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}
15% {
text-shadow:
-0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
}
49% {
text-shadow:
-0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
}
50% {
text-shadow:
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
99% {
text-shadow:
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
100% {
text-shadow:
-0.025em 0 0 rgba(255, 0, 0, 0.75),
-0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
-0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
}
}
/*===================================*/
@keyframes ge-anim03-paths {
0% {
clip-path: polygon(0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
}
5% {
clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%);
}
30% {
clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%);
}
45% {
clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
}
76% {
clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
}
90% {
clip-path: polygon(0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
}
1%, 7%, 33%, 47%, 78%, 93% { clip-path: none; }
}
@keyframes ge-anim03-movement {
0% { top: 0px; left: -20px; }
15% { top: 10px; left: 10px; }
60% { top: 5px; left: -10px; }
75% { top: -5px; left: 20px; }
100% { top: 10px; left: 5px; }
}
@keyframes ge-anim03-opacity {
0% { opacity: 0.1; }
5% { opacity: 0.7; }
30% { opacity: 0.4; }
45% { opacity: 0.6; }
76% { opacity: 0.4; }
90% { opacity: 0.8; }
1%, 7%, 33%, 47%, 78%, 93% { opacity: 0; }
}
@keyframes ge-anim03-font {
0% { font-weight: 100; color: #e0287d; filter: blur(3px); }
20% { font-weight: 500; color: #fff; filter: blur(0); }
50% { font-weight: 300; color: #1bc7fb; filter: blur(2px); }
60% { font-weight: 700; color: #fff; filter: blur(0); }
90% { font-weight: 500; color: #e0287d; filter: blur(6px); }
}
/*===================================*/
@keyframes ge-anim04-1 {
0% {
opacity: 1;
transform: translate3d(0,0,0);
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
2% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
4% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
6% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
8% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
10% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
12% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
14% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
16% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
18% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
20% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
21.9% {
opacity: 1;
transform: translate3d(0,0,0);
}
22%, 100% {
opacity: 0;
transform: translate3d(0,0,0);
-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
}
@keyframes ge-anim04-2 {
0% {
opacity: 1;
transform: translate3d(-1,0,0);
-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
}
3% {
-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
}
5% {
-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
}
7% {
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}
9% {
-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
}
11% {
-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
}
13% {
-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}
15% {
-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
}
17% {
-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
}
19% {
-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
}
20% {
-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
}
21.9% {
opacity: 1;
transform: translate3d(-1,0,0);
}
22%, 100% {
opacity: 0;
transform: translate3d(0,0,0);
-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
}
/*===================================*/
@keyframes ge-anim05 {
0%, 13%, 29.5%, 49%, 72.25%, 84% {
clip-path: none;
text-shadow: 0 0 10px white;
}
9.2%, 27.7%, 45.7%, 69%, 82% {
text-shadow: 0 0 10px white, 10px 10px 0px #ff88ffff, 3px -4px 0px #88ff88ff;
}
9.2% {
clip-path: polygon(89% 21%, 50% 31%, 30% 29%, 90% 7%, 79% 46%, 17% 42%, 21% 60%, 31% 53%, 77% 39%, 2% 88%, 48% 2%, 18% 76%, 2% 64%, 87% 90%, 32% 20%, 53% 97%, 19% 86%, 80% 73%, 69% 88%, 76% 68%, 91% 91%, 12% 80%, 77% 15%, 54% 12%, 78% 58%, 93% 18%, 88% 24%, 90% 30%, 67% 76%, 89% 54%, 18% 52%, 96% 49%, 35% 19%, 22% 52%, 38% 7%, 78% 80%, 28% 24%, 78% 58%, 43% 99%, 55% 95%, 80% 85%, 49% 83%, 77% 66%, 23% 49%, 97% 37%, 66% 40%, 61% 8%, 40% 49%, 14% 89%, 56% 10%);
}
27.7% {
clip-path: polygon(73% 38%, 53% 27%, 50% 22%, 49% 93%, 83% 7%, 40% 45%, 49% 62%, 0% 17%, 33% 56%, 71% 36%, 59% 86%, 99% 92%, 43% 9%, 48% 62%, 8% 55%, 16% 9%, 58% 1%, 16% 89%, 17% 61%, 98% 91%, 92% 87%, 52% 97%, 29% 95%, 12% 74%, 40% 35%, 83% 96%, 0% 21%, 51% 17%, 86% 24%, 8% 85%, 82% 84%, 60% 70%, 64% 78%, 43% 13%, 2% 98%, 6% 16%, 15% 33%, 42% 64%, 84% 3%, 56% 55%, 42% 12%, 98% 81%, 14% 69%, 1% 96%, 89% 18%, 46% 34%, 65% 0%, 8% 17%, 91% 36%, 21% 24%);
}
45.7% {
clip-path: polygon(81% 79%, 25% 5%, 84% 4%, 40% 54%, 81% 17%, 88% 88%, 30% 25%, 46% 6%, 11% 90%, 7% 47%, 67% 2%, 92% 91%, 12% 33%, 76% 75%, 14% 92%, 91% 6%, 85% 60%, 36% 84%, 58% 50%, 43% 53%, 19% 71%, 5% 84%, 83% 11%, 70% 62%, 1% 34%, 87% 11%, 45% 32%, 53% 0%, 73% 6%, 35% 53%, 71% 42%, 12% 51%, 22% 79%, 79% 84%, 3% 7%, 84% 16%, 16% 52%, 81% 92%, 12% 66%, 12% 65%, 43% 89%, 48% 63%, 32% 75%, 1% 40%, 49% 1%, 32% 68%, 42% 33%, 62% 93%, 98% 73%, 46% 48%);
}
69% {
clip-path: polygon(89% 82%, 44% 73%, 87% 45%, 77% 4%, 33% 15%, 68% 65%, 87% 48%, 87% 14%, 64% 6%, 60% 70%, 2% 50%, 46% 82%, 97% 43%, 30% 54%, 87% 12%, 85% 3%, 34% 99%, 88% 18%, 84% 74%, 95% 26%, 26% 0%, 81% 86%, 97% 14%, 17% 90%, 15% 11%, 29% 13%, 1% 88%, 88% 21%, 29% 13%, 24% 16%, 45% 25%, 69% 39%, 94% 27%, 41% 77%, 23% 46%, 34% 42%, 77% 12%, 19% 53%, 15% 83%, 95% 24%, 47% 82%, 99% 22%, 53% 60%, 47% 7%, 65% 75%, 51% 3%, 85% 32%, 87% 54%, 31% 99%, 90% 51%);
}
82% {
clip-path: polygon(64% 61%, 32% 7%, 33% 69%, 48% 3%, 3% 54%, 18% 3%, 88% 12%, 54% 7%, 75% 18%, 32% 72%, 45% 87%, 68% 57%, 46% 39%, 27% 39%, 9% 27%, 82% 95%, 31% 24%, 75% 99%, 36% 4%, 31% 21%, 0% 55%, 79% 45%, 14% 38%, 12% 70%, 22% 30%, 96% 2%, 32% 7%, 53% 99%, 9% 4%, 10% 58%, 64% 85%, 73% 2%, 75% 71%, 53% 85%, 40% 58%, 21% 0%, 65% 77%, 22% 73%, 53% 61%, 4% 14%, 81% 0%, 65% 58%, 5% 36%, 96% 41%, 71% 30%, 1% 51%, 78% 9%, 11% 23%, 29% 43%, 10% 10%);
}
}
[[/module]]