HTML templates
that shuffle themselves on render.
5.5 KB minified with no
dependencies!
To make render times functionally instant, Dynamowaves intentionally eskews importing a library
such as SVG.js to build a new SVG on execution.
Instead, it selects at random from a curated collection of potential <paths>
and leverages HTML web components (sorry, IE) to allow it to easily grab its reference
element's applied attributes and then fully replaces the reference with a slick lil' wave.
You can install Dynamowaves via npm or by including the script file directly in your project.
To install Dynamowaves via npm, run the following command:
npm install dynamowaves
After installation, you can import Dynamowaves in your JavaScript or TypeScript files:
import 'dynamowaves';
To use Dynamowaves in an Angular project, follow these additional steps:
angular.json
file, add the dynamowaves
script to the scripts
array:
"scripts": [
"node_modules/dynamowaves/dist/dynamowaves.js"
]
app.module.ts
file, add CUSTOM_ELEMENTS_SCHEMA
to the schemas
array:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
// ...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Alternatively, you can include the Dynamowaves script file directly in your project:
<!-- Download and add to your project locally -->
<script src="path/to/dynamowaves.js"></script>
<!-- Or, reference the CDN -->
<script src="https://cdn.jsdelivr.net/gh/mzebley/dynamowaves/dist/dynamowaves.min.js" crossorigin="anonymous"></script>
Since Dynamowaves use HTML templating syntax, all it takes to call one is to add the custom element to your HTML!
<!-- Without any added attributes you get a top facing wave filled with the current color of its parent -->
<dynamo-wave></dynamo-wave>
A dynamo-wave will inherit any class
,
id
, or style
applied to its invoking element.
<!-- Example 1 -->
<dynamo-wave style="fill:slateblue"></dynamo-wave>
.fill-theme {
fill: var(--theme);
}
<!-- Example 2 -->
<dynamo-wave class="fill-theme"></dynamo-wave>
#special_wave {
height: 3rem;
width:80%;
transform: translateX(10%);
}
<!-- Example 2 -->
<dynamo-wave id="special_wave" class="fill-theme fill-light"></dynamo-wave>
Need more than a just a wave that faces up? Leverage the data-wave-face
attribute.
Available options:
a) "top"
b) "bottom"
c) "right"
d) "left"
<!-- Bottom facing wave -->
<dynamo-wave class="fill-theme" data-wave-face="bottom"></dynamo-wave>
<!-- Left facing wave -->
<dynamo-wave class="fill-theme" data-wave-face="left"></dynamo-wave>
<!-- Right facing wave -->
<dynamo-wave class="fill-theme" data-wave-face="right"></dynamo-wave>
Looking to really lean into generative design? Add
data-wave-observe="true"
to a dynamowave.
Now your wave
will build it's own IntersectionObserver
upon intitial render, shuffling itself
each time it leaves the viewport!
<!-- Self shuffling wave -->
<dynamo-wave class="fill-theme" data-wave-observe="true"></dynamo-wave>
Dynamowaves come out of the box entirely style agnostic. The onus is on the developer to add
the necessary attributes to get them to fit their intended platform, but at the same time this provides nearly
endless possibilities for customization.
Make use of position:sticky
and create a neat little header!
<!-- Widget classes not, uh, provided out-of-the-box -->
<div class="widget">
<div class="header">
<h2>I'm the heading!</h2>
<dynamo-wave data-wave-face="bottom"></dynamo-wave>
</div>
<div class="content">...</div>
</div>
Stack multiple dynamowaves with differing heights and colors to provide some visual interest when transitioning between content sections.
<!-- Probably, you know, use classes for this in real life -->
<div style="position:relative;height:4rem">
<dynamo-wave style="
position:absolute;
height:4rem;
bottom:0;
fill:lightsteelblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:3rem;
bottom:0;
fill:cadetblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:2rem;
bottom:0;
fill:#25455F;
width:100%">
</dynamo-wave>
</div>
<div style="padding:3rem;backgroundt:#25455F">...</div>
<div style="position:relative;height:4rem">
<dynamo-wave style="
position:absolute;
height:4rem;
top:0;
fill:lightsteelblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:3rem;
bottom:0;
fill:cadetblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:2rem;
top:0;
fill:#25455F;
width:100%">
</dynamo-wave>
</div>
Content content content....
Slap one of these bad boys along the edge of a photo to create an always fresh,
mask-image
effect without having to actually create multiple clip paths or image
masks!
<div class="widget horizontal">
<div class="image-wrapper">
<img src="./img/image_path.jpeg" />
<!-- When covering an image, I find it helps the browser render
to set the far edge with a bit of a negative overlap
It keeps the image from peeking through from behind the wave -->
<dynamo-wave data-wave-face="left" style="fill:white;position:absolute;right:-1px"></dynamo-wave>
</div>
<div class="content">...</div>
</div>
Take a more in-depth look at the process behind dynamowaves in the article So fresh. So wavy. on markzebley.com!