HTML templates that shuffle themselves on render.
5.5 KB minified with no dependencies!

Installation

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. I've found that leaving the custom element wrapper around the rendered SVG can cause complications downstream when positioning the wave in relation to other elements.

So, pick your poison:

a) Grab the file from Github, place it in your project, and reference it with a <script> tag.

b) Or, load the script from a CDN provider.

        <!-- 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/dynamowaves.min.js" crossorigin="anonymous"></script>
        
      

Usage

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>
        
      

Wave Direction

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>
            
          

Wave Observation

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>
        
      

Practical Application

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">
    <h3>I'm the heading!</h3>
    <dynamo-wave data-wave-face="bottom"></dynamo-wave>
  </div>
  <div class="content">...</div>
</div>

I'm the heading!

Lorem ipsum dolor sit amet, ea sea regione concludaturque. Te eam pericula prodesset constituto. In forensibus voluptatum nam. Ius ne modus laboramus, quo illud altera mandamus eu. Persius oportere molestiae vel ut. Ei vel nusquam forensibus eloquentiam.

Mei in posse error incorrupte. Ex rebum vidisse sea. Per sumo quando mucius cu, no persius signiferumque eos, et has deserunt pertinacia. Ea malis everti nostrud sed.

Id regione prompta denique est, mei at veri essent instructior, mei id congue instructior. Nec ne legere tritani sadipscing. Oblique propriae theophrastus id quo, vero persequeris vix cu. Qui singulis pertinacia ex, ad agam doctus graecis eos, vis et erat accumsan.

Cum esse quot essent te, in delicata conceptam cum, dicam iuvaret inimicus mei ad. Est ex cetero commune eleifend. Vim in aeque constituam, timeam debitis argumentum sed ea. His epicurei evertitur et, ea sanctus saperet sed. An harum referrentur nec, te sed errem patrioque, mei et tempor blandit sapientem. Vim te aeterno sapientem.

In eam putant labores accusam. Ne sed evertitur torquatos. Dolor option regione nam ei, summo constituto usu at. Postea accusata et has, his te prima porro verterem.

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:steelblue;
    width:100%">
  </dynamo-wave>
</div>
<div style="padding:3rem;backgroundt:steelblue">...</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:steelblue;
    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>

Eye-catching headline.

Further information to draw interest.

Explore This

Dive Deeper

Take a more in-depth look at the process behind dynamowaves in the article So fresh. So wavy. on markzebley.com!