Tips for creating a vertical wave animation of a ribbon using svg

I have an SVG code for a vertical ribbon that I want to add a wave effect to. The wave should start from the top and flow continuously to the bottom, but currently it's not working as expected.

@keyframes thread{
    from {
        stroke-dashoffset: 200; 
        opacity:.5;  
    }
    to{
        stroke-dashoffset: 2;
        opacity:1;
    }
}
.anime{
    stroke-dasharray: 200;
    animation: thread 2s .4s forwards infinite ease-in-out; 
}
<div class="position-absolute">
    <svg height="200" width="200" >   
        <g class="anime">
     <path id="shape-1"  d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60   h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
                fill="transparent" stroke="black" stroke-width="2"></path>
                <path id="shape-2"  d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
                fill="transparent" stroke="black" stroke-width="2">
            </path>
        </g>
    </svg>
</div>

javascriptjqueryhtmlcss

Answer №1

It seems like you are interested in achieving something similar to the following code:

var svg = document.getElementById("cups");
var s = Snap(svg);

var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');

var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');


var toRibbon2 = function(){
  ribbon1.animate({ d: ribbon2Points }, 1000,  toRibbon1);  
}

var toRibbon1 = function(){
  ribbon1.animate({ d: ribbon1Points }, 1000,  toRibbon2); 
}


toRibbon1();
h1 {
  text-align: center;
}

svg {
  display: block;
  margin: 0 auto;
}

#ribbon2 {
  opacity: 0;
}

svg {
  fill: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <svg width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
<path id="ribbon1" class="cls-1" d="M64.5,64.5c0,15-4,19-4,31a17.23,17.23,0,0,0,10,16h28s-11-8-11-17,1-16,1-30-1-25-1-25h-26S64.5,49.5,64.5,64.5Z" transform="translate(-58.85 -39)"/>
   <path id="ribbon2" class="cls-1" d="M61,60c0,15,5.5,23.5,5.5,35.5s-6,16-6,16h28s5-4,5-13S85,76,85,62s2.5-22.5,2.5-22.5h-26S61,45,61,60Z" transform="translate(-58.85 -39)"/>
</svg>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>

You may need to make some adjustments to the paths themselves to create a more realistic effect. Below is an example applied specifically to your paths:

var svg = document.getElementById("cups");
var s = Snap(svg);

var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');

var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');


var toRibbon2 = function() {
  ribbon1.animate({
    d: ribbon2Points
  }, 1000, toRibbon1);
}

var toRibbon1 = function() {
  ribbon1.animate({
    d: ribbon1Points
  }, 1000, toRibbon2);
}


toRibbon1();
h1 {
  text-align: center;
}

svg {
  display: block;
  margin: 0 auto;
}

#ribbon2 {
  opacity: 0;
}

svg {
  fill: lightgrey;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <svg height="200" width="200">   
        <g class="anime">
     <path id="ribbon1"  d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60   h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
                fill="transparent" stroke="black" stroke-width="2"></path>
                <path id="ribbon2"  d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
                fill="transparent" stroke="black" stroke-width="2">
            </path>
        </g>
    </svg>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script></body></html>

For a detailed tutorial on creating this effect (which I referenced for my answer), it involves morphing two SVG paths into each other over time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: React - Module not found. This issue arises when attempting to require the 'express' package from within the installed

Hello, I attempted to install the express package in a React project. However, when I try to import the package inside app.js using: const app = require("express"); I encounter 30 errors all stating: Module not found Error: Can't resolve 'x&ap ...

javascriptnode.jsreactjsexpressnpm-install

I aim to place my :after content in mobile view or lower resolutions

I have a testimonial section built with HTML and CSS. You can view the demo on JSFIDDLE HERE. In the mobile view, I am facing an issue where the ":after" content is not aligning properly or appears misplaced. I'm looking for ideas to ensure that it re ...

htmlcsstestimonials

Arrange three div elements to create a layout that is optimized for different screen sizes

Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It' ...

htmlcssalignmentcenter

Preserve current color during CSS keyframe animation transitions

I am currently working on developing a dynamic 'hinting' system. I am trying to figure out a way to make an element blink using only CSS, but I'm not sure if it's even possible. In the past, I believed that you needed to define the begi ...

csscss-animations

Combining two observables into one and returning it may cause Angular guards to malfunction

There are two important services in my Angular 11 project. One is the admin service, which checks if a user is an admin, and the other is a service responsible for fetching CVs to determine if a user has already created one. The main goal is to restrict ac ...

javascriptangulartypescriptrxjs

With Crypto-JS, a fresh hash is always generated

I'm looking to integrate crypto-js into my Angular 8 application. Here is a snippet of my code: import {Injectable} from '@angular/core'; import * as CryptoJS from 'crypto-js'; @Injectable() export class HprotoService { public ...

javascriptangularcryptojs

Using trigonometry, create random orbits in multiple directions around a central point in THREE.js

I'm attempting to create a swirling motion of multiple objects around a single Vector3 point, each moving in different directions to give the effect of swarming around the center. Instead of simply wrapping each object in a Container and applying ran ...

javascript3dthree.jstrigonometry

Retrieve and manipulate the HTML content of a webpage that has been loaded into a

Hey, let's say I have a main.js file with the following code: $("#mirador").load("mirador.html"); This code loads the HTML content from mirador.html into index.html <div id="mirador"></div> I'm wondering if there is a way to chan ...

javascriptjqueryhtml

Utilizing a dictionary within an Angular controller

Currently, I am working on a complex process that involves Angular and MVC controllers interacting with a REST API to retrieve configuration items. The challenge lies in transforming this data into a usable format within the Angular controller for various ...

javascriptjsonangularjsasp.net-mvc

Capture a unique error and return a personalized response

Often, I encounter a common issue where I throw a custom error from the middlewares or services. My goal is to catch this custom error and send back a well-formatted response like the example below. { "error" : { "status":422, "message ...

javascriptnode.jsexpress

Prevent rapid flashing by adding a delay to the spinner in the jQuery Validations plugin

I'm currently utilizing the jQuery validation plugin available at http://docs.jquery.com/Plugins/validation for implementing client-side validations. For a remote validation to verify the availability of a username in the database, I intend to prolon ...

jqueryajaxspinnerclient-side-validation

What are some ways to streamline and improve the readability of my if/else if statement?

I've created a Rock Paper Scissors game that runs in the console. It currently uses multiple if/else if statements to compare user input against the computer's selection and determine a winner. The code is quite lengthy and repetitive, so I' ...

javascriptfunctionconditional-statements

Tips for aligning controls in a column using Bootstrap

My coding issue: <div class="col-lg-4"> <label>Expiration ID</label> <div class="row "> <div class="col-lg-5"> <input type="text" class="form-control input-sm" id="TextIDExpire" /> </div> < ...

htmlcsstwitter-bootstrap

What is the maximum number of groupings that can be created from a set of numbers within a

I'm trying to figure out how to handle a specific task, but I'm running into some obstacles. When adding numbers to clusters, a number is considered to belong to a cluster if its distance to at least one existing number in the cluster is within a ...

javascripttypescript

How does the search feature in Gmail function when trying to locate a previous email?

Hello all, I am new to the world of asp.net and I am currently working on developing a web application using asp.net and jQuery. My goal is to create a search functionality where users can search for records using keywords. The search function is already ...

jqueryasp.netasp.net-ajax

What are the best practices for avoiding text wrapping around a DIV?

I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help... Here& ...

htmlcssword-wrap

Complete the form to redirect to a new webpage

I'm facing an issue here, wondering how I can submit a form on one URL and another form on a different URL simultaneously... For example: form1.php: <form> <input type="text" name="name" id="name"> <input type="submit" href ...

jqueryajaxformslaravellaravel-5.3

ng-repeat does not update model when using track by

I've been facing an issue with checklist-model while working with an array of check-boxes. The problem arises when I try to delete selected items within an ng-repeat loop. Everything works fine initially, but when I add track by $index along with ng-r ...

javascriptangularjsangularjs-ng-repeat

The best method to transfer numerous objects to a web method using an ajax call

How do I send 2 objects in ajax? One object contains a list of records. I've tried the following code but it's not working. Can someone help me out? var obj = {}; obj.ChangeDetails = ""; obj.ChangeInformation = ""; obj.ChangeVersion = ""; obj.C ...

jqueryasp.netajaxwebmethod

I am having trouble retrieving the Post values that were sent using jQuery ajax

UPDATE: After removing 'index.php' with .htaccess, I encountered a newly discovered issue which I am now working on resolving. UPDATE: Issue resolved! Turns out the problem was in the Javascript code: url: "/login/". It needed a trailing slash t ...

jqueryajaxcodeigniterpost