My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful.
https://i.sstatic.net/Rq6Lx.jpg
I want each segment to have fully rounded corners, which presents a unique challenge.
My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful.
https://i.sstatic.net/Rq6Lx.jpg
I want each segment to have fully rounded corners, which presents a unique challenge.
I came across a solution that involves using this answer in conjunction with this one
.palette {
--g:20px; /* Adjust the gap between shapes*/
--s:50px; /* Set the size*/
height: 300px;
width: 300px;
position:relative;
display:inline-block;
overflow:hidden;
filter: url('#goo');
}
.palette > * {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:var(--s) solid var(--c,red);
border-radius:50%;
clip-path:polygon(
calc(50% + var(--g)/2) 50%,
calc(50% + var(--g)/2) 0%,
100% 0%,
100% calc(33.745% - var(--g)/2),
50% calc(50% - var(--g)/2));
}
.color1 {
transform:rotate(72deg);
--c:blue;
}
.color2 {
transform:rotate(144deg);
--c:orange;
}
.color3 {
transform:rotate(-72deg);
--c:green;
}
.color4 {
transform:rotate(-144deg);
--c:purple;
}<div class="palette">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>SVG stroked paths can benefit from the same filter:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 60 60">
<defs>
<filter id="round">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="round1" />
<feColorMatrix in="round1" mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -14" result="round2"/>
<feComposite in="SourceGraphic" in2="round2" operator="atop"/>
</filter>
</defs>
<style>
path{
fill:none;
stroke-width:9;
}
</style>
<path stroke-dasharray="70 230" stroke-dashoffset="94" value="70" stroke="blue"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="55 245" stroke-dashoffset="173" value="55" stroke="gold"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="45 255" stroke-dashoffset="242" value="45" stroke="purple"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="30 270" stroke-dashoffset="296" value="30" stroke="red"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
</svg>
<style> svg{ width:180px; background:lightgreen } </style>I'm having trouble integrating the ckeditor into an HTML page that's built with angularjs. Despite trying out numerous examples, such as the ng-ckeditor and ckeditor directives, I haven't found a solution that works for me. What I need is ...
Seeking help in adding a checkbox column to a Kendo UI Vue grid. The column should display the values of a boolean field from the grid's data source. While I am aware of how to add a checkbox column for selection as demonstrated here: https://www.tele ...
Before setting up renovate to work with my Azure pipeline, I wanted to test it locally using npx renovate to ensure everything is working as expected and that my config file is properly configured. I ran npx renovate --platform local command. My project i ...
In the default Spark theme in Flex 4, what type of styling is included? Additionally, how can one override the Spark theme? For instance, when attempting to change the background color but seeing no effect, even though the CSS code appears correct. Here&ap ...
I am currently attempting to create a unique Navigation Bar design using bootstrap Here is the code snippet I am working on: <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b ...
Recently, I've been diving into the bluebird promises library. To practice using it, I set up a basic express app with just one file and one route - a GET request to /test. The scenario I'm working on involves a promise with an interval that res ...
My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...
I am currently working on a project that involves using canvas. I have set a picture as the background of the canvas and would like to be able to get the original pixel point when clicking in the image area. In order to achieve this, I need to convert canv ...
I'm facing an issue with two audio files that have a progress bar and both have the same ID: <audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio> </p> ...
I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...
I'm currently working on creating a website for my friend who is a massage therapist. Utilizing a bootstrap dropdown menu, I have added links to different treatments that direct to the treatment.html from the index.html page. Is there a way to creat ...
Currently, I am in the process of constructing a website on rails and have successfully integrated a site-wide navigation bar to display on all pages. However, an issue has arisen where the navbar is visible on both pages, yet the links and hover effects a ...
I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...
I am new to coding and I need help adding a scrollTop margin of +100px to my code. The page already has some top margin but I can't seem to locate it. I'm also having trouble finding where the margin-top is being set in the JavaScript file. /*** ...
I have a page with approximately 20 input fields, along with save and register buttons. Is there a way to activate the "save" button only when a change has been made in at least one of the fields? ...
When submitting a contact form, I want to display and hide a spinner on the submit button. The spinner should be visible while the form is being submitted and hidden once the submission is complete. Below is the code for my submit button with the spinner: ...
I'm struggling to match the appearance of the last row with the others, but I want to include the icon in the text box. Adjusting the width has been a challenge! (I'm sorry for the inconvenience, the code snippet may not display correctly on thi ...
I have designed a custom modal that displays a child element function MyModal({ children, setShow, }: { children: JSX.Element; setShow: (data: boolean) => void; }) { return ( <div className="absolute top-0 w-full h-screen fle ...
I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...
As I work on creating a registration web page, ensuring security is key. That's why I'm looking for a way to generate captcha images for added protection. Any suggestions on how I can transform text into captcha images? ...