Image looks different in jsfiddle compared to codepen

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>

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>

That didn’t work.

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

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


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

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…

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

Edit:

Just noticed Ron said the same thing oops :slight_smile:

1 Like

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.

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

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;

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

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/

Is there a background for it to appear on?

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

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%;
}

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

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

… but will it work on an actual web page?

100% of nothing is still nothing.

1 Like

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

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

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?

Because 100% of 0 is 0?

1 Like