How to do a vertical wave animation of a ribbon in svg? - javascript

My question is that I want to create a svg file (Code is mentioned below) like a vertical ribbon(which is already done), now I want to give a wave effect that will start from the top to the bottom and will be in continuous mode. But it isn't working.
#keyframes thread{
from {
stroke-dashoffset: 200;
opacity:.5;
}
to{
stroke-dashoffset: 2;
opacity:1;
}
}
.anime{
stroke-dasharray: 200;
animation: thread 2s .4s forwards infinite ease-in-out;
}
<div class="position-absolute">
<svg height="200" width="200" >
<g class="anime">
<path id="shape-1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="shape-2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
</div>


I think you're looking for something like this(correct me if I'm wrong):
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function(){
ribbon1.animate({ d: ribbon2Points }, 1000, toRibbon1);
}
var toRibbon1 = function(){
ribbon1.animate({ d: ribbon1Points }, 1000, toRibbon2);
}
toRibbon1();
h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
<path id="ribbon1" class="cls-1" d="M64.5,64.5c0,15-4,19-4,31a17.23,17.23,0,0,0,10,16h28s-11-8-11-17,1-16,1-30-1-25-1-25h-26S64.5,49.5,64.5,64.5Z" transform="translate(-58.85 -39)"/>
<path id="ribbon2" class="cls-1" d="M61,60c0,15,5.5,23.5,5.5,35.5s-6,16-6,16h28s5-4,5-13S85,76,85,62s2.5-22.5,2.5-22.5h-26S61,45,61,60Z" transform="translate(-58.85 -39)"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>
it probably requires some tweaking in the paths itself to make for a more realistic effect. Here it is specifically applied to your paths:
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function() {
ribbon1.animate({
d: ribbon2Points
}, 1000, toRibbon1);
}
var toRibbon1 = function() {
ribbon1.animate({
d: ribbon1Points
}, 1000, toRibbon2);
}
toRibbon1();
h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg height="200" width="200">
<g class="anime">
<path id="ribbon1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="ribbon2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>
Here's an extensive guide on how to make this (which I based my answer on). It's basically two SVG paths that morph into each other over time.

Related

Re-Center text position as str length changes

I am new to javascript and am having an issue repositioning animated text as the string length varies. I have an SVG element and a string within it, where that string needs to be centered within that SVG. Using ' | ' as a center reference, the centering would look like:
| | |
g g g g g g
If I start the animation with a str of len 3, it will be centered properly for Len 3 strs, but then other lens would be equivalent to:
| |
g g g
Example code:
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const str = obj.innerHTML;
// console.log(`${str.length}` );
if (`${str.length}`==="1"){
obj.style.x = '200px';
}
obj.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const obj = document.getElementById("heading");
animateValue(obj, 100, 0, 5000);
svg {
position: absolute ;
width: 40%;
border: 1px solid rgba(255,255,255,0.3);
margin-left: 30%;
border-radius: 50%;
}
#roseline, #majline {
stroke: #eee;
stroke-width: .5;
}
text {
font-family: Montserrat, sans-serif;
font-size: 10;
fill: #eee;
}
text.heading1{
font-size:4.5em;
fill: #0ee;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" id="compassrose">
<defs>
<symbol>
<line x1="40" y1="250" x2="50" y2="250" id="roseline" />
<line x1="40" y1="250" x2="60" y2="250" id="majline" />
<path d="M10,250a240,240 0 1,0 480,0a240,240 0 1,0 -480,0" id="rosecircle" transform='rotate(90 250 250)' />
</symbol>
</defs>
<div class="triangle-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" id="compassrose">
<polygon points="250,40 280,0 220,000" class="triangle" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" >
<polygon points="0,260 0,220 40,240" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" >
<polygon points="500,260 500,220 460,240" />
<text class="heading1" id="heading" x='190px' y='250px'
fontSize="36">100 </text>
</svg>
</div>
</svg>
I have tried re-arranging the divs to allow for the absolute and relative positioning, however that was not properly maintaining size relationships as needed.

If you use dominant-baseline="middle" text-anchor="middle" on the text element and position it in the middle of the SVG (250,250) it should work.
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const obj = document.getElementById("heading");
animateValue(obj, 200, 0, 5000);
svg {
display: block;
position: absolute;
width: 40%;
border: 1px solid rgba(255, 255, 255, .3);
margin-left: 30%;
border-radius: 50%;
}
#roseline,
#majline {
stroke: #eee;
stroke-width: .5;
}
text {
font-family: Montserrat, sans-serif;
font-size: 10;
fill: #eee;
}
text.heading1 {
fill: #0ee;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" id="compassrose">
<defs>
<symbol>
<line x1="40" y1="250" x2="50" y2="250" id="roseline" />
<line x1="40" y1="250" x2="60" y2="250" id="majline" />
<path d="M10,250a240,240 0 1,0 480,0a240,240 0 1,0 -480,0"
id="rosecircle" transform='rotate(90 250 250)' />
</symbol>
</defs>
<polygon points="250,40 280,0 220,000" class="triangle" />
<polygon points="0,260 0,220 40,240" />
<polygon points="500,260 500,220 460,240" />
<text class="heading1" id="heading" x="250" y="250" font-size="60"
dominant-baseline="middle" text-anchor="middle">100</text>
</svg>

Create a gauge chart in svg or css

I need to implement a chart that looks like this.
https://i.stack.imgur.com/jSIUp.png
I tried using in svg but I'm not able to achieve what I've needed. The code I've used is the following:
svg {
height: 90vh;
margin: auto;
display: block;
}
path.purple {
stroke: url(#gradient);
stroke-dasharray: 282;
stroke-dashoffset: 282;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg style="fill:none; stroke:#81125A" width="400" height="400">
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" stop-color="#81125A" />
<stop offset="100%" stop-color="#81125A" />
</linearGradient>
<path d=" M 124.58399310102934 183.5 A 79 75 0 0 1 118.30403252765396 121.58238841571327"stroke="#e7e7e8" stroke-dasharray="65,65"></path>
<path d=" M 123.90504313598774 109.6392784815247 A 79 75 0 0 1 198.51076142578597 71.18269623051319" stroke="#e7e7e8" stroke-dasharray="90, 90"></path>
<path d=" M 212.11182975237372 73.22782052930026 A 79 75 0 0 1 267.2357170420868 120.34848925057486" stroke="#e7e7e8" stroke-dasharray="75, 75"></path>
<path d=" M 270.79981248796446 132.97638667498023 A 79 75 0 0 1 259.99579959635764 185.74394481749036" stroke="#e7e7e8" stroke-dasharray="60,60"></path>
</svg>
Any help is greatly appreciated!

Does it have to look exactly like that? You can get a pretty quick version with ChartJS.
const ctx = document.getElementById("chart");
new Chart(ctx, {
type: "doughnut",
data: {
datasets: [{
data: [700, 200],
backgroundColor: ["rgb(133, 13, 123)", "rgb(235, 235, 235)"]
}, ],
},
options: {
rotation: Math.PI + 50,
circumference: Math.PI + 0.5,
cutoutPercentage: 90
},
});
#container {
position: relative;
width: 300px;
height: 300px;
margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div id="container">
<canvas id="chart" width="100%" height="100%"></canvas>
</div>

how to write #keyframes CSS, in Javascript [duplicate]

This question already has answers here:
Passing parameters to css animation
(3 answers)
Closed 2 years ago.
i have this svg with the respective css which animates the path.
HTML
<div>
<svg version="1.1" baseProfile="full" width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<path class="grey" fill="none" stroke="#B7C4D2" stroke-width="10" d="M 136 277 A 100 100 0 1 1 264 277"></path>
<path class="blue" fill="none" stroke="#30A7F4" stroke-width="10" d="M 136 277 A 100 100 0 1 1 264 277"></path>
</svg>
</div>
CSS
.blue {
stroke-dasharray: 490;
stroke-dashoffset: 490;
animation: draw 2s linear forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 260;
}
}
i want to make the "stroke-dashoffset: 260" value dynamic, any way to do that via JS?

One performant way of changing CSS with JS is using CSS variables.
you'd then have:
.blue {
stroke-dasharray: 490;
stroke-dashoffset: 490;
animation: draw 2s linear forwards;
}
#keyframes draw {
to {
stroke-dashoffset: var(--stroke-dashoffset);
}
}
and in your JS:
const theBlue = document.querySelectorAll('svg .blue')[0]
theBlue.style.setProperty('--stroke-dashoffset', 260)

you can inject internal style and you can send offest value to setAnimationOffest(120) dynamically.
function addAnimation(name, body) {
if (!dynamicStyles) {
dynamicStyles = document.createElement('style');
dynamicStyles.type = 'text/css';
document.head.appendChild(dynamicStyles);
}
dynamicStyles.sheet.insertRule(`#keyframes ${ name } {
${ body }
}`, dynamicStyles.length);
}
let dynamicStyles = null;
function addAnimation(name, body) {
if (!dynamicStyles) {
dynamicStyles = document.createElement('style');
dynamicStyles.type = 'text/css';
document.head.appendChild(dynamicStyles);
}
dynamicStyles.sheet.insertRule(`#keyframes ${ name } {
${ body }
}`, dynamicStyles.length);
}
function setAnimationOffest(offest){
addAnimation('draw', `
to { stroke-dashoffset: ${offest}; }
`);
};
setAnimationOffest(120);
.blue {
stroke-dasharray: 490;
stroke-dashoffset: 490;
animation: draw 2s linear forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 260;
}
}
<div>
<svg version="1.1" baseProfile="full" width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<path class="grey" fill="none" stroke="#B7C4D2" stroke-width="10" d="M 136 277 A 100 100 0 1 1 264 277"></path>
<path class="blue" fill="none" stroke="#30A7F4" stroke-width="10" d="M 136 277 A 100 100 0 1 1 264 277"></path>
</svg>
</div>

Vertical alignment on mobile devices and randomised colour javascript

I'm trying to make some tweaks to this website and having a bit of trouble.
http://accoutrements.studio
The 'Accoutrements' logo should be horizontally and vertically centred in the page. This seems to work fine on a desktop device, but it mis-aligns on a mobile device. See the screenshot for a better example — https://i.imgur.com/GnRSEmn.png
There's also a script to randomise the colour every time you click on the logo. However I'd like to have it so the page loads in black and white and then only randomises on click. At the moment I've created two separate pages (/index and /colour), but is there anyway to edit the javascipt so I don't have two separate pages?
There also seems to be a black box when you hover over the logo at smaller screen sizes. I'm not too sure why this is — https://i.imgur.com/pGA7d8U.png
Sorry for all of the questions and thank you!
Index
<!DOCTYPE html>
<html>
<head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/manifest.json" rel="manifest">
<meta content="#ffffff" name="theme-color">
<meta charset="UTF-8">
<meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
<meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accoutrements</title>
<link rel="stylesheet" type="text/css" href="accoutrements.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
</head>
<body>
<div class="corner_link about">
About
</div>
<div class="corner_link shop">
Shop
</div>
<div class="corner_link catalogue">
Catalogue
</div>
<div class="corner_link instagram">
Instagram
</div>
<div class="accoutrements">
<a href="/colour"><svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>Accoutrements</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg></a>
</div>
</body>
</html>
Colour
<!DOCTYPE html>
<html>
<head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/manifest.json" rel="manifest">
<meta content="#ffffff" name="theme-color">
<meta charset="UTF-8">
<meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
<meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accoutrements</title>
<link rel="stylesheet" type="text/css" href="accoutrements.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
</head>
<body>
<div class="corner_link about">
About
</div>
<div class="corner_link shop">
Shop
</div>
<div class="corner_link catalogue">
Catalogue
</div>
<div class="corner_link instagram">
Instagram
</div>
<div class="accoutrements">
<svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>Accoutrements</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg>
<script>
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
</script>
</div>
</body>
</html>
CSS
body {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
letter-spacing: 0px;
line-height: 27px;
font-weight: 400;
color: #111;
background-color: #fff;
}
.about {
position: fixed;
right: 40px;
bottom: 40px;
}
.shop {
position: fixed;
right: 40px;
top: 40px;
}
.catalogue {
position: fixed;
left: 40px;
top: 40px;
}
.instagram {
position: fixed;
left: 40px;
bottom: 40px;
}
a img {
text-decoration: none;
border:none;
border-bottom-style: none;
}
a:link {
text-decoration: none;
color: #111;
}
a:visited {
text-decoration: none;
color: #111;
}
a:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
a:active {
text-decoration: none;
color: #111;
}
.accoutrements {
top: 50%;
margin-top: 50vh;
transform: translateY(-50%);
cursor: pointer;
}
svg.logo {
position: relative;
max-width: 80%;
left: 10%;
}
svg.logo:emptyc {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1000px) {
svg.logo {
max-width: 800px;
position: inherit;
display: block;
margin: auto;
}
}
.text {
top: 50%;
margin-top: 50vh;
transform: translateY(-50%);
margin-left: 20px;
margin-right: 20px;
}

To fix the black box remove the following code in your css
a:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
Alignment issue looks fine to me on all devices. Tested.
To fix the coloring issue, no need to have separate pages. You can execute your script once the page loads. Suppose you want to color page after 5 seconds so your code will look like:
$(document).ready(function() {
setTimeout(function(){
// Your color logic
}, 5000);
});
So put this script in your index page only:
$(document).ready(function() {
setTimeout(function(){
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
}, 5000);
});

I want to place boxes of text and images on the corners of the path. How to do that?

I have defined a path over which a red dot moves on scrolling up and down. I want to place boxes of text and images on the corners of the path. So how do I go about doing that?
function positionTheDot() {
// What percentage down the page are we?
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Get path length
var path = document.getElementById("theMotionPath");
var pathLen = path.getTotalLength();
// Get the position of a point at <scrollPercentage> along the path.
var pt = path.getPointAtLength(scrollPercentage * pathLen);
// Position the red dot at this point
var dot = document.getElementById("dot");
dot.setAttribute("transform", "translate(" + pt.x + "," + pt.y + ")");
};
// Update dot position when we get a scroll event.
window.addEventListener("scroll", positionTheDot);
// Set the initial position of the dot.
positionTheDot();
.verylong {
height: 2000px;
}
svg {
width: 1000px;
height: 1000px;
align: center;
}
body {
background-color: #333333;
}
h1 {
color: red;
font-size: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<svg viewBox="0 0 820 820" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10 10 H 600 V 500 H 10 L 10 10" stroke="#d3d3d3" stroke-width="5" fill="none" id="theMotionPath"/>
<!--<circle cx="10" cy="110" r="3" fill="#000"/> <!--The bottom grey dot-->
<!-- <circle cx="110" cy="10" r="3" fill="#000"/> <!--The top grey dot-->
<!-- Red circle which will be moved along the motion path. -->
<circle cx="0" cy="0" r="5" fill="red" id="dot"/>
</svg>
<div class="verylong">
</div>
This is what I tried to do by adding div, I had added cx and cy in div but that didn't help.
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<svg viewBox="0 0 120 120">
<svg viewBox="0 0 820 820" xmlns="http://www.w3.org/2000/svg"
version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10 10 H 600 V 500 H 10 L 10 10" stroke="#d3d3d3" stroke-
width="5" fill="none" id="theMotionPath"/>
<!-- Red circle which will be moved along the motion path. -->
<circle cx="0" cy="0" r="5" fill="red" id="dot"/>
<div>This text is the actual content of the box.</div>
</svg>

Categories