Mermaid Scales (mermaid_scales)¶
← Back to Object Elements | 📋 All Elements
This element is available in the Lucit Template Designer Elements Panel and can be added to any template by clicking on it.
When this element is added, the code listed in Element HTML will be added as a new layer in your template design that you can then customize as you see fit.
Overview
- Type:
object - Element Class:
App\LuCore\DriveTemplates\BackgroundDriveTemplateElementClass
blue, fish, repeating, teal, cool, cold, water,
Preview
Element HTML
<div x-objectcode="mermaid_scales" class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image_full_size_stretch" id="{id}" title="Mermaid Scales"></div>
Default CSS
--u: 1.5vmin;
--c1: #ebfdff;
--c2: #4344af;
--c3: #434eaf;
--c4: #3a64b750;
--c5: #3a4db740;
--c6: #3a4db740;
--draw-mid: #fff0 0 calc(var(--u) * 3.25), var(--c4) calc(var(--u) * 3.5), #fff0 calc(var(--u) * 3.75) 100%;
--draw-left: #fff0 0 calc(var(--u) * 3.25), var(--c5) calc(var(--u) * 3.5), #fff0 calc(var(--u) * 3.75) 100%;
--draw-right: #fff0 0 calc(var(--u) * 3.25), var(--c6) calc(var(--u) * 3.5), #fff0 calc(var(--u) * 3.75) 100%;
--draw-white: var(--c1) calc(var(--u) * 3.58) calc(var(--u) * 3.62), #fff0 calc(var(--u) * 3.66) 100%;
--p1: var(--c1) calc(var(--u) * 3.5), var(--c3) calc(var(--u) * 3.9), #fff0 calc(var(--u) * 4) 100%;
--p2: var(--c1) calc(var(--u) * 3.75), #fff0 calc(var(--u) * 4) 100%;
--c0: circle at 0%;
--c50: circle at 50%;
--c100: circle at 100%;
--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10);
background:
repeating-linear-gradient(90deg, #00bcd430 , #3bffb638 calc(var(--u) * 5), #00bcd430 calc(var(--u) * 10)),
radial-gradient(var(--c50) -36%, var(--p1)) var(--gp),
/*** top right ***/
radial-gradient(var(--c100) -34%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -30%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -26%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -22%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -18%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -14%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -10%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -6%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -2%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 2%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 6%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 8%, var(--draw-white)) var(--gp),
radial-gradient(var(--c100) 10%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 12%, var(--draw-white)) var(--gp),
radial-gradient(var(--c100) 14%, var(--draw-right)) var(--gp),
/*** top left ***/
radial-gradient(var(--c0) -34%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -30%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -26%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -22%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -18%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -14%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -10%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -6%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -2%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 2%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 6%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 8%, var(--draw-white)) var(--gp),
radial-gradient(var(--c0) 10%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 12%, var(--draw-white)) var(--gp),
radial-gradient(var(--c0) 14%, var(--draw-left)) var(--gp),
radial-gradient(var(--c100) 12%, var(--p2)) var(--gp),
radial-gradient(var(--c100) 15%, var(--p1)) var(--gp),
radial-gradient(var(--c0) 12%, var(--p2)) var(--gp),
radial-gradient(var(--c0) 15%, var(--p1)) var(--gp),
/*** middle ***/
radial-gradient(var(--c50) -22%, var(--draw-mid)) var(--gp),
linear-gradient(180deg, #fff0 0 1%, var(--c2) 1%, var(--c1) 14%, #fff0 15% 100%) var(--gp),
radial-gradient(var(--c50) -18%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) -14%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) -10%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) -6%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) -2%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 2%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 6%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 10%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 14%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 18%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 22%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 26%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 30%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 34%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 38%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 42%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 46%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 36%, var(--draw-white)) var(--gp),
radial-gradient(var(--c50) 50%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 40%, var(--draw-white)) var(--gp),
radial-gradient(var(--c50) 54%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 56%, var(--draw-white)) var(--gp),
radial-gradient(var(--c50) 58%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 60%, var(--draw-white)) var(--gp),
radial-gradient(var(--c50) 62%, var(--draw-mid)) var(--gp),
radial-gradient(var(--c50) 61%, var(--p2)) var(--gp),
radial-gradient(var(--c50) 64%, var(--p1)) var(--gp),
/*** bottom right ***/
radial-gradient(var(--c100) 30%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 34%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 38%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 42%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 46%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 50%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 54%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 58%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 62%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 66%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 70%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 74%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 78%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 82%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 86%, var(--draw-right)) var(--gp),
/*** bottom left ***/
radial-gradient(var(--c0) 30%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 34%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 38%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 42%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 46%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 50%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 54%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 58%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 62%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 66%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 70%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 74%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 78%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 82%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) 86%, var(--draw-left)) var(--gp),
linear-gradient(0deg, var(--c1) 0 30%, var(--c2) 50%, var(--c1) 50% 80%, var(--c2) calc(100% - 1px), var(--c1) calc(100% - 1px) 100%) var(--gp);;