How to create Hexagon Shaped progressbar in angular

Question

I trying to achieve something like this image from Vikinger social media template, where i have mainly three hexagon shapes one is the outer border, second one is the hexagonal progress bar and third one is the image holder. But i have no idea how i can create a hexagon with in angular. The progress bar value and the image will be dynamic.

Also is there any way to put the image in img tag? Please find the image. If anyone has any idea please help.

Search for svg progress bar. And what do you mean by putting the image in img tag? — mat.hudak, Nov 03 '20 at 07:42
@dallows, I have searched with svg proressbar, could not find any with hexagonal shape — Rahul Kundu, Nov 03 '20 at 08:34
Hexagonal progress bar: https://codepen.io/cmd430/pen/pJKQpg. And you can turn it into your component. If you want to display an image from DB, it most likely be base64 encoded, so https://stackoverflow.com/questions/38812993/base64-to-image-angular-2 — mat.hudak, Nov 03 '20 at 09:20

score 2 · Answer 1 · answered Nov 03 '20 at 12:14

app.component.html

<div class="profile-cnt">
    <div class="profile-image"
        style="--i:url(https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350)">
    </div>

<div class="progress-bar">
        <svg class="progress blue noselect" x="0px" y="0px" viewBox="0 0 776 628">
            <path class="track" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
            <path class="fill" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
        </svg>
    </div>

</div>

app.component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  ngOnInit() {
    let max = 2160;
    let progress = 80;
    setTimeout(function() {
      document
        .querySelector(".fill")
        .setAttribute(
          "style",
          "stroke-dashoffset: " + ((100 - progress) / 100) * max
        );
    }, 1000 * 4);
  }
}

app.component.css

.profile-cnt {
  position: relative;
}
.profile-image {
  width: 500px;
  height: 500px;

clip-path: polygon(
    47.5% 5.66987%,
    48.2899% 5.30154%,
    49.13176% 5.07596%,
    50% 5%,
    50.86824% 5.07596%,
    51.7101% 5.30154%,
    52.5% 5.66987%,
    87.14102% 25.66987%,
    87.85495% 26.16978%,
    88.47124% 26.78606%,
    88.97114% 27.5%,
    89.33948% 28.2899%,
    89.56505% 29.13176%,
    89.64102% 30%,
    89.64102% 70%,
    89.56505% 70.86824%,
    89.33948% 71.7101%,
    88.97114% 72.5%,
    88.47124% 73.21394%,
    87.85495% 73.83022%,
    87.14102% 74.33013%,
    52.5% 94.33013%,
    51.7101% 94.69846%,
    50.86824% 94.92404%,
    50% 95%,
    49.13176% 94.92404%,
    48.2899% 94.69846%,
    47.5% 94.33013%,
    12.85898% 74.33013%,
    12.14505% 73.83022%,
    11.52876% 73.21394%,
    11.02886% 72.5%,
    10.66052% 71.7101%,
    10.43495% 70.86824%,
    10.35898% 70%,
    10.35898% 30%,
    10.43495% 29.13176%,
    10.66052% 28.2899%,
    11.02886% 27.5%,
    11.52876% 26.78606%,
    12.14505% 26.16978%,
    12.85898% 25.66987%
  );
  animation: clipRotateAnim 2s linear infinite;
  position: relative;
  overflow: hidden;
}

.profile-image:before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center/cover;
  animation: inherit;
  animation-direction: reverse;
}

.progress {
  width: 500px;
  height: 500px;
}
.progress .track,
.progress .fill {
  fill: rgba(0, 0, 0, 0);
  stroke-width: 30;
  transform: translate(75px, 685px) rotate(-90deg);
}
.progress .track {
  stroke: rgb(56, 71, 83);
}
.progress .fill {
  stroke: rgb(255, 255, 255);
  stroke-linecap: round;
  stroke-dasharray: 2160;
  stroke-dashoffset: 2160;
  transition: stroke-dashoffset 1s;
}
.progress.blue .fill {
  stroke: rgb(104, 214, 198);
}

.progress-bar {
  position: absolute;
  top: 0;
}

Thanx for the reply, can you tell me how i can make the hexagon edges rounded? Also the background image not showing up — Rahul Kundu, Nov 03 '20 at 14:19

How to create Hexagon Shaped progressbar in angular

1 Answers1