Illustrating SVG links

I'm working on a basic svg animation project where I want to create a simple shape by animating a line under a menu link. The goal is to have a single line consisting of a total of 7 anchors, with the middle 3 anchors (each offset by 2) moving a few pixels up on the Y-axis.

For example, transforming this:

https://i.sstatic.net/ZzosA.png

into this:

https://i.sstatic.net/sZETx.png

I'm wondering if this is doable without using an svg animation framework, or if there's a simpler method available. Would utilizing SVG canvas and manipulating spring animations be a viable option?

I would greatly appreciate any assistance or advice on how to achieve this effect. Thank you!

javascriptjquerycssanimationsvg

Answer №1

Your inquiry is a bit vague and lacking clarity. Is this what you're looking for?

svg {
  width: 260px;
  height: 100px;
  background: #212121;
}

path {
   fill: none;
   stroke: #79b;
   stroke-width: 8px;
}
<svg viewbox="0 0 260 100">
  <path d="M0,0">
    <animate attributeName="d" attributeType="XML"
       from="M10,75l40,0l40,0l40,0l40,0l40,0l40,0;"
       to="M10,75l40,-50l40,50l40,-50l40,50l40,-50l40,50"
       dur="1s" fill="freeze" />
  </path>
</svg>

Answer №2

Here is a revised version that aligns more closely with your original request:

$('a').on({
  mouseenter: function() {
    $(this).find('.animIn')[0].beginElement();
  },
  mouseleave: function() {
    $(this).find('.animOut')[0].beginElement();
  }
})
body {
  background: #000;
}

svg {
  display: block;
  margin: 0 auto;
  position: relative;
  top: -5px;
}

polyline {
  stroke: #48B4D3;
  stroke-width: 2;
}

a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #48B4D3
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#">Link A
  <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" width="62px" height="12px" viewBox="0 0 62 12">
    <polyline fill="none" stroke-miterlimit="10" points="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5 ">
      <animate class="animIn" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,11 51,5 41,11 31,5 21,11 11,5 1,11" />
      <animate class="animOut" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5" />
    </polyline>
  </svg>
</a>

<a href="#">Link B
  <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" width="62px" height="12px" viewBox="0 0 62 12">
    <polyline fill="none" stroke-miterlimit="10" points="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5 ">
      <animate class="animIn" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,11 51,5 41,11 31,5 21,11 11,5 1,11" />
      <animate class="animOut" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5" />
    </polyline>
  </svg>
</a>

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

Automatic Full-Screen Switching Upon Video Playback in HTML5

Currently, I have a video clip set to play when the timer reaches a certain point. My goal is for the video to automatically enter full-screen mode when it starts playing and return to its original position when it stops, as the timer will continue ticking ...

javascriptjqueryhtmlcssvideo

What is the process for updating the source in an input box?

How can I use JavaScript to update the src value of an iframe based on input? <input class="url" id="url1" type="url" value="youtube url"> <input onclick="changevideo()" class="add-video" id="add-video1" type="submit" value="add to play ...

javascripthtmlcss

When attempting to retrieve data from an API in Angular 8, I encountered difficulties in dynamically creating a formArray within a formArray

I am struggling to dynamically create form controls based on the data received, specifically for fields like task and template name. Your assistance is greatly appreciated. { "items": [ { "templatename": "Defult" ...

javascriptangularangular8

Mobile device users experiencing issues with jQuery scroll up and down functionality

Currently, I am utilizing jQuery to identify when a user is scrolling the mouse wheel up or down. Below is my code: $(window).bind('mousewheel DOMMouseScroll', function(event){ if (event.originalEvent.wheelDelta > 0 || event.originalEvent ...

javascriptjquerymobile

Guide to showcasing an image on an HTML page using HTTP header

I have an HTML page with a basic layout that includes a single button. When this button is clicked, it needs to trigger an HTTP request to a specific URL while including an Accept header for GET requests. The response from the HTTP URL will vary depending ...

javascriptjqueryhtmlajax

What is the best way to retrieve ul li values using AngularJS?

I am looking to extract the content of li elements within a ul element in an AngularJS controller and save them into an array. Sample HTML Code: <ul id="list" my-directive> <li>A</li> <li>B</li> <li>C ...

javascripthtmlangularjs

Closing the JQuery login popup form by clicking on the submit button

I have successfully created a popup login form using jQuery. However, I am facing an issue where, upon clicking the submit button, the popup closes and displays an error message stating "wrong username and password". Ideally, I would like the popup form ...

phpjquerypopup

SequelizeIncludeError: unable to fetch data using the 'include' method

My database requests are handled using Sequelize.js, and I have set up a many-to-many relationship between two tables with a third junction table called polit_in_article. Let me walk you through my three tables: politician.js: module.exports = (sequelize ...

javascriptnode.jsexpresssequelize.js

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

javascripthtmlcssfademasking

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

My question is concise and to the point. Despite searching online, I have not been able to find any information on this topic. Currently, my layout consists of 3 columns: ---------------------------- |left|the-main-column|right| ------------------------- ...

javascriptjqueryhtmlcssresponsive-design

Jest - experiencing intermittent test failures on initial run, yet succeeding on subsequent runs

Writing tests with jest and supertest npm on a node server has been a challenge for me. When I try to run all the tests together, some of them fail inexplicably: However, if I selectively run only the failed tests in the terminal, they pass without any is ...

javascriptnode.jstestingjestjssupertest

Is there a way to identify when no rows contain specific values in PostgreSQL or node.js and return false?

Here is an example of a table: P Q t f f t f f In SQL, is there a way to return false when querying for t t, but true when querying for t f, f t, or f f? Should this be handled with node.js by first doing a select and then using if-else statements based ...

javascriptsqlnode.jspostgresqlselect

I am encountering an issue with the return ( statement and I'm unable to comprehend the reason behind it

import { connect } from 'react-redux' import { Link } from 'react-router-dom' class MyFavoriteStories extends React.Component { markAsFavorite = (e) => { this.setState({ bgColor: "blue" }) } render () { con ...

javascriptreactjsbuttonreduxstate

Utilizing Vue to Embed Multiple Hubspot Forms on one Page

While working on a Vue page, I encountered an issue with loading multiple Hubspot forms simultaneously. Only one form would load at a time. Here is the code snippet I used to append a single Hubspot form: mounted() { const script = document.createElem ...

javascriptvue.jsnuxt.js

Leverage the power of option values to make dynamic text edits with jQuery

I've been struggling to update the text in an option without success, here's my code: View <select id="plano"> <option selected>Choose plan...</option> @foreach($foodplans ...

jqueryajaxlaravel

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Is there a way to automatically scroll my page when the window is at a small height, instead of adjusting it to the height by squeezing it? I've tried using overflow in different ways, but haven't been successful in getting the entire page to scr ...

css

Guide on building a "like" button using a Node.js Express application

I am in the process of developing a website using node, express, and mongodb. I am facing an issue with passing a variable value from my ejs file to the server side. Can someone help me solve this problem? Here is what I have attempted so far: Example Ht ...

javascriptnode.jsmongodbexpress

Unable to locate the root element for mounting the component in Cypress with React

I am currently testing my react app, which was created using create-react-app, with the help of cypress. Unfortunately, I encountered an error that looks like this: https://i.stack.imgur.com/xlwbo.png The error seems to be related to trying to fetch an ...

javascriptreactjstestingwebpackcypress

Turn off images using Selenium Python

In order to speed up the process, I believe that disabling images, CSS, and JavaScript can help since Webdriver waits for the entire page to load before moving on. from selenium import webdriver from selenium.webdriver.firefox.firefox_profile import Firef ...

javascriptpythoncssseleniumselenium-webdriver

Get rid of the unnecessary vertical line that is located at the end of the string

I have come across a situation similar to the one demonstrated in this code snippet: http://plnkr.co/edit/eBjenGqgo3nbnmQ7XxF1?p=preview Currently, I am working with AngularJS 1.5.7. The directives used in my input - ( first ) textarea are the same as tho ...

javascriptangularjsregex