<!-- My blog
https://albertwalicki.com/cssart/simple-bike -->

<!-- Inspiration
https://s3.amazonaws.com/www-inside-design/uploads/2018/12/bicycle_small-810x810.jpg -->

<div class="wrapper">
  <div class="wheel wheel1"></div>
  <div class="wheel wheel2"></div>
  <div class="frame">
    <div class="chainStay"></div>
    <div class="seatStay"></div>
    <div class="seatTube"></div>
    <div class="downTube"></div>
    <div class="topTube"></div>
    <div class="fork"></div>
    <div class="steam"></div>
    <div class="seat"></div>
    <div class="bottomBracket"></div>
    <div class="cassette"></div>
    <div class="handlebar"></div>
  </div>
</div>

:root {
  --white: #fbfff1;
  --black: #070601;
  --gray: #cad7ea;
  --red: #e74456;
  --brown: #bd672c;
  --yellow: #fdd735;

  --size: 20vmin;
}

body {
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    bottom: -1vmin;
    width: 100vw;
    height: 1vmin;
    background-image: linear-gradient(
      90deg,
      var(--black) 29.45%,
      var(--yellow) 29.45%,
      var(--yellow) 50%,
      var(--black) 50%,
      var(--black) 79.45%,
      var(--yellow) 79.45%,
      var(--yellow) 100%
    );
    background-size: 20vmin 20vmin;
    animation: drive 10s infinite linear;
  }
}

@keyframes drive {
	from {
    background-position-x: 0vmin;
	}
	to { 
		background-position-x: -400vmin;
	}
}

.wheel {
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  border: 2vmin solid var(--black);
  box-shadow: inset 0 0 0 2vmin var(--white);
}

.wheel1 {
  margin: 0 11vmin 0 0;
}



.chainStay {
  position: absolute;
  left: 11vmin;
  bottom: 11vmin;
  height: 1.5vmin;
  width: 17vmin;
  background: var(--red);
  border-radius: 1vmin;
  transform: rotate(5deg);
  transform-origin: left;
}

.seatStay {
  position: absolute;
  left: 11vmin;
  bottom: 11vmin;
  height: 1vmin;
  width: 20vmin;
  background: var(--red);
  border-radius: 1vmin;
  transform: rotate(-57deg);
  transform-origin: left;
}

.seatTube {
  position: absolute;
  left: 4vmin;
  bottom: 9vmin;
  height: 1.5vmin;
  width: 24vmin;
  background: linear-gradient(90deg, var(--gray) 3vmin, var(--red) 3vmin);
  border-radius: 1vmin;
  transform: rotate(72deg);
  transform-origin: right;
}

.downTube {
  position: absolute;
  left: 27vmin;
  bottom: 9vmin;
  height: 1.5vmin;
  width: 23vmin;
  background: var(--red);
  border-radius: 1vmin;
  transform: rotate(-48deg);
  transform-origin: left;
}

.topTube {
  position: absolute;
  right: 17.5vmin;
  top: -5vmin;
  height: 1.5vmin;
  width: 20vmin;
  background: var(--red);
  border-radius: 1vmin;
  transform: rotate(0deg);
}

.fork {
  position: absolute;
  right: -10.5vmin;
  bottom: 10vmin;
  height: 1.5vmin;
  width: 23vmin;
  background: linear-gradient(-90deg, var(--gray) 3vmin, var(--red) 3vmin);
  border-radius: 1vmin;
  transform: rotate(253deg);
  transform-origin: left;
}

.seat {
  position: absolute;
  top: -10vmin;
  left: 16vmin;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.5vmin 8vmin 0 4vmin;
  border-color: var(--brown) transparent transparent transparent;
}

.bottomBracket {
  position: absolute;
  left: 24vmin;
  bottom: 8vmin;
  width: 3vmin;
  height: 3vmin;
  border: 2vmin solid var(--gray);
  border-radius: 100%;
}

.cassette {
  position: absolute;

  left: 11vmin;
  bottom: 11vmin;

  width: 2vmin;
  height: 2vmin;
  border-radius: 100%;
  background: var(--gray);
  box-shadow: 0 0 0 0.5vmin;
}

.steam {
  position: absolute;
  top: -9vmin;
  right: 16.5vmin;
  border-radius: 1vmin 0 0 0;
  width: 3vmin;
  height: 1.5vmin;
  background: var(--gray);
}

.handlebar {
  position: absolute;
  top: -9vmin;
  right: 12.5vmin;
  background: var(--brown);
  width: 5vmin;
  height: 1.5vmin;
  border-radius: 0 0 1vmin 0;
}