Exploring the possibilities with stroke-dashoffset

I am working on animating an arrow and I discovered that CSS keyframes and SVG can help achieve this effect.

My goal is to animate the drawing of an arrow from 0 to 100%. The path I have for this arrow is:

 <path class="showUp" fill="#4C9FDC" stroke="#000000" stroke-width= "0" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

To animate the arrow with a stroke, I have set up the following keyframes:

@keyframes Arrow {
 from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}


.showUp {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: Arrow 5s linear forwards;
}

CodePen Link

However, the animation is not working as expected. Any suggestions on what I might be doing wrong? Thank you!

csssvgcss-animations

Answer №1

Creating line drawing animations can be done in a variety of ways:

  1. One method involves adjusting the stroke-dashoffset parameters from the maximum value to zero, effectively erasing the line: 

body{
  background-color: #272727;
}

@keyframes Arrow {
 from {
    stroke-dashoffset: 196;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes Arrow_Fill {
 from {
    fill: #d3d3d3 ;
  }
  to {
    fill: #FF0000;
  }
}

.showUp {
  stroke-dasharray: 196;
  stroke-dashoffset: 196;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards;
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  <path class="showUp" fill="#4C9FDC" stroke="#FF0000" stroke-width= "4" stroke-linecap="round" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

</svg>

  1. Another way is by modifying the stroke-dasharray parameters to create different line styles and effects:
@keyframes Arrow {
 from {
    stroke-dasharray: 0,196;
  }
  to {
    stroke-dasharray: 196,0;
  }
}


body{
  background-color: #151515;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 0,196;
  }
  to {
    stroke-dasharray: 196,0;
  }
}
@keyframes Arrow_Fill {
 from {
    fill: #4C9FDC ;
  }
  to {
    fill: #AAD000;
  }
}

.showUp {
  stroke-dasharray: 0,196;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  <path class="showUp" fill="#4C9FDC" stroke="#AAD000" stroke-width= "2" stroke-linecap="round" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

  1. A more advanced technique involves drawing two lines from a single midpoint: 

body{
  background-color: #151515;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 0,98 0,98 ;
  }
  to {
    stroke-dasharray: 0,0 196,0;
  }
} 

@keyframes Arrow_Fill {
 from {
    fill: #4C9FDC ;
  }
  to {
    fill: #AAD000;
  }
}


.showUp {
  stroke-dasharray: 0,98 0,98;
  stroke-dashoffset:75;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">

  

  <path class="showUp" fill="#4C9FDC" stroke="#FF0000" stroke-width= "2"  d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53...

  1. To achieve a dotted line effect, utilize animations with masks:

.container{

  background-color: #151515;
  width:100vw;
  height:100vh;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 196,0;
  }
  to {
    stroke-dasharray: 0,196;
  }
} 


.showUp {
  stroke-dasharray: 196,0;
  stroke-dashoffset:75;
  animation: Arrow 4s linear forwards;
}
<div class="container">

   ...Rest of the content omitted for brevity...

</div>

Answer №2

You may have already discovered how to achieve your desired result, but I've put together a functional codepen for you to see. To make the stroke animation visible, I had to remove the fill of the arrow by setting it to "transparent."

I adjusted the stroke-dasharray and stroke-dashoffset values until I was happy with the outcome, but using JavaScript, as suggested by @enxaneta, would provide a more robust solution. If you'd like a deeper understanding of how SVG line animation functions in general, check out this informative article on CSS-Tricks.

If you're curious about animating the fill attribute, there are some helpful examples in this thread.

I hope this information proves useful to you as you explore the world of SVGs!

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

Can we define a style or CSS for one element depending on the characteristics of another element?

One challenge I'm facing involves a 3rd party library (fullcalendar) that automatically sets the height of elements based on internal calculations to ensure they look good in any viewport: <div style="height: 72px;"> Unfortunately, not all ele ...

htmlcss

Choosing a dropdown option with a CSS Selector

Here is the code snippet I am currently working with: import org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.o ...

cssseleniumautomation

Designing a drop-down menu that appears visually above its parent

As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...

htmlcssdrop-down-menunegative-number

Incorporating JQuery UI sortable functionality with the CSS grid display property to create a

I'm currently working on creating a sortable CSS grid using jQuery UI. $( function() { $( "#sortable" ).sortable({ handle: "handle" }); }); gridHolder{ display:grid; background:tan; grid-template-columns: ...

jquerycssjquery-ui

Hiding scrollbars in a component: The ultimate guide

I am seeking a way to completely hide scrollbars from an HTML component using CSS styles within a VueJS component. I have tried the solution of using overflow-y: hidden; within the component as well as within a specific subclass in the CSS, but neither com ...

htmlcssvue.jsvue-component

Is it acceptable to utilize the "sticky-top" class in a mobile-friendly navigation bar?

I'm facing an issue with implementing the Sticky-top function on a navbar within a Django project. The navbar is responsive and can be expanded by clicking a button, but I want it to remain fixed at the top when the user scrolls down. Currently, I am ...

cssbootstrap-4

Ways to connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS. Instead of using :hover, I utilize :focus ...

htmlcsshyperlinkfocustabindex

What is the best way to incorporate a PHP/JavaScript photo gallery into a page on an HTML/CSS website?

I recently discovered Minishowcase, a free photo gallery software that I downloaded from . The gallery itself functions perfectly as its own website, but I am struggling to figure out how to integrate it into my existing site, which is primarily coded in C ...

phpjavascriptcssembed

Fashion Initial Character Of Each Word In Passage

I'm attempting to style the first letter of each word in a paragraph using CSS and was looking to incorporate some animation with greensock. However, the actual requirement is to style the first letter of each word, not just the first letter of the pa ...

javascriptjqueryhtmlcss

jQuery mobile enhancing user experience with dynamic background images

I am having trouble setting different background images for each page in jQuery Mobile. <div data-role="page" id="pageone">... </div> <div data-role="page" id="pagetwo">... </div> Since each page has a unique ID, I tried ...

javascriptjqueryhtmlcssjquery-mobile

Converting a list of strings into dynamic, interactive displays

My search engine function retrieves an array called 'articles' which contains different articles. However, I want to enhance the design to resemble more of a Twitter news feed layout. Additionally, I would like to implement a feature where users ...

pythoncsspython-3.xuser-interfaceplotly-dash

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

I am facing a dilemma where React Native seems to be disregarding all the container styles I

Here is the code snippet I am working on: import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; export default class ShortcutsHome extends React.Component { render() { return ( ...

javascriptcssreactjsreact-nativerendering

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

csshtml

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: https://i.sstatic.net/WR55a.jpg Managed to get it done using position absolute and @media screen for image size and padd ...

htmlcsstwitter-bootstrap-3flexboxdisplay

CSS Code Failing to Adjust Inner Components Width in Variable Table

I'm facing an issue while trying to create an excel-style table using HTML and CSS. The problem arises when I attempt to have a varying number of columns in different rows, as the table exceeds the border limit and expands on its own. My goal is to re ...

javascripthtmlcss

Tips on adjusting the scrollbar color with CSS

Check out my jsfiddle here I am attempting to modify the color of the scrollbar, but unfortunately it is not working as expected. This is the CSS code I am using: .flexcroll { scrollbar-face-color: #367CD2; scrollbar-shadow-color: #FFFFFF; ...

css

Material UI - Utilizing multiple CSS classes within a unified global theme

Exploring the world of Material UI within React for the first time has been an exciting journey. I am currently looking to customize my global theme, specifically targeting two classes: .MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover { ...

cssreactjsmaterial-ui

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext

Can someone help me convert this image into HTML/CSS code? I'm completely lost on how to do this and don't even know where to start searching for answers. Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Generate an unspecified number of columns

Imagine having a list of items like the following: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <l ...

css