Image looks different in jsfiddle compared to codepen

HTML & CSS
1

codepen: Image fills the whole screen

jsfiddle: Image does not fill the whole screen.
https://jsfiddle.net/jofq3zg5/

Why does one fill the whole screen and the other does not?

How would I get it to fill the whole screen in jsfiddle?

I don’t understand why the image is not filling the whole screen in jsfiddle.

How do you get height to be 100%?

https://jsfiddle.net/yLhm97og/2/

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <pattern id="pattern" width="100" height="500" patternUnits="userSpaceOnUse">
        <circle r="506"/>
        <path d="M25 0H50V500H25M75 0H100V500H75M-50 500L50 0L150 500L50 150" fill="#e83"/>
    </pattern>
    <filter id="filter">
        <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="3"/>
        <feDisplacementMap in="SourceGraphic" yChannelSelector="R" scale="60"/>
    </filter>
    <rect x="-10%" y="-10%" width="120%" height="120%" fill="url(#pattern)" filter="url(#filter)"/>
</svg>
2

Try this (added style=“”) :


	<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: auto;">
	    <pattern id="pattern" width="100" height="500" patternUnits="userSpaceOnUse">
	        <circle r="506"/>
	        <path d="M25 0H50V500H25M75 0H100V500H75M-50 500L50 0L150 500L50 150" fill="#e83"/>
	    </pattern>
	    <filter id="filter">
	        <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="3"/>
	        <feDisplacementMap in="SourceGraphic" yChannelSelector="R" scale="60"/>
	    </filter>
	    <rect x="-10%" y="-10%" width="120%" height="120%" fill="url(#pattern)" filter="url(#filter)"/>
	</svg>
3

That didn’t work.

4

I believe that the answer is in the CodePen - script and css - read the HTML and JS Settings.
(I’m not a jsfiddler, so untested in jsfiddle)

ADDED:

It looks like the addition of a little CSS is all that is needed:

body {
  margin: 0;
}

body > svg {
  display: block;
  width: 100vw;
  height: 100vh;
}

I think the “script” URL basically calls the “Buy Me a Coffee” button code, related CSS & a listener.

2 Likes
5

This worked also
https://jsfiddle.net/qfhwmk9y/


html,
body,
svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
6

Here in your HTML:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
The width and height attributes are not doing anything as far as I am aware.

My understanding is that the xmlns attribute is not needed for SVGs within HTML…

7

Because there is CSS in the codepen user settings that sets the svg to fill the viewport.

Screen Shot 2021-07-29 at 10.43.46
Screen Shot 2021-07-29 at 10.43.461656×930 162 KB

Edit:

Just noticed Ron said the same thing oops :slight_smile:

1 Like
8

Is there a difference between doing this:

https://jsfiddle.net/qfhwmk9y/


html,
body,
svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

and this?

https://jsfiddle.net/4okLexs0/1/

body {
  margin: 0;
}

body > svg {
  display: block;
  width: 100vw;
  height: 100vh;
}

.bmc {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

They both seem to do the same thing.

9

As I attempted to point out in my post #4, .bmc stands for

/* Buy Me Coffee button */
.bmc {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

Which positions the buttonon the screen… which is pointless outside of the author’s demo… unless you want your visitors to buy you a cup of coffee.

When things seem unnecessary, you owe it to yourself and the humans around you to try to give the code a look and try to understand why. This one was cleverly obscure, but not impossible… the information is all there.

1 Like
10

Then they are both relatively the same.

One other thing, what’s the name for this called?

The right triangle thing.

body > svg

https://jsfiddle.net/7dvrLmes/

body {
  margin: 0;
}

body > svg {
  display: block;
  width: 100vw;
  height: 100vh;
}

https://jsfiddle.net/qfhwmk9y/

html,
body,
svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
11

Let me offer you a couple of valuable URL references for your notebook:

https://www.w3schools.com/cssref/css_selectors.asp

:wink:

or “google” ‘css selectors’ for more references.

You should find “child combinator” in the list with the matching example.

1 Like
12

How come this color isn’t showing?
background-image: radial-gradient(ellipse at center, Crimson 0%, black 100%);

Here:
https://jsfiddle.net/1tm3bLao/1/

Last image.

It’s showing here though.

I think this is the right one that goes with the pattern.

background-image: radial-gradient(ellipse at center, Crimson 0%, black 100%);
https://jsfiddle.net/1tm3bLao/2/

13

Is there a background for it to appear on?

An empty div has zero height so there will be no background.

14

I added height here and still no color.
https://jsfiddle.net/a73tLn9v/2/

<div class="screen3">

</div>

.screen3 {
  background-image: radial-gradient(ellipse at center, Crimson 0%, black 100%);
  height: 100%;
}
15

This worked:
https://jsfiddle.net/cq58zk3y/2/

<div class="screen3" style="height: 487px">
</div>
16

… but will it work on an actual web page?

17

100% of nothing is still nothing.

1 Like
18

This worked:
https://jsfiddle.net/cq58zk3y/2/ 

<div class="screen3" style="height: 487px">
</div>
19

Of course it does because you have supplied 487px height for the background to appear on.

Do you understand why 100% didn’t work so that you don’t make the same mistake again?

20

Because 100% of 0 is 0?

1 Like