Making changes, adjustments to fan background image

What adjustments or improvements would you make to this?


Also, The fan, fence, cross are all using percentage, so, maybe there should be a container around it so it is able to get smaller.

How would it be able to get smaller when the window gets smaller?

https://jsfiddle.net/vybun9tc/

This part here should be changed to something else I think.

Would those div tags around clip be removed?

.clip is currently not in the html.

div,
.clip {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  width: 380px;
  height: 380px;
border-radius: 100%
}

div>div,
.clip>div {
  margin-left: 0;
  left: 0;
}

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
}

div,
.clip {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  width: 380px;
  height: 380px;
  border-radius:100%;
}

div>div,
.clip>div {
  margin-left: 0;
  left: 0;
}

.bg {
  background: linear-gradient(to top, #e10019 0%, #957e00 100%);
}

.wall {
  overflow: hidden;
}

.fan svg {
  -webkit-animation: fan-spin 40s infinite linear;
  animation: fan-spin 40s infinite linear;
}

.fence {
  background:
    linear-gradient(45deg,
      #0000 7px,
      black 0 7.5px,
      #0000 0 10px),
    linear-gradient(-45deg,
      #0000 7px,
      black 0 7.5px,
      #0000 0 10px);
  background-size: 10px 10px;
  -webkit-clip-path: circle(190px at center);
  clip-path: circle(190px at center);
  filter: drop-shadow(0 0 5px #000);
  -webkit-animation: fade 5s infinite;
  animation: fade 5s infinite;
}

.fence>div {
  position: absolute;
  left: 0;
  top: 130px;
  width: 100%;
  height: 2px;
  background: #000;
}

.fence>div:nth-child(1) {
  top: -80%;
}

.fence>div:nth-child(2) {
  top: -60.6%;
}

.fence>div:nth-child(3) {
  top: -41.2%;
}

.fence>div:nth-child(4) {
  top: -21.8%;
}

.fence>div:nth-child(5) {
  top: -2.4%;
}

.fence>div:nth-child(6) {
  top: 17%;
}

.fence>div:nth-child(7) {
  top: 36.4%;
}

.fence>div:nth-child(8) {
  top: 55.8%;
}

.fence>div:nth-child(9) {
  top: 75.2%;
}

.fence>div:nth-child(10) {
  top: 94.6%;
}

.cross::before,
.cross::after {
  content: "";
  background: black;
}
.cross::before {
  /*horizontal*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 100%;*/
  /*height: 10px;*/
  height: 2.3%;
  clip-path: circle(191% at center);
}

.cross::after {
  /*vertical*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 10px;*/
  width: 2.7%;
  /*height: 100%;*/
  clip-path: circle(191px at center);
}

/*.cross {
  -webkit-clip-path: circle(191px at center);
  clip-path: circle(191px at center);
  width: 392px;
  height: 392px;
  top: 124px;
  left: 71px;
}

.cross::before,
.cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #000;
}

.cross::before {
  margin: -5px 0 0 -50%;
  width: 100%;
  height: 10px;
}

.cross::after {
  margin: -50% 0 0 -5px;
  width: 10px;
  height: 100%;
}*/

.sun {
  position: absolute;
  left: -10%;
  top: 55%;
  width: 180px;
  height: 180px;
  border-radius: 180px;
  background: radial-gradient(white, yellow 30%, #ff4d00, transparent 70%);
}

.sun-wrapper {
  -webkit-clip-path: circle(191px at center);
  clip-path: circle(191px at center);
  mix-blend-mode: soft-light;
}

.overlay,
.bg-full {
  margin: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
}

.bg-full {
  background: #000;
}

Just from compression standpoint…

2 Likes

Yea, I can do this: https://jsfiddle.net/q47d6mcj/

.cross::before,
.cross::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: black;
  clip-path: circle(191px at center);
}
.cross::before {
  height: 2.3%;
}
.cross::after {
  width: 2.7%;
}

This is just rough (and not error checked) and not exact either but it’s about a 1000 lines of code shorter. :slight_smile:

It will resize as the window gets smaller.

I have to go out now so haven’t got time to refine it until tomorrow.

1 Like

It should be:

fence
vertical lines
cross

You have:

vertical lines
fence
cross

I tried to reverse the order, but I don’t think it works like that.

.cross {
  background: linear-gradient(45deg, #0000 7px, black 0 7.5px, #0000 0 10px),
    linear-gradient(-45deg, #0000 7px, black 0 7.5px, #0000 0 10px),
    linear-gradient(red 2px, transparent 2px);
  background-size: 10px 10px, 10px 10px, 100% 10.15%;
}

You need to change the background-size order as well as each of those refers to the same order as the backgrounds.

.cross {
  background: linear-gradient(black 1px, transparent 1px),linear-gradient(45deg, #0000 7px, black 0 7.5px, #0000 0 10px),
    linear-gradient(-45deg, #0000 7px, black 0 7.5px, #0000 0 10px);
  background-size: 100% 10.15%, 10px 10px, 10px 10px;
}
1 Like

Here was the original one, all I did was remove the image from it, and added percent, so it can get smaller.

When you look at this: Do you know what is creating that separation between where the fan ends, where there is white, that comes after the red color?

Yeah that doesn’t really work does it unlike the example I gave you.

That’s from this image I believe.

https://uc35da97f6320b97dca38139d673.dl.dropboxusercontent.com/cd/0/inline/BxM7cE0vp56gDNEG_5oeZHlo80cXuNzZDo8CF6swq0JPj-KMzQefOr6EAkwcowVeOHS9L1E8cV7fOFmsgIX_LiloXcfsYnx56HqOM1mGIb88QTIgtoPJL-ia_NTD_PnyFGibIF8nHcQlhSXj4OQH3INR9_Kry3ZAaSvBFDODWQRC3w/file#

1 Like

There are 12 vertical line.

How would I make the 1st line and last line transparent?

https://jsfiddle.net/vbcq74u9/1/

.cross {
  background: linear-gradient(blue 2px, transparent 2px),linear-gradient(45deg, #0000 7px, black 0 7.5px, #0000 0 10px),
    linear-gradient(-45deg, #0000 7px, black 0 7.5px, #0000 0 10px);
  background-size: 100% 9%, 10px 10px, 10px 10px;
}

I’d just move them out of view.

.cross{
  top:-5px;
  bottom:-5px;
}
1 Like