When this site first loads there’s this animation where there’s a triangle that traces over another triangle.
Image
http://nueuphoria.com/
How would I replicate the same thing?
Where the triangle traces over the other triangle.
Can someone provide a jsfiddle of how it's done.
I found this from the site, but I don't know how to put it together.
https://jsfiddle.net/s2z3xyd8/6/
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66">
<defs>
<style>
.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style>
</defs>
<g id="Слой_2" data-name="Слой 2">
<g id="play">
<path class="cls-1" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path>
</g>
</g>
</svg>
</div>
It is just using the common line drawing technique of animating the stroke-dashoffset. The bit you were missing was the #keyframes` definition(s).
.logo-load_w svg path {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
-webkit-animation: draw 20s infinite linear;
animation: draw 20s infinite linear;
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<div class="logo-load_w">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style></defs><g id="Слой_2" data-name="Слой 2"><g id="play"><path class="cls-1" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path></g></g></svg>
</div>
The dark triangle in the background is just a second copy of the SVG, with the stroke colour set to a different colour.
Update
The simplest way to have a darker triangle behind the blue one, is not the way the original site does it. It is easier just to add a second copy of the triangle into the SVG. You put it earlier in the SVG, so that it is drawn first. And make its stroke colour black.
.logo-load_w svg .play {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
-webkit-animation: draw 20s infinite linear;
animation: draw 20s infinite linear;
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<div class="logo-load_w">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66">
<defs>
<style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style>
</defs>
<g class="cls-1">
<path stroke="black"
d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
<path class="play"
d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
</g>
</g>
</svg>
</div>
I want to use a spotlight effect but it only seems to work in Chrome, looks "just ok" in Firefox, but will not position (x,y,z) in Safari. (Other browsers not tested)
I've tried different filter and primitive units, and while this makes a difference, Safari still cannot seem to position the lighting effect in any case.
In pursuit of understanding what is going on, I've tried lots of workarounds including different userSpaceOnUse/objectBoundingBox combos, and different svg structure but have never been able to find one that works on Safari.
Examples
Default filter/primitive units:
https://jsfiddle.net/localnerve/y470d52v/
objectBoundingBox units:
https://jsfiddle.net/localnerve/uyc7o52k/
A picture is also worth a 1000 words (Safari, Chrome, FF). The spotlight on Safari is rendered off-canvas to the right and bleeds in from the right.
To show the spotlight positions on Safari are "out of whack", here's me nudging them in web inspector so I can see the spotlight render at all:
Here is the code using objectBoundingBox filter and primitive units:
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
color: #fff;
}
* {
transform-origin: 50% 50% 0;
}
.scene-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.scene-container.content {
position: relative;
width: 100%;
height: 150vh;
background-image: linear-gradient(hsla(240, 90%, 8%, 1) 0%, 99%, hsla(217,24%,71%,0) 100%);
box-shadow: 0px -10px 20px hsl(240, 90%, 8%);
}
.spot {
height: 100%;
width: 100%;
}
</style>
<body>
<div class="scene-container content">
<h2>Here's a spotlight.</h2>
<svg class="spot" viewBox="0 0 2000 3000" preserveAspectRatio="xMidYMid">
<defs>
<filter x="-0.2" y="-0.2" width="1.4" height="1.4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" id="spotlight">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"></feGaussianBlur>
<feSpecularLighting result="specOut" in="blur1" specularConstant="1.8" specularExponent="5" lighting-color="#ffffff">
<feSpotLight x="0.5" y="-0.4" z="0.03" pointsAtX="0.5" pointsAtY="0.8" pointsAtZ="0" limitingConeAngle="13.7"></feSpotLight>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
</filter>
<clipPath id="spot-clip">
<rect x="-50" y="2840" width="2200" height="200"></rect>
</clipPath>
<filter id="spot-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="15">
</feGaussianBlur>
</filter>
</defs>
<g transform="translate(0, -175)" filter="url(#spotlight)">
<ellipse cx="50%" cy="95.333%" rx="27%" ry="130" fill="#fff" clip-path="url(#spot-clip)" filter="url(#spot-blur)"></ellipse>
<rect x="25%" y="43.667%" width="50%" height="50%" stroke="peru" stroke-width="3%" stroke-linejoin="round" fill="#000"></rect>
</g>
</svg>
</div>
</body>
Any insight you can give is greatly appreciated.
There are known bugs in webkit/Safari for light source positioning wrt transforms and oBB units. After the webkit/blink engine schism, no-one at Apple picked these bugs up from the Chrome team.
https://bugs.webkit.org/show_bug.cgi?id=88877
https://bugs.webkit.org/show_bug.cgi?id=113059
The workaround is not to use transforms and oBB units (do any dynamic positioning or sizing via JavaScript)
I'm trying to create a simple SVG with ellipse elements, but in Safari (and only Safari), it's drawing all non-circular ellipses with doubled stroke width. If the ellipse is perfectly circular (rx == ry) then it draws it normally.
Has anyone seen this behavior before, or have any idea how to work around it? I'm seeing the behavior on macOS 10.12.1, Safari 10.0.1 (12602.2.14.0.7). It also only appears on my retina display (2014 MBP) and not on an external non-retina display.
Here's the html file I'm using:
<!DOCTYPE html>
<body>
<style>
circle {
stroke: blue;
stroke-width: 3;
fill: none;
}
ellipse {
stroke: green;
stroke-width: 3;
fill: none;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="40"/> <!--Draws with normal stroke-->
<circle cx="60" cy="60" r="40"/> <!--Draws with normal stroke-->
<ellipse cx="70" cy="70" rx="40" ry="20"/> <!--Draws with doubled stroke-->
<ellipse cx="80" cy="80" rx="20" ry="20"/> <!--Draws with normal stroke-->
</svg>
</body>
And here's a screenshot of the result:
This issue is with an underlying framework. It will be rectified in the next OS update.
https://bugs.webkit.org/show_bug.cgi?id=164505#c3
How can I achieve something like this using SVG?
You would need two different circle elements, one for the underlying gray color and the other for the blue stroke, then apply a stroke-dasharray and stroke-dashoffset to the blue stroke.
.track,
.filled {
stroke-width: 10;
fill: none;
}
.track {
stroke: #eee;
}
.filled {
stroke: blue;
stroke-dashoffset: 110;
stroke-dasharray: 440;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190">
<circle class="track" cx="80" cy="80" r="70" />
<circle class="filled" cx="80" cy="80" r="70" />
</svg>
I am pretty new to SVG and wanted to ask for a best approach to the following design:
I believe SVG is the way to go here since I need hover and click effects on each of the red arc pieces. These values and this design are essentially hardcoded and will not change. Are there any tools / libraries (D3 or Raphael) that would make this easier for me?
Thanks In Advance.
meetamit's suggestion is a good one. Or you could look into the 'sector' method shown here:
Half circle using raphael
You don't really need d3 or even an editor. It's a design that is easy to code by hand.
I was bored, so I whipped this up in about 10 minutes.
document.getElementById("band4").addEventListener("click", function(e) {
alert("50+");
}, false);
document.getElementById("band3").addEventListener("click", function(e) {
alert("20-50");
}, false);
document.getElementById("band2").addEventListener("click", function(e) {
alert("10-20");
}, false);
document.getElementById("band1").addEventListener("click", function(e) {
alert("Less than 10");
}, false);
svg {
position: absolute;
top: 0px;
}
circle.band {
fill: #a20c3e;
}
circle.band:hover {
fill: #ca3f5e;
}
text {
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
fill: white;
}
tspan.sup {
font-size: 6px;
}
text.sub {
font-size: 5px;
font-weight: normal;
}
<img src="http://lorempixel.com/400/200/" width="100%"/>
<svg viewBox="-100 -100 200 100">
<defs>
<mask id="target">
<rect x="-100" width="100%" height="100%" fill="black"/>
<circle r="97" fill="white"/>
<circle r="77" fill="black"/>
<circle r="74" fill="white"/>
<circle r="54" fill="black"/>
<circle r="51" fill="white"/>
<circle r="31" fill="black"/>
<circle r="28" fill="white"/>
</mask>
</defs>
<circle id="band4" class="band" r="98" mask="url(#target)"/>
<circle id="band3" class="band" r="75" mask="url(#target)"/>
<circle id="band2" class="band" r="52" mask="url(#target)"/>
<circle id="band1" class="band" r="29" mask="url(#target)"/>
<text y="-82" text-anchor="middle" pointer-events="none">50<tspan class="sup" font-size="50%" dy="-0.7em">+</tspan></text>
<text y="-59" text-anchor="middle" pointer-events="none">20-50</text>
<text y="-36" text-anchor="middle" pointer-events="none">10-20</text>
<text y="-17" text-anchor="middle" class="sub" pointer-events="none">Less than</text>
<text y="-6" text-anchor="middle" pointer-events="none">10</text>
</svg>