Demo

<template>
  <div class="demo-container">

    <!-- Place a bunch of DOM elements in a `shapeContainer` component-->
    <shapeContainer :config="config">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </shapeContainer>

  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';

// Setup the basic configuration, using default shape parameters
const config = ref({
  shapes: ['line', 'circle', 'arc', 'square', 'bezier'],
  shapeIndex: 0,
  loopElements: true
});

const intervalTimer = ref(null);

// Loop between default shapes every 4 seconds
onMounted(() => {
  intervalTimer.value = setInterval(() => {
    config.value.shapeIndex = (config.value.shapeIndex + 1) % config.value.shapes.length;
    config.value.shape = config.value.shapes[config.value.shapeIndex];
  }, 4000);
});

// Clean up the interval timer when the component is unmounted
onUnmounted(() => {
  clearInterval(intervalTimer.value);
});
</script>