Determine CSS shape size based on shortest axis length?

HTML & CSS
1

I am quite taken by the follwing pattern design by Temani Afif (https://codepen.io/t_afif/pen/JjByKMp) and wanted to gain more control over it.

Although I’d like to achieve many things, initially I would like to make the shapes responsive to the size of the window (for use as a background effect) where by the shortest length will determine the size of the shape so that a whole shape will always be show, but it would change in size.

I would like to keep this as pure CSS, no JS.

Can this be done ?

2

Try changing the second line of CSS to:

--s: 5vw; /* control the size*/

The size of the circles will then be 5% of the width of the browser window so there will always be 20 circles across the web page (that may not very good on smartphone).

3 Likes
3

That did it, on both vh and vw, thank you Archibald !

var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2),

Being symmetrical can the code be modified to begin and end the pattern from the half way point ?

Their being a toggle method in CSS is it possible to link this to html to allow for options to start from a whole, or a half, withouth JS ?

Many thanks once again.

4

Try changing background declaration to:

background: var(--_g) 0 calc(var(--s)/2), var(--_g) calc(var(--s)/2) 0, conic-gradient(#0f9177 25%,#fdebad 0 50%,#d34434 0 75%,#b5d999 0);

Does that do what you want?

According to this article CSS toggles have been abandoned.

2 Likes
5

Hi Archibald, yes, the pattern will star from the centre, but by its repetitive nature it is difficult to make out.

I managed to get a toggle to work (on FireFox v115.4.0esr (64-bit)):

  <style>
    :root {
      --main-color: red; /* Set the default color */
    }

    html:not(.toggle-active) {
      --s: 120px; /* control the size*/
      --_g: radial-gradient(#0000 70%, #1a2030 71%);
      background:
        var(--_g), var(--_g) calc(var(--s)/2) calc(var(--s)/2),
        conic-gradient(
          var(--main-color) 25%,
          var(--main-color) 0 50%,
          var(--main-color) 0 75%,
          var(--main-color) 0
        );
      background-size: var(--s) var(--s);
      transition: background 0.4s;
    }

    html.toggle-active {
      --s: 120px; /* control the size*/
      --_g: radial-gradient(#0000 70%, #1a2030 71%);
      background:
        var(--_g), var(--_g) calc(var(--s)/2) calc(var(--s)/2),
        conic-gradient(
          yellow 25%,
          yellow 0 50%,
          yellow 0 75%,
          yellow 0
        );
      background-size: var(--s) var(--s);
    }

    /* Toggle switch styles */
    input[type="checkbox"] {
      display: none;
    }

    .toggle-switch {
      position: relative;
      width: 60px;
      height: 34px;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      border-radius: 17px;
      transition: background-color 0.4s;
    }

    .toggle-slider:before {
      content: "";
      position: absolute;
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      border-radius: 50%;
      transition: transform 0.4s;
    }

    input:checked + .toggle-switch .toggle-slider {
      background-color: #2196F3;
    }

    input:checked + .toggle-switch .toggle-slider:before {
      transform: translateX(26px);
    }
  </style>

Most of the patterns that I see online are filled in. I would like to have an option to convert to lineart, but there is no easy way to achieve this, how much more work would that be please ?

6

If you have a repeating line art image you can set its width to (say) 5vw to get 20 images across the web page in a similar way.

Incidentally, in the CodePen from post #1, you get an interesting background if you edit to:

--_g: radial-gradient(#0000 55%,#1a2030 55%);

(and click ‘Run’).

1 Like
7

Interesting find. That’s the useful thing about coding shapes; with just a few changes the entire pattern can shift.

Commoing from an illustrative bacground I was actually looking to toggle the negative space, or the existing design from fill to just the outline, which is something that one gets for free from dedicated image apps, but in the CSS world it is a lot more work.

8

You could try toggling the colours. This demonstrates where the colours are defined in the CodePen:

html {
  --s: 120px; /* control the size*/
  
  --_g: radial-gradient(#0000 70%,blue 71%);
  background:
    var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2),
    conic-gradient(red 25%,yellow 0 50%,green 0 75%,cyan 0);
  background-size: var(--s) var(--s); 
}

You may like rainbow colours :grinning::

html {
  --s: 120px; /* control the size*/
  
  --_g: radial-gradient(#0000 70%,black 71%);
  background:
    var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2),
    conic-gradient(red 0,yellow 17%,green 33%,cyan 50%,blue 67%,magenta 87%, red 100%);
  background-size: var(--s) var(--s); 
}

For just outlines an option would be to use SVG backgrounds.

2 Likes
9

Wow, the rainbow one’s something else. You know if you up the blue by 10% it looks like beer-goggles.

I think that I did control each of the quadrants in a test I did. A workaround could be to just make them all white (on a white background) so that that bakcground (blue) will be that negative colour I was trying to tease out.

The rainbow effect was similar to something I wanted to try out: pattern fill, is that possible, like with the following: https://www.magicpattern.design/tools/css-backgrounds

10

There is some very impressive CSS in that link.

Looking for example at the ‘Zig Zag 3D’ design, I see it is made with linear gradients so I expect each gradient could have colour transition.

Here is an example of using an SVG background:

2 Likes
11

I see what you mean, my requests are veering into SVG territory.

My final request is an overlay to achieve this effect: https://dribbble.com/shots/2066801-Sydney-Dance-Company-The-Mirror-Ball?1431843504

It loosl like a simple repeat pattern, but I think that there is a gradient applied ?

12

I think the apparent gradient is due to strong lighting from the right on the dancer.

If you look just below the “TH” of the text you will see what looks like a white exclamation mark rotated anticlockwise by 120° on the dancer’s costume. If youi look under “DA” and a little further down you will see the same ‘exclamation mark’… This indicates that the dancer’s image has been duplicated: I do not think it is another dancer. The dancer’s image to the right appears in circles whereas the duplicate dancer’s image to the left and slightly lower appears within ‘stars’. I expect this has been done by graphic design software, not by CSS.

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.