Illustrated GIF Dotted Line crossing through picture

Objective: I aim to have a dashed line drawn from left to right with the letter 'x' appearing at the end. The line should overlay an image like this:

https://i.sstatic.net/en2xt.jpg

I came across a similar example on codepen here.

I attempted to apply the path and dash classes to each path, but I couldn't achieve the desired effect. Should I use jQuery or CSS for this?

You can view my codepen here.

Below is the CSS snippet:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
jquerycsscss-animations

Answer №1

Make sure to include the .path class in your SVG paths. Here's a helpful snippet:

CODEPEN 

.dashed{
  stroke-dasharray: 10;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: -1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.target{
  transform: scale(0);
  transform-origin: center center;
  animation: target 0.5s linear 5s forwards;
}
@keyframes target {
  to {
    transform: scale(1)
  }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="500px" height="143px" viewBox="0 0 500 143" enable-background="new 0 0 500 143" xml:space="preserve">
<g>
<g>


<path fill="none" class="path" stroke="#74C044" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" d="M26.565,96.941
c-1.063,1.702-2.094,3.422-3.107,5.133"/>
    <path fill="none" class="path" stroke="#74C044" stroke-width="6" stroke-linejoin="round" stroke-miterlimit="10" d="
M427.313,82.577c-17.631,4.149-35.389,7.943-53.32,10.265c-13.979,1.809-28.369,2.609-42.179-0.789
c-13.539-3.332-25.266-10.732-37.272-17.511c-13.105-7.397-27.067-14.075-42.434-14.208c-16.547-0.145-31.171,7.534-44.262,16.99
c-12.877,9.301-25.034,21.473-40.702,25.904c-16.987,4.805-34.102-1.76-49.501-8.68c-18.202-8.18-38.376-21.523-59.076-21.017
c-13.246,0.324-21.792,8.483-28.671,18.342"/>
    <path fill="none" class="dashed" stroke="white" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="
M427.313,82.577c-17.631,4.149-35.389,7.943-53.32,10.265c-13.979,1.809-28.369,2.609-42.179-0.789
c-13.539-3.332-25.266-10.732-37.272-17.511c-13.105-7.397-27.067-14.075-42.434-14.208c-16.547-0.145-31.171,7.534-44.262,16.99
c-12.877,9.301-25.034,21.473-40.702,25.904c-16.987,4.805-34.102-1.76-49.501-8.68c-18.202-8.18-38.376-21.523-59.076-21.017
c-13.246,0.324-21.792,8.483-28.671,18.342"/>


</g>
</g>
<g>
<path fill="none" class="target" stroke="#74C044" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M457.573,57.77c0.282,2.831,23.33,30.967,19.774,26.554"/>
<path fill="none" class="target" stroke="#74C044" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M451.367,86.115c4.507-6.301,10.893-11.801,16.509-17.084c4.374-4.116,9.634-7.09,13.991-11.166"/>
</g>
</svg>

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

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

Retrieve or update the selected option value in a Select2 multiple dropdown

I'm currently using Select2 for multiselect on an input field. My goal is to identify which choice has been clicked, but when I inspect the event triggered upon clicking a choice ("choice-selected"), all I see is event.target.value which contains the ...

javascriptjqueryjquery-select2

Update the page with AJAX-loaded content

I am currently utilizing a .load() script to update the content on a webpage in order to navigate through the site. This is resulting in URLs such as: www.123.com/front/#index www.123.com/front/#about www.123.com/front/#contact However, I am encountering ...

javascriptjqueryhtml

problem arises when I attempt to use the code individually, as well as when I incorporate it into my existing

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>App Title</title> <!-- Framework's CSS Fil ...

jqueryhtml

Retrieving information from controller to HTML page in AngularJS

Check out my code on Plunkr: http://plnkr.co/edit/8sBafktFzFa8fCLLJgMF This is the JavaScript file: angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl&ap ...

javascriptjqueryangularjsangularjs-directive

Having trouble replacing bootstrap with external CSS

As a beginner in a coding bootcamp, I have been introduced to the world of bootstrap. While some of my friends shy away from using it for various reasons, I have no choice but to learn it in class. I've experimented with different techniques to style ...

htmlcssbootstrap-4

Decoding JSON data from an AJAX call

I'm currently facing an issue with parsing JSON data in an AJAX response within JSP. The response consists of a list of objects, and I am unable to extract individual variables from it. Below is the code snippet for reference. JsonTest.jsp <html& ...

jqueryjsonajaxjsp

What are the disadvantages of nesting CSS Grids within each other?

I have been exploring component-driven front-end frameworks like Angular and honing my skills in CSS Grid. My query is: Is it considered a bad practice to nest CSS Grids? In my main/root component, I have utilized CSS grid to create two elements: the nav ...

htmlcssangulargridcss-grid

Issue with mouseover in the jQuery area

As I navigate through a WordPress website, I am attempting to create a mandala using dynamic images. Utilizing jQuery and CSS areas, I aim to display the corresponding image when hovering over a specific section. However, I am facing an issue where there ...

javascriptjqueryhtmlcss

The function to set an attribute value in JavaScript is not reflecting in the DOM

WebSocketd is being used to send and retrieve data from STDOUT, with JS handling the message retrieval: var ws = new WebSocket('ws://ip-address:8081/'); ws.onopen = function() { document.getElementById("phone").style.background= &a ...

javascriptjquerydomwebsocket

Why does the scrollbar appear even when the inner element is smaller in CSS transformation?

Please check out this link .wrapper { width: 200px; height: 200px; padding: 10px; border: 1px solid #888; overflow: auto; } .scale { width: 400px; height: 300px; background-color: red; transform: scale(0.4); transform-origin: 0 0; transitio ...

cssgoogle-chromeinternet-explorerscrollbartransform

Encountering a cumbersome play button prior to the start of an MP4 video in an HTML5 application

Our app utilizes mp4 videos that are embedded and loaded locally. However, before the video begins playing, a large, unsightly play button briefly flashes on the screen, occupying the entire container. Is there any method to prevent this occurrence or pot ...

csshtmlvideoionic-frameworkhtml5-video

Problem with input placeholder when using text transformation

I recently created an input form and applied the CSS property text-transform: uppercase; #textbox { outline:none; background:#732ab7; caret-color:lightgreen; border-style:groove; border-width:0px 0px 10px 0px; border-top:none; ...

htmlcss

Continuously incorporating Ajax requests into a queue

I'm currently tackling a new feature at work and find myself at a crucial point. Despite being unfamiliar with Ajax, I am determined to set up a manual queue to handle the requests instead of relying on the browser. After some research and referring t ...

javascriptjqueryajax

Using jQuery.ajax and not retrieved using a GET request

I'm attempting to extract the value (adults) from a select option field using a GET request with AJAX. I am able to extract the value from the URL by displaying an alert with the URL in the jQuery function. However, I am unable to retrieve the value w ...

javascriptphpjqueryajax

What is causing the ajax request to override my existing comments with the newly submitted comment?

One thing I'm struggling with is this form that triggers a JS call when a comment is submitted: <%= simple_form_for([@video, @video.comments.new], :remote => true) do |f| %> <%= f.association :comment_title, :collection => @video.com ...

jqueryruby-on-railsrubyajaxruby-on-rails-3

Turn off the ripple effect for this element

I am looking to turn off the ripple effect on an ion-chip component, which activates when clicked: <ion-chip> <ion-label>Hey</ion-label> </ion-chip> Is there a way to accomplish this? ...

htmlcssionic-framework

Reaching a targeted audience on Internet Explorer through clever tactics or user agent manipulation

Would it be more effective to use IE hacks such as (*,\0/,/9) to target multiple IEs simultaneously or is it preferable to define user agents on the page like #ie9,#ie8? The first hack saves lines of code, but may not align with our goal of eliminati ...

htmlcssbrowser

Determine the identifier of the subsequent element located within the adjacent <div> using jQuery

I have a form with multiple input elements. While looping through some elements, I need to locate the id of the next element in the following div. You can find the complete code on jsfiddle $(":text[name^=sedan]").each(function(i){ var curTxtBox = $(thi ...

javascriptjquery

Is there a way to ensure that an inner div always stretches to the full width of the browser window regardless of its parent's width configurations and size?

Can an inner div always be made to have the width of the full browser window regardless of its parent's width settings and dimensions? Additionally, can this div be positioned at the left side of the page with a CSS property of left: 0, relative to th ...

htmlcss