Circle with Three Different Border Colors

Circle with three different border colors

You can achieve a circle border divided into 3 sections with an inline svg using:

• a circle element
• and the stroke-dasharray attribute to make the sections

Here is an example:

svg{width:30%;height:auto;}

<svg viewbox="0 0 10 10">  <defs>    <circle id="circle" cx="5" cy="5" r="4" stroke-width="0.5" fill="transparent" />  </defs>  <use xlink:href="#circle" stroke="pink" stroke-dasharray="0,2.09,8.38,30" />  <use xlink:href="#circle" stroke="green" stroke-dasharray="0,10.47,8.38,30" />  <use xlink:href="#circle" stroke="orange" stroke-dasharray="2.09,16.75,6.3" /></svg>

Circle marker with three different border colors in Google Maps API

It looks like there is solution to do it with CSS as Marker for Google Maps API.

So I managed to create an image, and use this as background for Marker class .circle:

.circle {
  background: url('circle.png') no-repeat;
  width: 58px;
  height: 58px;
  line-height: 20px;
  text-align: center;
}

CSS circle with two borders of different colors or at least looks like

Hi u can make this also :

.container {
    background-color: grey;
    height: 200px;
    padding:10px; // ADD THIS ALSO
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 1.5px solid #fff;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 20px;
    text-align: center;
    background: #3E78B2;
    box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}

the advantage is that you can also put a blur effect, changing like this:

box-shadow: 0 0 3px 3px #002525;

Flutter Draw a circle border with 3 multiple colors and values

Animation can be handled by TweenAnimationBuilder and it will be played on build.
To achieve desired result we must use customPainter.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TweenAnimationBuilder(
          duration: const Duration(seconds: 2),
          tween: Tween(begin: 0.0, end: 1.0),
          curve: Curves.easeOutCubic,
          builder: (BuildContext context, dynamic value, Widget child) {
            return CustomPaint(
              painter: OpenPainter(
                  totalQuestions: 300,
                  learned: 75,
                  notLearned: 75,
                  range: value),
            );
          },
        ),
      ),
    );
  }
}

class OpenPainter extends CustomPainter {
  final learned;
  final notLearned;
  final range;
  final totalQuestions;
  double pi = math.pi;

  OpenPainter({this.learned, this.totalQuestions, this.notLearned, this.range});
  @override
  void paint(Canvas canvas, Size size) {
    double strokeWidth = 7;
    Rect myRect = const Offset(-50.0, -50.0) & const Size(100.0, 100.0);
    
    var paint1 = Paint()
      ..color = Colors.red
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;
    var paint2 = Paint()
      ..color = Colors.green
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;
    var paint3 = Paint()
      ..color = Colors.yellow
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    double firstLineRadianStart = 0;
    double _unAnswered = (totalQuestions - notLearned - learned) * range / totalQuestions;
    double firstLineRadianEnd = (360 * _unAnswered) * math.pi / 180;
    canvas.drawArc(
        myRect, firstLineRadianStart, firstLineRadianEnd, false, paint1);

    double _learned = (learned) * range / totalQuestions;
    double secondLineRadianEnd = getRadians(_learned);
    canvas.drawArc(myRect, firstLineRadianEnd, secondLineRadianEnd, false, paint2);
    double _notLearned = (notLearned) * range / totalQuestions;
    double thirdLineRadianEnd = getRadians(_notLearned);
    canvas.drawArc(myRect, firstLineRadianEnd + secondLineRadianEnd, thirdLineRadianEnd, false, paint3);

    // drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
  }

  double getRadians(double value) {
    return (360 * value) * pi / 180;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Hopefully someone will find this helpfull :) Feel free to improve on this! Happy coding !

How do I put a multi color border around my circular image?

Here's an example using a little more markup and pseudo elements:

.image-wrap {  position: relative;  padding: 6px;  border-radius: 50%;  width: 140px;  height: 140px;  box-sizing: border-box;  overflow: hidden;  background: blue;  z-index: 1;  background-clip: padding-box;}
.image-wrap-inner {  overflow: hidden;  border-radius: 50%;  width: 128px;  height: 128px;}
.image-wrap img {  position: relative;  z-index: 10;  top: -6px;  left: -6px;}
.img-border-two::before {  content: '';  display: block;  height: 140px;  width: 140px;  background: green;  position: absolute;  top: 0;  left: 70px;  z-index: 2;}
.img-border-three::before {  content: '';  display: block;  height: 140px;  width: 140px;  background: purple;  position: absolute;  top: 0;  left: 0;  z-index: 3;  transform: matrix(2, 1, 2, -1, 0, 140);}
.img-border-three::after {  content: '';  display: block;  height: 140px;  width: 140px;  background: red;  position: absolute;  top: 0;  left: 70px;  z-index: 2;}

<div class="col-lg-4">  <div class="image-wrap img-border-two">    <div class="image-wrap-inner">      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">    </div>  </div>
  <h2>Heading</h2>  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>

<div class="col-lg-4">  <div class="image-wrap img-border-three">    <div class="image-wrap-inner">      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">    </div>  </div>
  <h2>Heading</h2>  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>

css: make div rounded circle and add border to the 3/4 of it

Svg circles

Creating a 3/4 of a circle with svg is just a few lines of code:

#cut-circ {  stroke-dasharray: 110;  stroke-dashoffset: 0;}

<svg id="cut-circ" viewBox="0 0 100 100">  <circle cx="50" cy="50" r="23" stroke="red" fill="gray" /></svg>

How to divide circle border to five parts

There are many ways to construct such a linear-gradient circle. To achieve your goal you have to first understand how stacking gradients work. Take a look here: https://css-tricks.com/stacking-order-of-multiple-backgrounds/ (TL;DR: "the last element will be on top, not the first")

After that you can just construct your circle. In your case your background is red, which makes it a bit confusing. See my example, I think the first two circles are trivial. But in the third and fourth we are adding another red part, rotated the exact amount(Try to figure out the math, one part is 72deg). I recommend using some dev-tools, where you can adjust the degrees with a slider.

.step {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background: #eb4034;
  position: relative;
  margin-bottom: 1rem;
}

.step:after {
  position: absolute;
  content: '';
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 0px;
  left: 0px;
  padding: 5px;
  border-radius: inherit;
  background-color: #ffffff;
  background-clip: content-box;
}

.one {
  background-image: linear-gradient(0deg, transparent 50%, #dbd7d7 50%), linear-gradient(-108deg, transparent 50%, #dbd7d7 50%);
}

.two {
  background-image: linear-gradient(0deg, transparent 50%, #dbd7d7 50%), linear-gradient(-36deg, transparent 50%, #dbd7d7 50%)
}

.three {
  background-image: linear-gradient(216deg, transparent 50%, #eb4034 50%), linear-gradient(0deg, transparent 50%, #dbd7d7 50%);
}

.four {
  background-image: linear-gradient(288deg, transparent 50%, #eb4034 50%), linear-gradient(0deg, transparent 50%, #dbd7d7 50%);
}

<div class="step one"></div>
<div class="step two"></div>
<div class="step three"></div>
<div class="step four"></div>
<div class="step"></div>

---

Related Topics