D3.js interpolateHsl() Function
Last Updated :
24 Jul, 2020
The d3.interpolatorHsl() function of D3.js is used to return the HSL color space interpolator function of two given colors. The colors that are given are not to be in HSL format.
Syntax:
d3.interpolateHsl(a, b);
Parameters: It takes two parameters:
- a: It is a color name eg. red or green.
- b: It is also a color name eg. red or green.
Returns: It returns an interpolator function.
Below given are a few examples of the above function.
Example 1: Using the function in console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<script type = "text/javascript"
</script>
<script>
console.log("Type of the function is: ",
typeof(d3.interpolateHsl("white", "red")))
console.log(d3.interpolateHsl("white", "red")(0.9))
console.log(d3.interpolateHsl("white", "red")(0.4))
</script>
</body>
</html>
|
Output:
Example 2: Using the function in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
}
</style>
<body>
D3.interpolateHsl()
<div class="b1">
</div>
<div class="b2">
</div>
<script type = "text/javascript"
</script>
<script>
let color=d3.interpolateHsl("white", "green")(0.2);
let color2=d3.interpolateHsl("red", "green")(0.8);
let b1=document.querySelector(".b1");
let b2=document.querySelector(".b2");
b1.style.backgroundColor=color;
b2.style.backgroundColor=color2;
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...