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

Experience a glint in the React Suspense with React Router - Struggling with CSS properties post utilizing Suspense and Lazy

I'm experiencing an issue with my code where the CSS properties are not working properly when I wrap the code in suspense. The page loads and the suspense functions as expected, but the styling is not being applied. However, if I remove the suspense, ...

cssreactjsreact-routerreact-suspense

Enable a single column to scroll until the content is fully displayed, and then stay in a fixed position

My HTML content consists of two columns, with the first column being a sidebar that should have limited content. The second column holds the main content and can span several pages. The desired functionality is for the first column to scroll until the end ...

htmlcss

Using z-index to overlay a background image with transparency

I'm attempting to make a partially transparent div with text on top. My approach involves creating a parent tag with relative positioning. I have one child span with transparency set using the class .body-content-background and another child containi ...

htmlz-index

Alteration in relational shift of division placement

My webpage is divided into three sections with the following proportions: 15% - 65% - 20% In the right section, there is a div with the ID alchemy. I want to set the height of this div using <div style="height:150px;">. However, when I set the heig ...

jquerycss

Data modifications in polymer are not being accurately displayed

I need help with hiding/unhiding a UI element using a button in Polymer. Despite having the necessary elements and code set up, it is not working as expected: <button id="runPredictionButton"> <i>Button text</i> </button> <p ...

htmlnode.jspolymerpolymer-1.0

Fade out with CSS after fading in

After setting an animation property on an HTML element to display it, I want the same animation in reverse when a button is clicked to hide it. How can I achieve this effect? "Working Animation": .modal { animation: myAnim 1s ease 0s 1 normal fo ...

htmlcss

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

javascriptcssreactjsnext.jscss-transitions

Tips for keeping your button fixed in place

I am encountering an issue where my button moves below the select dropdown list when I try to make a selection. Is there a way to keep the button in place even when the dropdown list from the select box is visible? For reference, here is the current outp ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Optimal method for streaming and viewing an mkv video captured with ffmpeg in a web browser

Is there a way to stream a video recorded with ffmpeg in a web browser using the HTML5 video tag? I currently have this code on my page, with the URL pointing to a video file (example.mkv) being recorded by ffmpeg. <video class="video-player" controls ...

htmlffmpegvideo-streaminghtml5-video

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

Request to Create Centered Date Element with Line Borders I am looking to design an element where the date is positioned at the center, while two horizontal lines fill the empty space on either side. Ideal Design I Want to Achieve: My Current Approach a ...

htmlcss

Tips for avoiding word wrapping in text with white spaces

I am currently experiencing an issue with word-wrapping in my category names when there are two words separated by a space. Below is the CSS code snippet: .post-item .cat { height: 25px; display: inline-block; background: #CC0000; font-size: 11px; paddin ...

css

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui

Switching between pages, displaying new content within a div without changing the URL address

I have experience working with the Ajax/jQuery .load() or php include() functions to load additional content into a div on a web page. Please check out this example I've created: my website featuring page transitions The setup for this page involves ...

phpjqueryhtmltransition

What is the best way to wrap text and move the lines up without affecting the bottom margin?

When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect? The use of "word-wrap" causes the line to break and move to the next line, which is not what I want. In the code sn ...

htmlcsswebsass

The navigation bar appears to have a different width on mobile view specifically on one page

I created a mobile view navigation that appears correctly on two out of three pages. It spans the full 100% width as intended, but on one page it extends beyond that and causes the layout to look distorted due to the larger navigation bar. I'm not sur ...

htmlcss

Unveiling Elements as You Scroll Within a Specified Area

I have implemented a jQuery and CSS code to reveal my contact form as I scroll down the page. However, I am facing an issue with setting a specific range for displaying the element while scrolling. Currently, I have only managed to handle the scrolling dow ...

javascriptjquerycsswordpress

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

Error in browser caused by JQuery JavaScript, not Dreamweaver

I need help creating a webpage that can extract and display recent earthquake data based on user input location on Google Maps. I have been using Dreamweaver to test my code, and everything functions perfectly when I use the live webpage feature within th ...

javascriptjqueryhtmlajaxjson

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...

cssangulartwitter-bootstrap

Saving data from Material UI forms in TypeScript

Is there an effective method for storing values entered into the text fields on this page? const AddUserPage = () => ( <div> <PermanentDrawerLeft></PermanentDrawerLeft> <div className='main-content'> < ...

javascripthtmlreactjstypescriptmaterial-ui