<section class="has-section-divider" data-theme="dark">
<div class="padding-y-xxl">
<div class="container max-width-adaptive-sm">
<div class="text-component">
<h1>Cool SVG Divider 👇</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quia dolorem dicta dolor nisi illum libero neque fuga veritatis deleniti!</p>
</div>
</div>
</div>
<svg class="section-divider" viewBox="0 0 1920 60" aria-hidden="true"><path data-theme="softSecondary" fill="var(--color-bg)" d="M0,80.75H1920V45.833H1742.083a80.491,80.491,0,0,1,12.863-1.55c5.2-.26,17.24-.3,24.153-.24,26.69.222,54.377,1.094,79.341.96,19.287-.1,37.1-.372,53.573-.788L1920,44V34.078l-6.614.216-9.221.256c-6.252.147-12.7.249-19.265.32-13.132.14-26.739.15-40.206.125-26.935-.052-53.313-.247-74.22.168-14.367-1.4-32.582-.756-48.293-1.92-10.145.509-20.876.936-24.149,2.4-16.09-.266-37.611,2.532-50.019.479V34.684c-10.959-2.291-33.371-1.869-48.292-3.84-15.861-.512-26.214,1.347-39.671,1.92-7.032.178-5.941-.773-13.8-.481-40.751-.071-41.131,5.477-62.087,8.16-4.569-5.691-47.085-5.126-77.622-5.04-2.333-4.154-22.643-5.808-50.015-6.479-4.677-2.069-17.763-2.969-22.423-5.04-4.7-.175-3.474.477-6.9.479-11.485-2.964-40.092-2.449-63.813-3.36-23.312.6-29.4,3.589-55.195,3.841-8.3-3.783-56.5-4.561-84.513-3.361-.316-1.857-5.682-3.862-20.7-4.8-2.193-.137-6.78.122-10.352,0-16.331-.564-22.974-3.145-39.671-1.441-22.812-1.938-73.831-3.919-98.311-.719-4.315-2.2-15.369-3.462-20.7-5.521-23.122-.714-41.26-2.815-65.54-2.64-13.5,1-29.918,1.6-39.671,3.12.27,1.317-1.305,2.38-6.9,2.88-35.562-1.333-83.117-2.545-93.139,2.88-14.338-.314-8.341,2.2-22.423,1.92-5.17-.16-2.615-1.4-6.9-1.68-36.327-1.894-80.653-1.762-100.041,2.161-12.433-1.631-21.648-3.708-36.221-5.04-13.359.1-36.33-.325-48.293-1.2-32.483.6-42.463,4.331-53.471,7.92-25.227-.147-43.752,2.274-58.641,4.321-11.966-1.189-27.56-.426-39.67-1.441-19.514,1.284-40.772,2.328-53.468,4.561C301.584,31.04,294,33.888,283.7,37.8c-15.047-.774-19.865-3.5-36.221-4.321-10.453-.522-37.12-1.01-48.3-.959-10.184.046-17.188,1.062-27.595.719-18.244,2.022-31.516,4.736-46.57,7.2-3.726,2.091-9.8,3.854-17.5,5.39H4.061c-.734-1.281-1.512-2.592-2.344-3.949-.546-.09-1.13-.175-1.717-.26Z"/></svg>
</section>
<section data-theme="softSecondary">
<div class="padding-y-xxl">
<div class="container max-width-adaptive-sm">
<div class="text-component">
<h1>Section Two</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quia dolorem dicta dolor nisi illum libero neque fuga veritatis deleniti!</p>
</div>
</div>
</div>
</section>
:root {
--section-divider-height: 60;
--section-divider-width: 1920;
--section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
}
.has-section-divider {
position: relative;
padding-bottom: var(--section-divider-ratio);
}
.section-divider {
display: block;
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: auto;
}
[data-theme="dark"] {
@include defineColorHSL(--color-primary-darker, 201, 65%, 42%);
@include defineColorHSL(--color-primary-dark, 201, 65%, 52%);
@include defineColorHSL(--color-primary, 201, 65%, 62%);
@include defineColorHSL(--color-primary-light, 201, 65%, 72%);
@include defineColorHSL(--color-primary-lighter, 201, 65%, 82%);
@include defineColorHSL(--color-accent-darker, 358, 97%, 43%);
@include defineColorHSL(--color-accent-dark, 358, 97%, 53%);
@include defineColorHSL(--color-accent, 358, 97%, 63%);
@include defineColorHSL(--color-accent-light, 358, 97%, 73%);
@include defineColorHSL(--color-accent-lighter, 358, 97%, 83%);
@include defineColorHSL(--color-secondary-darker, 165, 2%, 24%);
@include defineColorHSL(--color-secondary-dark, 165, 2%, 34%);
@include defineColorHSL(--color-secondary, 165, 2%, 44%);
@include defineColorHSL(--color-secondary-light, 165, 2%, 54%);
@include defineColorHSL(--color-secondary-lighter, 165, 2%, 64%);
@include defineColorHSL(--color-black, 240, 8%, 12%);
@include defineColorHSL(--color-white, 0, 0%, 100%);
@include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
@include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
@include defineColorHSL(--color-warning, 46, 100%, 61%);
@include defineColorHSL(--color-warning-light, 46, 100%, 71%);
@include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);
@include defineColorHSL(--color-success-darker, 94, 48%, 36%);
@include defineColorHSL(--color-success-dark, 94, 48%, 46%);
@include defineColorHSL(--color-success, 94, 48%, 56%);
@include defineColorHSL(--color-success-light, 94, 48%, 66%);
@include defineColorHSL(--color-success-lighter, 94, 48%, 76%);
@include defineColorHSL(--color-error-darker, 358, 97%, 43%);
@include defineColorHSL(--color-error-dark, 358, 97%, 53%);
@include defineColorHSL(--color-error, 358, 97%, 63%);
@include defineColorHSL(--color-error-light, 358, 97%, 73%);
@include defineColorHSL(--color-error-lighter, 358, 97%, 83%);
@include defineColorHSL(--color-bg, 240, 8%, 12%);
@include defineColorHSL(--color-contrast-lower, 240, 6%, 15%);
@include defineColorHSL(--color-contrast-low, 252, 4%, 25%);
@include defineColorHSL(--color-contrast-medium, 240, 1%, 52%);
@include defineColorHSL(--color-contrast-high, 0, 0%, 89%);
@include defineColorHSL(--color-contrast-higher, 0, 0%, 100%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[data-theme="softSecondary"] {
@include defineColorHSL(--color-primary-darker, 220, 89%, 36%);
@include defineColorHSL(--color-primary-dark, 220, 89%, 46%);
@include defineColorHSL(--color-primary, 220, 89%, 56%);
@include defineColorHSL(--color-primary-light, 220, 89%, 66%);
@include defineColorHSL(--color-primary-lighter, 220, 89%, 76%);
@include defineColorHSL(--color-accent-darker, 358, 97%, 43%);
@include defineColorHSL(--color-accent-dark, 358, 97%, 53%);
@include defineColorHSL(--color-accent, 358, 97%, 63%);
@include defineColorHSL(--color-accent-light, 358, 97%, 73%);
@include defineColorHSL(--color-accent-lighter, 358, 97%, 83%);
@include defineColorHSL(--color-secondary-darker, 197, 73%, 37%);
@include defineColorHSL(--color-secondary-dark, 197, 73%, 47%);
@include defineColorHSL(--color-secondary, 197, 73%, 57%);
@include defineColorHSL(--color-secondary-light, 197, 73%, 67%);
@include defineColorHSL(--color-secondary-lighter, 197, 73%, 77%);
@include defineColorHSL(--color-black, 240, 8%, 12%);
@include defineColorHSL(--color-white, 0, 0%, 100%);
@include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
@include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
@include defineColorHSL(--color-warning, 46, 100%, 61%);
@include defineColorHSL(--color-warning-light, 46, 100%, 71%);
@include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);
@include defineColorHSL(--color-success-darker, 94, 48%, 36%);
@include defineColorHSL(--color-success-dark, 94, 48%, 46%);
@include defineColorHSL(--color-success, 94, 48%, 56%);
@include defineColorHSL(--color-success-light, 94, 48%, 66%);
@include defineColorHSL(--color-success-lighter, 94, 48%, 76%);
@include defineColorHSL(--color-error-darker, 358, 97%, 43%);
@include defineColorHSL(--color-error-dark, 358, 97%, 53%);
@include defineColorHSL(--color-error, 358, 97%, 63%);
@include defineColorHSL(--color-error-light, 358, 97%, 73%);
@include defineColorHSL(--color-error-lighter, 358, 97%, 83%);
@include defineColorHSL(--color-bg, 199, 76%, 95%);
@include defineColorHSL(--color-contrast-lower, 199, 39%, 90%);
@include defineColorHSL(--color-contrast-low, 202, 15%, 79%);
@include defineColorHSL(--color-contrast-medium, 210, 5%, 50%);
@include defineColorHSL(--color-contrast-high, 230, 6%, 20%);
@include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
}
View Compiled
