Shapes recolored

Developer
Kittons
Size
2,268 Kb
Views
32,384
  1. Shapes recolored Previews
  2. Shapes recolored HTML Codes
  3. Shapes recolored CSS Codes
  4. Shapes recolored JS Codes

How do I make an shapes recolored?

Play around with the color pickers to change the animation colors. Experimenting with exporting from AE with associated classes to modify default colors. . What is a shapes recolored? How do you make a shapes recolored? This script and codes were developed by Kittons on 09 September 2022, Friday.

Shapes recolored Previews
IQ Test

Shapes recolored - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shapes recolored</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="colorControls"> <input class="jscolor" value="43B195" id="color1"> <input class="jscolor" value="EA4352" id="color2"> <input class="jscolor" value="FAE935" id="color3"> <input class="jscolor" value="BBDC98" id="color4">
</div>
<div id="bodymovin"></div> <script src='https://labs.nearpod.com/bodymovin/demo/colors/bodymovin.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/colors/jscolor.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shapes recolored - Script Codes CSS Codes

.color1 { fill: #43B195; stroke: #43B195;
}
.color2 { fill: #EA4352; stroke: #EA4352;
}
.color3 { fill: #FAE935; stroke: #FAE935;
}
.color4 { fill: #BBDC98; stroke: #BBDC98;
}
#bodymovin { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.colorControls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
html,body{ margin:0; overflow: hidden;
}

Shapes recolored - Script Codes JS Codes

var bodymovinContainer = document.getElementById('bodymovin');
var count = 0;
var animData = { container: document.getElementById('bodymovin'), renderer: 'svg', loop: true, prerender: false, autoplay: true, autoloadSegments: false, //animationData: anim2 path: 'https://labs.nearpod.com/bodymovin/demo/colors/data.json'
};
var anim;
anim = bodymovin.loadAnimation(animData);
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var color1 = document.getElementById('color1');
var color2 = document.getElementById('color2');
var color3 = document.getElementById('color3');
var color4 = document.getElementById('color4');
function changeRuleColor(rule, color) { rules[rule].style.fill = '#' + color; rules[rule].style.stroke = '#' + color;
}
function checkColor() { changeRuleColor(0, color1.value); changeRuleColor(1, color2.value); changeRuleColor(2, color3.value); changeRuleColor(3, color4.value);
}
setInterval(checkColor, 10);
Shapes recolored - Script Codes
Shapes recolored - Script Codes
Home Page Home
Developer Kittons
Username airnan
Uploaded September 09, 2022
Rating 4.5
Size 2,268 Kb
Views 32,384
Do you need developer help for Shapes recolored?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kittons (airnan) Script Codes
Name
The Glitcher
Adventure Interactive Time in 2.75D
Bug Industries - The Lady
Dotskin
La beta
IK from After Effects to svg
Perricorn. a dog that was a unicorn
Svg jou jou monster
Movin bodymovin
Interactive IK from After Effects to svg
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!