Cutting diagonally through a text along the trajectory of an SVG line

Is it feasible to have diagonal text cutting effect when an svg line overlaps with the text? Below is the code snippet and a visual representation of the desired outcome.

<!DOCTYPE html>
<html>
<head><title></title>
<style type="text/css">
h1{
position: absolute;
top:0;
left: 10px;
}
</style>
</head>
<body>
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2">
<animateTransform attributeName="transform"
      type="translate"
      values="200 200;-150 -150;200 200"
      begin="0s"
      dur="5s"
      repeatCount="indefinite"
    />
</line>
</svg>
<h1>OUR<br>WORK</h1>


</body>
</html>

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

htmlcssd3.jssvgsvg-animate

Answer №1

A completely SVG-based version is presented here.

<html>
<head><title></title>
<style type="text/css">
h1{
position: absolute;
top:0;
left: 10px;
}
</style>
</head>
<body>
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2">
<animateTransform attributeName="transform"
      type="translate"
      values="200 200;-150 -150;200 200"
      begin="0s"
      dur="5s"
      repeatCount="indefinite"
    />
</line>
    <defs>
      <clipPath id="clip1">
         <polygon points="0, 0 200, 200, 0, 200"/>
      </clipPath>
      <clipPath id="clip2">
         <polygon points="0, 0 200, 0, 200, 200"/>
      </clipPath>
    </defs>
    <text x="0" y="42" font-size="33px" font-weight="bold" clip-path="url(#clip1)">OUR<tspan x="0" dy="36">WORK</text>
    <text x="4" y="38" font-size="33px" font-weight="bold" clip-path="url(#clip2)">OUR<tspan x="4" dy="36">WORK</text>
</svg>
</body>
</html>

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

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

javascriptjqueryhtmlcsshtml5boilerplate

Tips for creating a dynamic curved SVG path

I'm looking to draw a black border only along the inside of this SVG. I've tried adding stroke and setting the stroke-width, but that applies the border to the entire SVG. Is there a way to limit the stroke to a certain point within the SVG? d ...

javascripthtmlsvgpath

The presence of double quotes in stringified JSON is undesired

I am currently working on a weather forecasting website where the API returns pure JSON data. However, when I convert this data to a string and add it to an element in order to display it on the webpage, I encounter a problem with double quotes appearing. ...

javascriptjqueryhtmljsonstringify

Exploring the World of Images with Javascript

I'm currently working on creating a slideshow using HTML and JavaScript. My goal is to have the image change each time I press a button that I've established (see code below). After reviewing my code multiple times, I still can't figure out ...

javascripthtml

What is the best way to limit the length of text in a div if it surpasses a

As I work on a website, users have the ability to add headings to different sections of a page. For example: M11-001 - loss of container and goods from Manchester Some headings can be quite detailed, but in reality, only the first few words are needed to ...

javascriptcssxhtmltexthtml

How to use CSS to align a link vertically next to an image

UPDATE: Apologies for the duplicate post, I am still learning the ropes of CSS. However, I would appreciate it if someone could shed light on why aligning the image is preferable to aligning the link or text. Is there a broader concept in play here that ...

csshtmllayout

Exploring the object tag box model and its properties for width and padding in Firefox version 6

Hey there, I've been puzzled by the fact that my Firefox browser seems to be using a different box model for my video embeds compared to Chrome. Even though the same CSS rules are being applied, if the object tag includes attributes like data="whateve ...

firefoxobjectpaddingcss

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

htmlcssdjangodjango-staticfiles

Selenium Python can be used to save a web page as a

Trying to print a webpage as a PDF with headers and footers to mimic the output from Google Chrome. Any suggestions? Experimented with PhantomJS but couldn't get it to include headers and footers. from selenium import webdriver import selenium def ...

pythonseleniumpdfhtml

JavaScript and HTML code for clipboard functionality without the need for Flash

My challenge lies in creating a grid with numerous columns and data. The user has expressed the desire for a copy to clipboard button that will allow them to easily copy the data. Can anyone suggest ways to implement Copy to Clipboard functionality withou ...

javascriptjqueryhtmlclipboard

Sometimes onblur is triggered repeatedly, other times it doesn't fire at all

Currently, I am developing an interactive web application that is accessible at (login: [email protected], password: demo). This application allows users to move items from the left column to the workspace on the right, where they can resize and edit ...

javascriptjqueryhtmlcss

Personalize the hover effect and underline style of links in material-ui

I am currently delving into the world of material-ui custom styles and came across this helpful resource. However, I find myself a bit lost in how to properly override the classes using withStyles. <Breadcrumbs aria-label="breadcrumb" separator=" ...

cssreactjsmaterial-ui

What are some ways to achieve a smoother hover effect?

.proposal p{ font-size: 14px; color: #494949; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 20px; max-height: 100px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .proposal: ...

htmlcss

keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy! I'm looking to have each button change color when clicked, and stay that way until another link is clicked. Here is the c ...

jqueryhtmlcsscolors

Gathering information from a website by using BeautifulSoup in Python

When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...

pythonhtmlweb-scrapinghtml-parsingbeautifulsoup

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code- ...

cssangularangular-materialmaterial-design

Using jQuery to animate content that is displayed below an element to move up and down when the element is opened

I’m having an issue with my webpage... Whenever a visitor clicks on the text input in the chat area, I want the chat to open up. It does open, but I can't seem to figure out how to move the content below it up and down as it opens and closes. Right ...

jqueryhtmlcss

Is there a way to prevent this JavaScript code from deleting the initial row of my table?

Looking at the code provided, it's evident that creating and deleting new rows is a straightforward process. However, there seems to be an issue where the default/origin/first row (A-T) gets deleted along with the rest of the rows. The main requiremen ...

javascripthtml

Previewing the small version, loading the URL into a container

Currently, I am working with jQuery's .load(url, ...) function to bring in a url and display it within a div. However, I am facing an issue where the result needs to be resized in order to fit correctly within the layout. Can anyone provide guidance o ...

javascriptjquerycss

Increase the identification of HTML element with jQuery

I've encountered an issue while trying to increment the id of 2 HTML elements, hwAddition and itemNumber, upon a button click event. The HTML code in question is as follows: <div id="hwAddition"> <div id="itemNumber" s ...

javascripthtmljquery