--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 215 20" style="enable-background:new 0 0 215 20;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+ .st1{fill:#E3E3E3;}
+</style>
+<g>
+ <path class="st0" d="M0,0v20h215V0H0z M203,15h-20.9V6H203c2.5,0,4.5,2,4.5,4.5S205.5,15,203,15z M11,6h20.9v9H11
+ c-2.5,0-4.5-2-4.5-4.5S8.5,6,11,6z M181.4,6v9h-24.2V6H181.4z M156.5,6v9h-24.2V6H156.5z M131.5,6v9h-24.2V6H131.5z M106.6,6v9
+ H82.5V6H106.6z M81.7,6v9H57.5V6H81.7z M56.8,6v9H32.6V6H56.8z"/>
+ <path class="st1" d="M203,4.5H11c-1.7,0-3.2,0.7-4.2,1.8C5.7,7.4,5,8.9,5,10.5c0,3.3,2.7,6,6,6h192c1.7,0,3.2-0.7,4.2-1.8
+ c1.1-1.1,1.8-2.6,1.8-4.2C209,7.2,206.3,4.5,203,4.5z M31.9,15H11c-2.5,0-4.5-2-4.5-4.5S8.5,6,11,6h20.9V15z M56.8,15H32.6V6h24.2
+ V15z M81.7,15H57.5V6h24.2V15z M106.6,15H82.5V6h24.2L106.6,15L106.6,15z M131.5,15h-24.2V6h24.2V15z M156.5,15h-24.2V6h24.2V15z
+ M181.4,15h-24.2V6h24.2V15z M203,15h-20.9V6H203c2.5,0,4.5,2,4.5,4.5S205.5,15,203,15z"/>
+</g>
+</svg>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta name="width" content="215">
+ <meta name="height" content="20">
+ <meta charset="UTF-8">
+ <title></title>
+ <style>
+ body, html {
+ height: 100%;
+ }
+
+ body {
+ width: 100%
+ }
+
+ * {
+ padding: 0;
+ margin: 0;
+ }
+
+ #cache {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ transition: clip-path 500ms;
+ }
+
+ </style>
+ <script>
+ function round(num) {
+ return Math.round((num + Number.EPSILON) * 100) / 100;
+ }
+
+ function update() {
+ var x = [0, 32.5, 57.3, 82, 107.2, 132, 157, 182, 215];
+ var coins = 8;
+ try {
+ coins = Math.max(0, Math.min(x.length, parseInt(parent.fluidbook.gamify.getTotalCoins('S'))));
+ } catch (e) {
+
+ }
+
+
+ var clipLeft = round(100 * (x[coins] / 215)) + '%';
+ var clipPath = 'inset(100% 100% 100% ' + clipLeft + ')';
+ document.getElementById('cache').style.clipPath = clipPath;
+ }
+
+ document.addEventListener("DOMContentLoaded", function () {
+ update();
+ setInterval(update, 250);
+ });
+
+ </script>
+</head>
+<body>
+<img src="cache.svg" id="cache">
+</body>
+</html>
\ No newline at end of file
projects / Animations.git / commitdiff
