Organizing SVG elements for a unique backdrop

I have been struggling to organize three SVG images for a responsive background. I attempted using CSS with properties like z-index, position-absolute, left 60vw, and top -50vh on each image but encountered issues when resizing the browser.

z-index: -1;
position: absolute;
left: 60vw;
top: -50vh;

<div>

  <svg class="circ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 593.13 593.13">
    <path
        id="Path_1"
        data-name="Path 1"
d="M296.565,0C460.353,0,593.13,132.777,593.13,296.565S460.353,593.13,296.565,593.13,0,460.353,0,296.565,132.777,0,296.565,0Z"
        fill="#f16161"/>
  </svg>
  <svg class="rightTri" xmlns="http://www.w3.org/2000/svg" width="1235" height="980" viewBox="0 0 1235 980">
  <path id="Polygon_1" data-name="Polygon 1" d="M617.5,0,1235,980H0Z" fill="#81ecb7"/>
  </svg>


  <svg class="topLeftTri" xmlns="http://www.w3.org/2000/svg" width="1490.697" height="1398.557" viewBox="0 0 1490.697 1398.557">
    <path id="Polygon_3" data-name="Polygon 3" d="M264.738,73.677c2.846-15.239,24.677-15.239,27.524,0L553.9,1474.429A14,14,0,0,1,540.143,1491H16.857A14,14,0,0,1,3.1,1474.429Z" transform="translate(1490.697 978.184) rotate(131)" fill="#81ecb7"/>
  </svg>

  <svg class="bottomLeftTri" xmlns="http://www.w3.org/2000/svg" width="1533.641" height="1327.01" viewBox="0 0 1533.641 1327.01">
    <path id="Polygon_2" data-name="Polygon 2" d="M278.5,0,557,1491H0Z" transform="matrix(0.588, 0.809, -0.809, 0.588, 1206.244, 0)" fill="#81ecb7"/>
  </svg>

</div>

This is what my intended creation looked like:

https://i.sstatic.net/o8SyR.png

htmlcssbackground

Answer №1

For those interested, here is a CSS-only solution:

html {
  min-height:100%;
  
  background:
    radial-gradient(circle     at calc(70% - 40px) calc(35% - 40px),#f16161 8px,transparent 9px),
    conic-gradient(from -60deg at calc(70% - 40px) calc(35% - 40px),#81ecb7 0deg 30deg,transparent 30.2deg),
    radial-gradient(circle     at 70% 35%,#f16161 80px,transparent 81px),
    conic-gradient(            at 70% 35%,#1d2534 30deg,#81ecb7 31deg 90deg,#1d2534 90.1deg 220deg,#81ecb7 220.05deg 240deg,#1d2534 240.1deg);
}

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

Resizing images next to lengthy text on mobile screens

My text and image keep behaving oddly when viewed in a smaller window or on mobile. The image resizes unpredictably based on the length of the text, as shown in my preview. I attempted to use flex wrap to contain the longer text, but it only pushed the ima ...

cssimageflexbox

Preventing value alteration when input is blank

I recently wrote this code snippet for a form I was designing: <div class="col-md-6"> <label class="labels">Birthday:</label> <input method="POST" name="birthdate" class="form-contro ...

javascriptpythonhtmldjango

Create a JavaScript function that generates 100 evenly spaced steps within a given range

I have been struggling to generate steps of 100 between two values, -0.1 and 0.1. Despite trying various methods, I have not yet achieved success. In this code snippet, there is an input range: $('#slider').change(function(){ var val = ($( ...

javascripthtmlangularrange

Tips for aligning a single iframe with two other iframes

I have a total of 3 iframes: iframe_top, iframe_left, and iframe_right. My goal is to display the two iframes iframe_left and iframe_right side by side. In addition, I want the iframe iframe_top positioned above them in a way that aligns the left border ...

htmlcssiframe

Guide to integrating a legend with ngb-timepicker form?

Is there a way to add a specific tag to the fieldset of ngb-timepicker? I'm having trouble finding a solution for this. Has anyone else tried to do this before? ...

htmlangularlegendtimepicker

Ensure that the header remains fixed to the top of the page

How can I keep my header at the top of the page instead of in the middle? `header { position: sticky; top: 0; } <!--body { display: flex; justify-content: center; align-items: center; } h1 {font-family: sans-serif;} h1 {text-align: centre; ...

htmlcssheader

Inquiry about CSS3 transitions

Exploring the world of transitions in webkit. Currently experimenting with transitioning the dimensions of a div on hover and observed that the width is animated from the top and left of the div....but ideally, I want it to expand from the center of the ...

css

How to retrieve the background color of text on a webpage

My website features both primary and secondary search options. When a search term is entered, the website highlights the first term in blue and the second term (or "search within" term) in purple. This highlighting is typically done using java script on t ...

javacssseleniumautomationselenium-webdriver

If an element with a "hidden" display property is loaded in the browser window, will it be visible?

Is an element in a hidden display still using memory when the page is loaded? It's convenient to have many elements on a page, but if 99 elements are hidden and only 1 is displayed, does that impact the loading of the page? I'm curious if the pa ...

javascriptcss

Inconsistency in column widths

I'm attempting to recreate the layout of this table. https://i.sstatic.net/ryKno.png However, I am struggling to create uneven column widths for each td without breaking the structure of my table. Here is the code that I am using: <div class="Ce ...

htmlcssasp.net

Positioning a div beside another div without containing it

Check out the snippet below. I am looking to vertically center an element, 'modal', over another div, 'element', regardless of its position or margins. However, I cannot place the 'modal' div inside the 'element' di ...

javascripthtmlcss

JavaScript: Populating an Array with Image URLs Using a Loop

My image gallery project has hit a roadblock and my JavaScript skills are not up to par. Maybe it's time to brush up on the basics with a good book from the library. Here's what I want to achieve: 1. Create an array of URL's for each imag ...

javascripthtmlarraysimagefor-loop

Angular 6 is showcasing dates in a quirky manner

In my Angular app, users can enter comments. The comments are displayed automatically with the date they were added. However, there is an odd behavior that I've noticed: When a user enters a comment, the time displayed is incorrect. (Check the ...

javascriptangularhtmltypescripttimeago

What could be causing my function to fail to execute during a keydown event in native JavaScript?

As I work on creating a dynamic table that expands when needed, I encountered a challenge. Initially, I programmed it to automatically add a new row after any changes made to the table. However, I now want to modify it so that a new row is only added upon ...

javascripthtml

I am unable to sketch my backdrop. - HTML Canvas Game

Recently I've encountered an issue in my code where the image doesn't appear and mouse interaction stops working when I uncomment bg.draw() within the draw function. function draw() { clearAllCtx(); player.draw(); ene ...

javascripthtmlcanvasmouseinteraction

Issue with horizontal elements not functioning properly while using cdkDragPreview and cdkDragPlaceholder

My goal is to have my elements laid out horizontally instead of vertically, so I'm using display-inline. However, I've encountered some unusual behavior with the CSS that's causing two specific issues. When I click and drag an element, it ...

cssangularangular-cdk-drag-drop

Applying the CSS property overflow-x: hidden will prevent horizontal overflow and only display

When I set overflow-x: hidden on an element that overflows both horizontally and vertically, it displays a vertical scroll bar along with hiding the horizontal overflow. I attempted adding overflow-y: visible and just overflow: visible, but it had no effec ...

htmlcss

Using jQuery to extract a specific portion of a URL path

Seeking assistance with extracting category information from lengthy URLs and assigning it to a variable. Consider the following URL: http://example.com/community/home/whatever.html The goal is to assign the variable to the folder path that follows /hom ...

javascriptjqueryhtmlregex

Is there a way to select and style the nth-child element within a Bootstrap .card body?

I am experimenting with changing the background-color of the card-body in bootstrap 4, but I am unsure about how to access the card-body element since each body has a different parent (I believe my understanding is correct). Can this be achieved using the ...

cssbootstrap-4

Custom form validation in Angular 2 will activate once the user has emptied the textbox

Hello, I have been facing an issue with validating my input box as soon as it loses focus. Strangely enough, the validation message only shows up when I enter text into the textbox and then delete it. Below is my HTML template: ...

htmlangularangular2-forms