CSS Art – Koinobori Carp Streamer – Part 2

Reusing CSS code to make multiple images is a time-saving technique. Learn how to make carp scales, a Mother and Child Carp, in this step-by-step article.

CSS Art – Koinobori Carp Streamer – Part 2
Photo by Aika Kohama / Unsplash

Introduction

In part 1 of this two-part article series, you learned the process for creating the arrow wheel, pole, and Father Carp. In part 2, you will delve into crafting the scales, Mother Carp and Child Carp.

You’ll learn how to use the following CSS properties and functions in this article:

Preview

Koinobori Carp Streamer - Preview
Koinobori Carp Streamer - Preview

In part 2 of this two-part article series, you’ll create the scales, Mother and Child Carp.

Prerequisites

Essential CSS and HTML knowledge will help you understand the concepts and techniques introduced in this article. Jump over to this article if you require an HTML and CSS primer.

We assume that you have set up tools to create CSS art. If you haven’t, this article will show you how to set them up.

HTML Structure

<div class="container">
  <div class="pole-cord">
    <div class="father-carp-string">
      <div class="string"></div>
    </div>
    <div class="mother-carp-string">
      <div class="string"></div>
    </div>
    <div class="child-carp-string">
      <div class="string"></div>
    </div>
  </div>
  <div class="pole"></div>
  <div class="arrow-wheel"></div>
  <div class="father-carp">
    <div class="tail"></div>
    <div class="body"></div>
    <div class="mouth"></div>
    <div class="gill"></div>
    <div class="scales"></div>
    <div class="eye"></div>
  </div>
  <div class="mother-carp">
    <div class="tail"></div>
    <div class="body"></div>
    <div class="mouth"></div>
    <div class="gill"></div>
    <div class="scales"></div>
    <div class="eye"></div>
  </div>
  <div class="child-carp">
    <div class="tail"></div>
    <div class="body"></div>
    <div class="mouth"></div>
    <div class="gill"></div>
    <div class="scales"></div>
    <div class="eye"></div>
  </div>
</div>

container is the outermost enclosure. It enables the content to be centered and draws a light gray border. The rest of the divs represent each image component.

Keep the HTML structure as is for the image to display correctly.

Body and Container Div CSS

CSS code for the body and container div.

/* Body and Container Settings */
/* Center shapes */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Set background and border color */
.container {
  min-width: 500px;
  height: 500px;
  border: 5px solid lightgray;
  background: transparent;
  position: relative;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

Scales

The carp scales are made with a repeating image pattern. This technique is similar to making repeating background patterns.

.scales {
  position: absolute;
  width: 150px;
  height: 90px;
  left: 241px;
  top: 93.5px;
}

You create the container, scales, by setting CSS width and height property values. You position it with the left and top CSS properties.

Single Scale Image
Single Scale Image

First, you create a single image; in this example, you use the CSS radial-gradient() function to create an ellipse.

.scales {
  background: radial-gradient(
    100% 53% at 0 50%,
    transparent 90%,
    white 91% 95%,
    transparent 96%
  );
}
  • 100% 53% controls the width and height of the single scale image.
  • at 0 50% controls the scale image position.
  • transparent 90% creates a transparent area from 0% to 90%.
  • white 91% 95% draws a white area between 91% and 95%.
  • transparent 96% makes a transparent area from 96% and 100%.

The scale image is done. Next you’ll make it repeat using the CSS background-size property.

Scales - Repeating Pattern
Scales - Repeating Pattern
.scales {
  background-size: 30px 30px;
}

Unless you specify otherwise, a background image will repeat by default. You set the image background size to 30px 30px, giving a square container for the scale image. You can change the image size by changing the background-size property values. The first value controls the image’s horizontal size, and the second value controls the vertical size.

Carp Scales Completed
Carp Scales Completed

Ok, you’ve completed the scales. In the next section, you’ll start working on Mother Carp.

Mother Carp

The Mother and Child Carp are made with the same image components you used for Father Carp in part 1 of this two-part article series.

.mother-carp {
  position: absolute;
  left: 170px;
  top: 204px;  
  transform: scale(0.94);
}

Since you’re using the same Father Carp image components, we need to scale it down using the transform: scale() function. For Mother Carp, you set the scale to 0.94, which means the images will be around 6% smaller. To position Mother Carp, you use the CSS left and top properties.

A key benefit of reusing CSS image components is that you only need to adjust properties that differ from the original image design, rather than creating everything from scratch.

Let’s work on Mother Carp’s image components in the following sections.

String

Mother Carp String
Mother Carp String
.mother-carp-string {
  position: absolute;
  left: 53px;
  top: 137px;      
}

Mother Carp’s string is positioned 53px from the left and 137px from the top.

Mouth

Mother Carp Mouth
Mother Carp Mouth
.mother-carp .mouth {
  position: absolute;
  left: -13px;
  top: 0px;  
}

Similar to the previous string, we only need to position the mouth image component. You set the CSS left to -13px and the top to 0px.

Body

In this section, you’ll make Mother Carp’s body base and trunk. You’ll change the default colors to red and pinkish tones.

Mother Carp Body Base
Mother Carp Body Base

First, you’ll change the body base color.

Mother Carp Pink Body
Mother Carp Pink Body
.mother-carp .body {
  position: absolute;
  left: 0px;
  top: 0px;  
  background: #ef8e94;
}

To change the body base color, you set the background property value to #ef8e94, a rosy pink hue.

Next, you’ll change the trunk color.

Mother Carp Red Trunk
Mother Carp Red Trunk
.mother-carp .body::before {
  background: #d6160d;
}

Setting background to #d6160d changes the color from the default dark blue to a deep, lava red.

The body and trunk are done. Let’s move on to the tail section.

Tail

You will set the tail colors to match the body and trunk color.

Mother Carp Tail
Mother Carp Tail

Since we’re reusing Father Carp’s tail, its initial color will be dark blue.

Mother Carp Top Tail
Mother Carp Top Tail
.mother-carp .tail {
  position: absolute;
  left: 229px;
  top: 0px;  
  border-top: 62px solid #ef999e;
}

You only need to change to the border-top color value; the rest remains the same. Set the border-top color value to #ef999e to give it a light pink color.

Mother Carp Bottom Tail
Mother Carp Bottom Tail
.mother-carp .tail::before {
  border-bottom: 62px solid #ef8e94;
}

The bottom tail color is the same #ef8e94 you used for the body base.

Next up is the eye section.

Eye

Mother Carp Eye
Mother Carp Eye
.mother-carp .eye {
  position: absolute;
  left: 38px;
  top: 9px;  
}

For the eye, you need to adjust its position. You set the left CSS property value to 38px and top to 9px.

That’s it for the eye, onward to the gill section.

Gill

Mother Carp Gills - Before Color Change
Mother Carp Gills - Before Color Change

You will modify the gill color and position to match Mother Carp’s body.

Mother Carp Gill - Circle
Mother Carp Gill - Circle
.mother-carp .gill {
  position: absolute;
  left: 53px;
  top: 45px;  
  background: #d6160d;
}

First, you'll adjust the gill position to left: 53px and top: 45px. Second, you will change the background color to #d6160d, which is the trunk color.

Mother Carp Gill - Ellipse
Mother Carp Gill - Ellipse
.mother-carp .gill::before {
  background: #d6160d;
}

For the ellipse and rectangle with rounded corners, the only modification required is to change the background color to #d6160d.

Mother Carp Gill - Rounded Rectangle
Mother Carp Gill - Rounded Rectangle
.mother-carp .gill::after {
  background: #d6160d;
}

You’re almost done with Mother Carp. Let’s finish it by configuring the scales.

Scales

Mother Carp Scales
Mother Carp Scales
.mother-carp .scales {
  position: absolute;
  left: 70px;
  top: 0px;  
}

To finalize Mother Carp, set the CSS left to 70px and the top to 0px.

Congratulations on completing Mother Carp. In the next section, you’ll work on Child Carp.

Child Carp

The Child Carp will be created like the Mother Carp, with the main differences being in image size and colors. Most attributes and the creation method are the same as when making the Mother Carp in the previous sections.

Child Carp Body - Before Scaling Down
Child Carp Body - Before Scaling Down
.child-carp {
  position: absolute;
  left: 21px;
  top: 228px;  
  transform: scale(0.86);
}

Since you’ll be using Father Carp’s image components, you need to scale them down first. You use the CSS scale() function to scale the image components to roughly 86%, and you do that by inserting 0.86 inside the function.

For the sake of brevity, detailed instructions will not be repeated for the remaining Child Carp sections, as they have already been covered in the Mother Carp sections.

String

Child Carp String
Child Carp String
.child-carp-string {
  position: absolute;
  left: 47px;
  top: 239px;
}

Mouth

Child Carp Mouth
Child Carp Mouth
.child-carp .mouth {
  position: absolute;
  left: 160px;
  top: 93px;  
}

Body

Child Carp Body Base
Child Carp Body Base
Child Carp Light Blue Body
Child Carp Light Blue Body
.child-carp .body {
  background: #3f42f1;
}
Child Carp Blue Trunk
Child Carp Blue Trunk
.child-carp .body::before {
  background: #011aab;
}

Tail

Child Carp Tail
Child Carp Tail
.child-carp .tail {
  position: absolute;
  left: 403px;
  top: 93px;  
  border-top: 62px solid #4447f4;
}
Child Carp Top Tail
Child Carp Top Tail
.child-carp .tail::before {
  border-bottom: 62px solid #3f42f1;
}
Child Carp Bottom Tail
Child Carp Bottom Tail

Eye

Child Carp Eye
Child Carp Eye
.mother-carp .eye {
  position: absolute;
  left: 38px;
  top: 9px;  
}

Gill

Child Carp Gills - Before Color Change
Child Carp Gills - Before Color Change
Child Carp Gill - Circle
Child Carp Gill - Circle
.child-carp .gill {
  position: absolute;
  left: 226px;
  top: 138px;
  background: #011aab;
}
Child Carp Gill - Ellipse
Child Carp Gill - Ellipse
.child-carp .gill::before {
  background: #011aab;
}
Child Carp Gill - Rounded Rectangle
Child Carp Gill - Rounded Rectangle
.child-carp .gill::after {
  background: #011aab;
}

Scales

Child Carp Scales
Child Carp Scales
.child-carp .scales {
  position: absolute;
  left: 241px;
  top: 94px;  
}

You can see and play with the complete code on Pyxofy’s CodePen page.

See the Pen CSS Art - Koinobori Carp Streamer by Pyxofy (@pyxofy) on CodePen.

Conclusion

You learned how to reuse CSS code in part 2 of this two-part article series to create multiple images, a big time-saving technique. Using the CSS transform: scale() function, you were able to scale down images without manual adjustments.

Using the radial-gradient() function and background-size, you crafted intricate fish scale designs that seamlessly repeat, allowing you to adorn all three carp with these captivating patterns.

Repeating patterns and image scaling techniques are fun. Start creating art with them and share your masterpiece with us on LinkedIn, Threads, Mastodon, X (Twitter) @pyxofy , or Facebook.

We hope you liked this article. Kindly share it with your network. We appreciate it.

CSS Art – How to Make a Space Shuttle – Orbiter
Space shuttle orbiters are amazing machines. Can we make it with CSS? You bet! Join us making it step-by-step.
スクラッチプログラミング - じゃんけんゲームのつくりかた
コンピューターとじゃんけんをするプログラムをつくってみましょう。「コスチューム」と「メッセージ」のブロックをつかって、グーチョキパーで勝負(しょうぶ)できるようにプログラミングします。
JavaScript - Pyxofy
プログラミング言語のJavaScriptについて、初心者向けに解説しています。
CSS Animation – Radial Text Background Animation
Your text doesn’t have to be flat on a 2D screen. You’ll learn to bake in drama and flare to your text background in this step-by-step article.