What is the best way to make background SVGs tile seamlessly within the cells of a table?

I am currently dealing with a series of table cells that are filled with various colors and styles. The issue I'm facing is getting the styles to tile properly, as they are not seamlessly continuing from one cell to the next even if they share the same style and color.

Is there a way to resolve this problem so that neighboring cells can seamlessly tile together using an SVG? To better illustrate my concern, I have created a simple table with different styles to highlight the existing issue.

td {
  height: 25px;
  width: 25px;
}


.red {
  background-color: #ff0000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.47' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.blue {
  background-color: #505090;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23000000' fill-opacity='0.47'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.green {
  background-color: #00ff00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23000000' fill-opacity='0.47'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.pink {
  background-color: pink;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23000000' fill-opacity='0.47'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
}
<body>

<table>
  <tbody><tr>
    <td class="green"></td>
    <td class="red"></td>
    <td class="blue"></td>
    <td class="red"></td>
    <td class="pink"></td>
    <td class="green"></td>
    <td class="red"></td>
    <td class="red"></td>
    <td class="green"></td>
    <td class="green"></td>
    <td class="blue"></td>
    <td class="pink"></td>
    <td class="green"></td>
    <td class="red"></td>
    <td class="pink"></td>
    <td class="blue"></td>
    <td class="green"></td>
    <td class="blue"></td>
    <td class="red"></td>
    <td class="pink"></td>
  </tr>
  <tr>
    <td class="pink"></td>
    <td class="pink"></td>
    <td class="green"></td>
    <td class="blue"></td>
    <td class="blue"></td>
    <td class="red"></td>
    <td class="green"></td>
    <td class="red"></td>
    <td class="pink"></td>
    <td class="red"></td>
    <td class="red"></td>
    <td class="blue"></td>
    ...
  <tr>
  ...

</body>

htmlcsssvg

Answer №1

Want to create a repeating pattern in SVG for your entire table? It's a piece of cake! The pattern element allows you to fix the pattern relative to the drawing surface instead of the filled element, making tiling incredibly simple.

Alternatively, there is a convoluted method involving filters to achieve tiling across the entire table, but it's not the most efficient solution. Stick to the pattern element for an easier approach.

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

Add a background image to the parent element while preserving the existing background color

Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...

htmlcss

Sequential Element Loading using jQuery upon pageload

Can someone please explain how to achieve the effect shown on this website: http://www.getflow.com/ ? I believe that jQuery is being used to gradually adjust the opacity of each element. Is there a simple JavaScript snippet available to load each image e ...

javascriptjquerycss

The pie chart generated by Google may be small in size, but it certainly packs

Below, you will find my page layout created using Bootstrap 4 and Google Charts. The layout consists of three black boxes, with the one on the right displaying a Google pie chart. However, I'm facing an issue where the area allocated for the chart is ...

javascripthtmlbootstrap-4pie-chartgoogle-chat

Update the appearance of an element in real-time using VUEJS

I am trying to use VueJS to dynamically change the position of a div. In the data function, I have a variable called x that I want to assign to the top property. However, the code I wrote doesn't seem to be working. Here is what it looks like: <tem ...

javascriptcssvue.js

Tips for eliminating the white flash while transitioning background images with animation?

I am facing an issue with my code where the background image of the site transitions between 5 different images, but every time an animation completes and the next one starts, there's a white flash. I'm not sure how to resolve it or what I might ...

csshtmlcss-animations

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss

Navigating Google GeoChart Tooltips using Google Spreadsheet Data

My objective is to create a custom GeoChart for the company's website that will display data specific to each state in the US region based on team member assignments. The GeoChart should color states according to which team member helps that state&apo ...

javascripthtmlgoogle-sheetschartsgoogle-visualization

To apply a background color to a specific <td>, simply enter the position number into the 3rd textbox using JavaScript

I have successfully implemented three textboxes in my project. The first textbox is for entering a number as the row count The second textbox is for entering a number as the column count The third textbox is used to specify a position in the table that ...

javascripthtmlfrontendweb-frontend

Gorgeous Stew encounters a cautionary message before encountering a glitch in the middle of the

Currently, I am systematically going through every Wikipedia page related to a specific date (from January 1 to December 31). My primary focus is to extract the names of individuals who celebrate their birthday on that particular day. However, as I reach A ...

pythonhtmlbeautifulsoup

Sometimes, JQuery struggles to set input values accurately

Exploring the single page app sample provided here, I have encountered some anomalies when attempting to manipulate input controls with JQuery under certain conditions. Below is the consistent HTML structure followed by the JavaScript snippets in question. ...

javascriptjqueryhtmlbootstrap-4single-page-application

Exploring the World of Print CSS, Embracing Bootstrap, and Master

In continuation of my previous query, I am facing an issue with setting up a filemaker foreach loop to display a group of images along with their names and IDs, accompanied by checkboxes. Upon checking the relevant checkboxes, the corresponding images are ...

phphtmlcsstwitter-bootstrap-3

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

bootstrap3 container alignment

I encountered a challenge while attempting to right-align multiple Bootstrap 3 containers in a straightforward manner. Despite my efforts, achieving this proved to be more complex than expected. In essence, I faced an issue where aligning the text box with ...

csstwitter-bootstrap-3

When I open Firefox, all I see is a blank page with only the h2 heading displayed

I am trying to print the text "I can print" on a page, but only the title shows up and the rest of the page is blank. What mistake might I be making? <!DOCTYPE html> <html> <head> <title>Object exercise 4</title> </head& ...

javascripthtml

I'm looking to include a field card into the to-do table I built using .Net, but I'm not sure where I made a mistake

HTML Challenge I have set a goal to dynamically add a DOM element using JavaScript when the "Add HTML Element" button is clicked. The process involves clicking the button, which opens a modal for inputting necessary information. After fil ...

javascripthtmlasp.net-mvcdom

Is it possible to maintain child divs in a single line?

Despite trying numerous recommendations (many involving white-space:nowrap and display:inline-block), I have been unsuccessful in keeping these child divs on a single line with horizontal scrolling. This is my code: <div id="list"> < ...

csshtmlparent-child

discovering obscured information using jquery

I am working on a code snippet where I need to hide the detailed content for display purposes and only show it during printing: <div> <ul> <li> <span style="font-size: 1.25em;"> <strong> ...

javascriptjqueryhtmlcssajax

What is the best way to transform an HTML table into a jQuery array of key-value pairs?

I have an HTML table (without a tbody tag) and I am trying to convert the HTML data into key-value pairs (header-data) in a jQuery array. Currently, when I run the code snippet, the output only displays data from the last row of the table. ************Cur ...

htmljqueryarrayshtml-tablekey-value

How to create a floating <Toolbar/> with ReactJS, Redux, and Material-UI

Can anyone help me figure out how to make a toolbar floatable when scrolling down using Material-UI? I tried setting textAlign:'center', position: 'fixed', top: 0, but it's resizing strangely when applied to the <Toolbar/>. ...

javascripthtmlreactjsmaterial-ui

Issue with rendering of Outlined select label in Material UI not functioning correctly

According to the demonstration, the position of the label for a Material UI outlined select input should be at the top border of the select box. However, in my application, it seems like the z-index of the label is causing it to appear behind the top bord ...

cssreactjsdrop-down-menumaterial-ui