#PureCSS - Responsive Iron Man 2 Arc Reactor

FEATURED

In this example below you will see how to do a #PureCSS - Responsive Iron Man 2 Arc Reactor with some HTML / CSS and Javascript

Responsive Iron Man 2 Arc Reactor using CSS

Thumbnail
This awesome code was written by Asyraf Hussin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Asyraf Hussin ©
  • HTML
  • CSS
  • JavaScript
    <div class="reactor">
	<div class="rectangle-container">
		<div class="rectangle rectangle-1"></div>
		<div class="rectangle rectangle-2"></div>
		<div class="rectangle rectangle-3"></div>
		<div class="rectangle rectangle-4"></div>
		<div class="rectangle rectangle-5"></div>
		<div class="rectangle rectangle-6"></div>
	</div>
	<div class="triangle">
		<div class="circle-top-container">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
		</div>
		<div class="circle-left-container">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
		</div>
		<div class="circle-right-container">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
		</div>
		<div class="rod rod-1"></div>
		<div class="rod rod-2"></div>
		<div class="rod rod-3"></div>
		<div class="triangle-inner">
			<div class="triangle-inner-inner">
				<div class="rectangle-glow"></div>
			</div>
		</div>
	</div>
</div>

/*Downloaded from https://www.codeseek.co/AsyrafHussin/purecss-responsive-iron-man-2-arc-reactor-XYpjjV */
    // colors
$bg-color: #001421;
$logo-color: #000;
$logo-glow-color: #01cafe;
$circle-border-color: #04080b;
$circle-color: radial-gradient(circle, #ffffff 30%, #46fffe);
$rectangle-color: #0d1724;
$triangle-border-color: #0b0a0d;
$triangle-color: lighten(#00dffb, 30%);
$triangle-inner-color: lighten(#0d1724, 15%);
$triangle-inner-inner-color: lighten(#77faf5, 23%);
$circle-b-triangle-color: radial-gradient(circle, #fff 45%, #46fffe);
$circle-b-triangle-glow-color: #46fffe;
$road-glow-color: #0098f8;

// sizes
$reactor-size: 60.2vmin;

// mixins
@mixin center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

@mixin pseudo($position: absolute, $content: "") {
    content: $content;
    position: $position;
}

html, body{
  width: 100%;
  height: 100%;
}

body{
  background: $bg-color;
  overflow: hidden;
}

.reactor{
  @include center;
  width: $reactor-size;
  height: $reactor-size;
  background: $circle-color;
  border: 2vmin solid $circle-border-color;
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 0 10vmin $logo-glow-color);

  .rectangle-container{
    position: relative;
    width: 100%;
    height: 100%;

    .rectangle{
      position: absolute;
      width: 7.3vmin;
      height: 12vmin;
      background: $rectangle-color;
    }

    .circle-between-rectangle{
      width: 9vmin;
      height: 9vmin;
      background: $circle-b-triangle-color;
      filter: drop-shadow(0 0 3vmin $circle-b-triangle-glow-color);
      border-radius: 50%;
    }

    .rectangle-1{
      left: 17.65vmin;
      top: 1vmin;
      transform: rotate(-20deg);

      &:before{
        @include pseudo;
        margin-top: 2vmin;
        margin-left: 7.5vmin;
        @extend .circle-between-rectangle;
      }

      &:after{
        @include pseudo;
        margin-top: 2vmin;
        margin-left: -9.5vmin;
        @extend .circle-between-rectangle;
      }
    }

    .rectangle-2{
      top: 26.5vmin;
      left: 0vmin;
      width: 7.6vmin;
      height: 16vmin;
      transform: rotate(80deg);

      &:before{
        @include pseudo;
        margin-top: -0.5vmin;
        margin-left: 7.9vmin;
        @extend .circle-between-rectangle;
      }

      &:after{
        @include pseudo;
        margin-top: -0.5vmin;
        margin-left: -9.5vmin;
        @extend .circle-between-rectangle;
      }
    }

    .rectangle-3{
      top: 43vmin;
      left: 10vmin;
      width: 7.4vmin;
      height: 12vmin;
      transform: rotate(39deg);

      &:before{
        @include pseudo;
        margin-top: -0.5vmin;
        margin-left: 7.9vmin;
        @extend .circle-between-rectangle;
      }
    }

    .rectangle-4{
      top: 43.6vmin;
      left: 42.8vmin;
      width: 7.4vmin;
      height: 11vmin;
      transform: rotate(-40deg);

      &:before{
        @include pseudo;
        margin-top: -0.5vmin;
        margin-left: 7.9vmin;
        @extend .circle-between-rectangle;
      }

      &:after{
        @include pseudo;
        margin-top: -0.5vmin;
        margin-left: -9.5vmin;
        @extend .circle-between-rectangle;
      }
    }

    .rectangle-5{
      top: 27vmin;
      left: 51vmin;
      width: 7.6vmin;
      height: 14vmin;
      transform: rotate(-80deg);

      &:before{
        @include pseudo;
        margin-top: -0.5vmin;
        margin-left: 7.9vmin;
        @extend .circle-between-rectangle;
      }
    }

    .rectangle-6{
      top: 0.6vmin;
      left: 34.8vmin;
      height: 12vmin;
      transform: rotate(20deg);

      &:before{
        @include pseudo;
        margin-top: 2vmin;
        margin-left: 7.9vmin;
        @extend .circle-between-rectangle;
      }
    }
  }

  .triangle{
    position: absolute;
    top: 9.5vmin;
    left: -4.5vmin;
    width: 0;
    height: 0;
    border-left: 34.7vmin solid transparent;
    border-right: 34.7vmin solid transparent;
    border-top: 60vmin solid $triangle-border-color;

    &:after{
      @include pseudo;
      top: -57vmin;
      left: -29.5vmin;
      width: 0;
      height: 0;
      border-left: 29.6vmin solid transparent;
      border-right: 29.6vmin solid transparent;
      border-top: 52vmin solid $triangle-color;
    }

    .circle{
      position: absolute;
      z-index: 2;
      width: 6vmin;
      height: 6vmin;
      border-radius: 50%;
      background: #1bffff;
      filter: drop-shadow(0 0 4vmin #1bffff);

      &:nth-child(2){
        margin-left: 9vmin;
      }
      &:nth-child(3){
        margin-left: 18vmin;
      }
      &:nth-child(4){
        margin-left: 27vmin;
      }
    }

    .circle-top-container{
      position: absolute;
      top: -56.2vmin;
      left: -17vmin;

      @extend .circle;
    }

    .circle-left-container{
      position: absolute;
      top: -48vmin;
      left: -30.5vmin;
      transform: rotate(60deg);
      @extend .circle;
    }

    .circle-right-container{
      position: absolute;
      top: -24vmin;
      left: -16vmin;
      transform: rotate(-60deg);
      @extend .circle;
    }

    .rod{
      position: absolute;
      z-index: 2;
      top: -50vmin;
      width: 20vmin;
      height: 2vmin;
      background: $triangle-inner-color;
      filter: drop-shadow(0 0 2vmin $road-glow-color);

      &:before{
        @include pseudo;
        left: 5vmin;
        top: -0.5vmin;
        width: 4vmin;
        height: 3.1vmin;
        border-radius: 0.5vmin;
        background: $triangle-inner-color;
      }
    }

    .rod-1{
      margin-top: -2.5vmin;
      left: -30vmin;
      transform: rotate(30deg);
    }

    .rod-2{
      margin-top: -1.8vmin;
      margin-left: 10vmin;
      transform: rotate(150deg);
    }

    .rod-3{
      margin-top: 32.8vmin;
      margin-left: -9.6vmin;
      transform: rotate(-90deg);
    }

    .triangle-inner{
      position: absolute;
      z-index: 2;
      top: -49.5vmin;
      left: -17vmin;
      width: 0;
      height: 0;
      border-left: 17.5vmin solid transparent;
      border-right: 17.5vmin solid transparent;
      border-top: 28vmin solid $triangle-inner-color;

      .triangle-inner-inner{
        position: absolute;
        top: -23.7vmin;
        left: -10vmin;
        width: 0;
        height: 0;
        border-left: 10vmin solid transparent;
        border-right: 10vmin solid transparent;
        border-top: 16.5vmin solid $triangle-inner-inner-color;

        &:before{
          @include pseudo;
          top: -16.8vmin;
          left: -6vmin;
          width: 11.2vmin;
          height: 1.5vmin;
          background: $triangle-inner-color;
        }

        &:after{
          @include pseudo;
          top: -14vmin;
          left: -5.5vmin;
          width: 0;
          height: 0;
          border-left: 5.5vmin solid transparent;
          border-right: 5.5vmin solid transparent;
          border-top: 9vmin solid #fffefc;
          filter: drop-shadow(0 0 3vmin #fff);
        }

        .rectangle-glow{
          position: absolute;
          top: -9.2vmin;
          left: -10.2vmin;
          width: 11.2vmin;
          height: 1.5vmin;
          background: $triangle-inner-color;
          transform: rotate(58deg);

          &:before{
            @include pseudo;
            top: -7.5vmin;
            left: 5.5vmin;
            width: 10vmin;
            height: 1.5vmin;
            background: $triangle-inner-color;
            transform: rotate(63deg);
          }
        }
      }
    }
  }
}



/*Downloaded from https://www.codeseek.co/AsyrafHussin/purecss-responsive-iron-man-2-arc-reactor-XYpjjV */
    

Comments