How can I create multiple vertical lines in an SVG format?

How can I achieve an effect similar to this https://i.sstatic.net/ulZFR.png?

I have attempted using strokeDashoffset and strokeDasharray, but I am still unable to achieve the desired result. I know that I can draw multiple lines, but I need a script that will fill these lines.

Does anyone have any ideas on how I can create them? Thank you!

I'm not sure if this is necessary, but here is what I have tried:

<svg id="edilRW8EQ5h1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 54 12.5" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">                              
<path strokeDasharray="10, 10" strokeDashoffset="10" pathLength="500" d="M0,6.25h54v2.134695h-54L0,6.25" fill="white" stroke="#3f5787" stroke-width="0.5"/>
</svg>

htmlcsssvg

Answer №1

This design resembles a <pattern>. In this example, the pattern is applied to a <rect> element while also using a mask on the same <rect>. The gradient within the mask determines the level of whiteness.

It has a visual similarity to a meter. The gauge's "value" can be adjusted by changing the values of the stop elements in the gradient (currently set at 76%).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 8">
  <defs>
    <pattern id="p1" viewBox="0 0 6 10" width="5%" height="100%">
      <path transform="translate(4 0) rotate(10)" d="M 0 0 V 10"
        stroke-width="4" stroke="white" stroke-linecap="round"/>
    </pattern>
    <linearGradient id="g1" gradientTransform="rotate(1.5)">
      <stop offset="0" stop-opacity=".2" stop-color="white" />
      <stop offset="76%" stop-opacity="1" stop-color="white" />
      <stop offset="76%" stop-opacity=".2" stop-color="white" />
      <stop offset="100%" stop-opacity=".2" stop-color="white" />
    </linearGradient>
    <mask id="m1">
      <rect width="50" height="8" fill="url(#g1)"/>
    </mask>
  </defs>
  <rect width="50" height="8" fill="black"/>
  <rect width="50" height="8" fill="url(#p1)" mask="url(#m1)"/>
</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

When previewing a card on Twitter's validator tool, the image displays properly. However, when attempting to share the image on

Below is the code that I have written on my HTML page: <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@name" /> <meta name="twitter:title" content="Twitter - image share" /> <meta name="twi ...

htmltwittermeta-tagstwitter-card

"Using jQuery to trigger a click function on elements with the same

Whenever I click the comment link all of the divs are opening but i need that particular only to be opened. HTML: <div> <a href="#" class="ck">comment</a> <div class="cmt"> <input type="text" class="txt"/> ...

jqueryhtml

What is the best way to guide a user to a specific page based on the choice they made after submitting a form?

My form includes a list of 6 options where users can only select one. After submitting the form, I want to redirect them to a specific page based on their selection. For example, I have the following 3 options: Facebook Youtube Twitter If a user selects ...

javascripthtmlcssjss

How can I create a CSS animation for a box element?

During my current project, I have the task of creating a box that will display an animation within 2 seconds and move from one corner to another. What is the most straightforward way to achieve this? ...

css

Modify the input value when using the get_search_form() function in Wordpress

After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...

csswordpressinputsubmit

Utilizing the Bootstrap grid system allows for input fields to automatically expand to 100% width once they reach

I am encountering some challenges while attempting to develop a responsive form using bootstrap grids. The issue seems to arise when resizing the browser window, as the grid classes behave unexpectedly by expanding and taking up the entire page width at ce ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

Transferring the dirty state of the view to the parent form

Within my main form's markup, there is a specific structure that includes a tabset and a selectView method in the controller: <tabset vertical="true" type="pills"> <tab ng-repeat="tab in tabsViews" sele ...

javascripthtmlangularjscontroller

Validation of forms using Javascript

I currently have an HTML form with JavaScript validation. Instead of displaying error messages in a popup using the alert command, how can I show them next to the text boxes? Here is my current code: if (document.gfiDownloadForm.txtFirstName.value == &ap ...

javascripthtmlforms

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tables inserted via ckeditor do not preserve the style attribute

After incorporating ckeditor into my web page along with the table plugin, I noticed that sometimes the width of tables created in the editor window extends beyond the boundaries of the webpage when displayed. To address this issue, I made some adjustments ...

javascriptcsshtml-tableckeditor

Developing play and pause capabilities using JavaScript for the existing audio player

Currently, I am developing a Chrome extension that includes an HTML popup with buttons to play audio files. However, I feel that my current approach is not the most efficient and I am struggling to find ways to simplify the process. The method I am using n ...

javascriptjqueryhtmlaudiogoogle-chrome-extension

Implementing overflow-x: hidden in React JS for enhancing mobile user experience

In my current React project, I encountered an issue where setting overflow-x: hidden in the index.css file for the body tag worked fine on desktop screens but not on mobile. I read that adding it to the parent element would be a better solution, however, ...

htmlcssreactjs

What are some ways to enhance the specificity of HTML parsing code?

I'm currently facing a challenge where I need to extract hrefs and titles from an HTML page while only focusing on a tags that have both attributes. Some of the a tags do not have a title attribute. How can I modify my code to only display data from t ...

phphtml

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Having trouble with the contact form sending emails

My contact form box seems to be having trouble directing the mail to my email. When I hit the send message button, it just refreshes the page in a continuous loop. <div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s"> <h1>I ...

htmlcss

Issue: Stylesheet not being loaded on Index.html through Gulp

Issue The .css file is not being loaded by the index.html despite setting up a gulp.js file. It seems like the folder directory might be causing the problem. However, the .scss files in the /src/scss folder are compiling correctly into CSS within the /bui ...

htmlcssnode.jssassgulp

Ways to align two divs side by side using CSS and HTML

Here is a question that needs solving: I have two elements that need to be displayed in one row at a specific ratio, with the same pattern repeating in subsequent rows. However, the content of the next row is appearing in the unused space of the previous r ...

htmlcss

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

jqueryhtmlcsstwitter-bootstrap