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:

into this:

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

An error has occurred: Noty (notification library) is not defined in this AngularJS Web Application

I am currently diving into the world of AngularJS and building a web application from scratch. As a newbie to AngularJS, I want to point out that I might be missing something crucial. An issue has arisen: After installing the Noty library (npm install no ...

javascriptangularjsnpmdefinednoty

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

htmlcsstwitter-bootstrapbootstrap-4

Remove an element from an array within objects

Need help with removing specific items from an array within objects? If you want to delete all hobbies related to dancing, you may consider using the splice method const people = [{ id: 1, documents: [{ ...

javascriptarraystypescriptobjectsplice

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

javascriptjqueryhtml

What is the best way to determine which section of a promise chain is responsible for an error in Javascript?

(Please excuse any errors in my English) I am currently studying JavaScript promises. Below is a simple JavaScript code snippet for node.js (using node.js version v10.0.0) that asynchronously reads and parses a JSON file using promise chaining. const fs ...

javascriptnode.jses6-promise

Utilizing the power of Scoped CSS with Bootstrap/Bootstrap-Vue Integration

I'm currently working on a chrome extension and utilizing Bootstrap-Vue in my Vue files. I have imported bootstrap/bootstrap-vue into my js file, but the styling is being applied globally. Is there a way to scope the Bootstrap only onto specific inser ...

cssvue.jsgoogle-chrome-extensionbootstrap-4bootstrap-vue

An easy way to attach a Contextmenu to a specific element

I have implemented a scrolling feature for one of the div elements in my Application. Inside this div, there is a templated table with over 100 rows. Users are able to add or delete rows using a contextMenu. The contextMenu offers 4 options - AddTop, AddB ...

javascripthtmlcss

How many logical lines of code are in the Ubuntu operating system?

As I develop my web application, it is crucial for me to track the lines of code written in languages such as php, css, html, and JavaScript specific to the /var/www directory. However, when using the command line code counter tool, I find myself tempted ...

phpjavascripthtmlcssubuntu

What does the error message "TypeError: Bad argument TypeError" in Node's Child Process Spawn mean?

Every time I execute the code below using node: var command = "/home/myScript.sh"; fs.exists(command, function(exists){ if(exists) { var childProcess = spawn(command, []); //this is line 602 } }); I encounter this error: [critical e ...

javascriptnode.jsexpress

Arranging an array of objects in Javascript based on the first attribute, and in cases of equality, sorting with another attribute

I have an array structured like this: let myarr = [{id:1 , name: "mark" , birthday: "1990-08-18"}, {id:2 , name: "fred" , birthday: "1990-08-17"}, {id:3 , name: "franck" , birthday: "1990-08-16"}, ...

javascripttypescriptecmascript-6ecmascript-5

Fluctuating Values in Array Distribution

I have a set of users and products that I need to distribute, for example: The number of values in the array can vary each time - it could be one value one time and three values another time. It is important that each user receives a unique product with ...

javascriptarraysloopsdistribution

Is it permissible to utilize the ::Before::Before element?

While working on a CSS file for a page with a non-editable profile, I encountered the challenge of not being able to add content directly. This limitation prompted me to explore alternative solutions. My idea was to utilize the page ID and incorporate it ...

css

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

Unable to display MongoDB collection in React application

I've been working on showcasing my projects using React and Meteor. I have two collections, Resolutions and Projects. The issue I'm facing is that while I can successfully display the Resolution collection on the frontend, I'm struggling to ...

javascriptmeteorreactjscollections

Encase a group of div elements with identical styling

Looking for a solution on how to programmatically wrap a set of divs with a parent div based on a certain class match. Any suggestions or ideas on how to achieve this? ...

jqueryhtmlcss

Is there a way to automatically interpret and analyze a gruntfile in order to make changes to it and then resave it?

I'm working on a intricate Yeoman Generator and I'm in search of a solution to parse an existing gruntfile. If anyone knows a JavaScript method for parsing a gruntfile, your assistance would be greatly appreciated. ...

javascriptnode.jsgruntjsyeomanyeoman-generator

Tips on identifying the method to import a module

Currently, I am including modules into my Node project like this: import * as name from "moduleName"; Instead of the old way: var name = require("moduleName"); In the past, we used require in Node projects. My question is, is there a difference in ...

javascriptnode.jsexpressecmascript-6es6-module-loader

Animating the height with jQuery can result in the background color being overlooked

For those curious about the issue, check out the JSFiddle. There seems to be an anomaly where the background of the <ul> element disappears after the animation on the second click. Oddly enough, even though Firebug shows that the CSS style is being a ...

jqueryhtmlcssjquery-animate

How come characteristics of one particular div element are transferring to unrelated div elements?

Recently, I created a small practice website and encountered an issue that is quite frustrating. Here's the div structure I used: <div class="work-process"> <div class="container" align="center"> <div class="col- ...

htmlcss

Yarn combined with Webpack fails to execute post-compilation tasks

When using yarn and running yarn prod, I encountered the following error: https://i.stack.imgur.com/2emFk.jpg It seems to be stuck at this particular part of the code: mix.then(() => { execSync(`npm run rtlcss ${__dirname}/Assets/css/admin.css ${__dir ...

javascriptnpmyarnpkg