Skip to content

Instantly share code, notes, and snippets.

@KoGor

KoGor/PS4.svg

Created December 28, 2013 15:42
Show Gist options
  • Save KoGor/8160770 to your computer and use it in GitHub Desktop.
Save KoGor/8160770 to your computer and use it in GitHub Desktop.
Download ZIP
PlayStation 4: SVG animation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<title>SVG path animation</title>
<link href="style.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
</head>
<body>
<!-- start -->
<div id="pathAnimation">
<script src="pathAnimation.js"></script>
</div>
<!-- end -->
</body>
</html>
Raw
pathAnimation.js
queue()
.defer(d3.xml, "PS4.svg", "image/svg+xml")
.await(ready);
function ready(error, xml) {
//Adding our svg file to HTML document
var importedNode = document.importNode(xml.documentElement, true);
d3.select("#pathAnimation").node().appendChild(importedNode);
var svg = d3.select("svg"),
svgWidth = svg.attr("width"),
svgHeight = svg.attr("height");
var paths = svg.selectAll("path")
.call(transition);
function transition(path) {
path.transition()
.duration(5000)
.attrTween("stroke-dasharray", tweenDash)
.each("end", function() { d3.select(this).call(transition); }); // infinite loop
}
function tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l); // interpolation of stroke-dasharray attr
return function(t) {
return i(t);
};
}
}
Display the source blob
Display the rendered blob
Raw
PS4.svg
<svg version="1.1" class="wire-wrapper" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="960" height="500" viewBox="0 0 1166.8 736.9" xml:space="preserve" style="display: block;">
<!-- Controller -->
<g>
<!-- Outline -->
<g>
<path d="M256.7,513.1l53.9-13.9c0,0,0.8-16,9.8-23.8"></path>
<path d="M169.3,517.9c0,0-7,12.1-8.4,24.3"></path>
<path d="M391.2,457.6c0,0,49.3-31.9,99.2,18.5"></path>
<path d="M519.9,508.4c0,0,12.9,35.6,6,71.1c-0.1,0.3-0.1,0.6-0.2,0.9l-6.2,21.1c-27,21.4-53.1,15.2-53.1,15.2"></path>
<path d="M426.6,593.8l8.1-3.3c0,0,11-4.2,17.2,1.5l11.1,7.7"></path>
<path d="M516,604.2c0,0,1.3,4.8-1.7,9.7"></path>
<path d="M148.6,544.5c0,0-31.7-0.4-53.7-5.4c-22-4.9-113.9,4.3-90.1,70c18.8,51.9,107.1,57.4,107.1,57.4
s12.7,1.7,26.4,11.9c13.6,10.1,31.6,24.6,31.6,24.6s5.7,1.9,8.8-1.5"></path>
<path d="M60.3,539.9c-36,4.3-51.7,44.2-39.7,64.5c13,22.1,51.7,32,59.8,35c8.1,2.9,36.8,14.8,45.3,19.5
c8.5,4.7,41.1,22,41.1,22h4.7"></path>
<path d="M273.4,634.6c0,0-19.1,1-25.5,13.5c0,0-1.1,5.1-6.9,10.1"></path>
<path class="controller-light" d="M416.1,609.2c-31.9,6.7-136.9,34.4-148.8,42c-3.7,2.3-1,5.8,5.2,4.6c18.8-3.5,65.8-10.5,80.9-16.6
c15.1-6.1,45.2-14.8,62.7-25.1C422.4,610.4,417.3,609,416.1,609.2z"></path>
</g>
<!-- Square Screen Thing (idk what this is) -->
<g>
<line x1="306.3" y1="584.2" x2="417.2" y2="556.4"></line>
<line x1="338.3" y1="581.9" x2="420" y2="561.3"></line>
<path d="M392.4,523.8c0,0-6.4-9.3-17.4-4.6s-129.7,33-129.7,33s-11.6,5.2-4.6,13.3c6.9,8.1,22,30.7,22,30.7
s5.8,4.6,7,15.1c1.2,10.4,1.5,17.2,3.5,22.6c1,2.9,3.5,6.4,11,5.2c7.5-1.2,134.9-36.5,134.9-36.5s8.8-3.2,8.7-16.2
c0-4.9-4.7-18-7.7-25.1C416.4,553.1,392.4,523.8,392.4,523.8z"></path>
</g>
<!-- Right Thumbstick -->
<g>
<path d="M242,498.7c0,9-12.5,16.2-28,16.2c-14.2,0-26-6.1-27.8-14.1c-0.2-0.7-0.2-1.4-0.2-2.1c0-9,12.5-16.2,28-16.2
S242,489.8,242,498.7z"></path>
<path d="M186,496.9c-1.9,5-0.5,13.2,4.4,18.1c5.3,5.2,12.2,6.8,23.6,6.8c13.9,0,20.1-2.4,24.1-7.2
c2.2-2.7,5.8-11.4,3.9-16.4"></path>
<path d="M202.6,521.1v5.6c0,0,6.6,6.4,20.3,1.2"></path>
<path d="M241.6,507.2c2.1,2.8,3.3,6,3.3,9.4c0,11.5-13.7,20.8-30.7,20.8c-17,0-30.7-9.3-30.7-20.8
c0-2.8,1.4-5.4,2.9-7.9"></path>
<path d="M241.6,501.5c10.4,5.4,18,13.7,18,23.1c0,16.4-20.4,28.6-45.6,28.6c-25.2,0-45.6-13.3-45.6-29.6
c0-9.3,6.5-17.5,16.8-23"></path>
</g>
<!-- Left Thumbstick -->
<g>
<path d="M335.2,458.7c-1.9,5-0.5,13.2,4.4,18.1c5.3,5.2,12.2,6.8,23.5,6.8c13.9,0,20.1-2.4,24.1-7.2
c2.2-2.7,5.8-11.4,3.9-16.4"></path>
<g>
<path d="M391.2,460.5c0,9-12.5,16.2-28,16.2c-14.2,0-26-6.1-27.8-14.1c-0.2-0.7-0.2-1.4-0.2-2.1
c0-9,12.5-16.2,28-16.2C378.7,444.3,391.2,451.5,391.2,460.5z"></path>
<path d="M351.8,482.9v5.6c0,0,6.6,6.4,20.3,1.2"></path>
<path d="M390.8,469c2.1,2.8,3.3,6,3.3,9.4c0,11.5-13.7,20.8-30.7,20.8c-17,0-30.7-9.3-30.7-20.8
c0-2.8,1.4-5.4,2.9-7.9"></path>
<path d="M396.8,505.3c-8.3,5.9-20.3,9.6-33.6,9.6c-25.2,0-45.6-13.3-45.6-29.6c0-9.3,6.5-17.5,16.8-23"></path>
<path d="M391.7,462.2c9.8,5.1,16.3,12.8,17,21.5c0,0.5,0.1,1.1,0.1,1.6"></path>
</g>
</g>
<!-- Share & Option -->
<g>
<path d="M433.9,568.3L452.3 563.7 454.2 568.3 434.8 573.4 z"></path>
<path d="M234.7,621.4L264.2 614.5 265.3 619.1 236.2 626 z"></path>
<path d="M437.4,542.8c-2.8-2.4-12.1-3.2-12.2,4.6c0,2.1,6.9,10.9,6.9,10.9s1.3,2.1,1.9,2.6c1.9,1.8,8.3,4.2,10-3.1
c0.2-0.9,0.2-2.6,0-3.5C443.1,551.1,439.8,545,437.4,542.8z"></path>
<path d="M246.6,593.2c-2.9-2.5-13.2-3.9-13.2,4.2c0,2.2,7.8,11.8,7.8,11.8s1.4,2.1,2,2.7c1.9,1.9,10.5,2,10.3-3.2
c0-0.9,0.2-2.7,0-3.6C252.5,601.8,249.1,595.5,246.6,593.2z"></path>
</g>
<!-- Bumper Buttons -->
<g>
<!-- Left Trigger -->
<path d="M241.2,671.2c1.6-1.5,6-3.8,15.4-4.3c13.7-0.8,58.7-2.6,71.4-5.2c15.6-3.2,88.6-38.8,99.6-43.2
c11-4.3,16.4-0.6,16.4-0.6s20.9,14.2,22.4,20.2c0.1,0.2-1.3,4.5-1.2,4.7c0.2,0.4,0.3,0.7,0.5,1c7.5,14.5,16.2,14.2,20.1,14.4
c6.5,0.3,9.4-2.1,17.7-16.6c4.1-7.2,8.8-19,12.5-28.9c0,0-18.5,15-49.2,9.2c0,0,1.1,14.3-1.5,21.1"></path>
<!-- Left Button -->
<path d="M523.9,586.8c0,0-2.5-15.7-29.9-9.1c-27.3,6.6-27.2,39.6-27.2,39.6l-3.4-8c0,0-1-11.9,0-15.7
c1.5-5.8,6-18.2,31.7-24.9c22.2-5.8,28.5,3.7,30.7,11.8"></path>
<!-- Right Button -->
<path d="M238.9,664.5c0,0-2.8-15.9-33.1-9.1c-33,7.4-30.1,39.6-30.1,39.6l-3.8-8c0,0-1.1-11.9,0-15.7
c1.7-5.8,6.6-18.2,35-24.9c24.6-5.8,31.5,3.7,34,11.8c0,0,9.1,31.3-32.5,36.9c-7.2,1-13.6,4.1-32.7,0"></path>
<!-- Right Trigger -->
<path d="M178.8,701.6c33.3,10.5,55.9-7.8,55.9-7.8s-1.6,9.8-9.2,28.7c-7.5,18.8-29,15.9-34.7,2.9
c-5.8-13-12.5-24.3-12.5-24.3l-2.6-6"></path>
<path d="M235.1,683.3c0,0,1.2,7.8-2.5,12.5"></path>
</g>
<!-- D Pad -->
<g>
<!-- Outline -->
<path d="M402.1,505c0-20.6,26.6-35.5,59.5-35.5c28.8,0,58.3,22.1,58.3,35.5c0,20.6-14.1,37.2-58.3,37.2
C428.7,542.2,402.1,525.6,402.1,505z"></path>
<!-- Buttons -->
<g>
<path d="M466.5,507l5.8-10.2l15.1-8.3c0,0,3.6-1.8,7,3.1c3.4,4.9,4.6,6.4,4.6,6.4s-0.3,2.1-1.7,2.4
c-1.4,0.3-18,7.8-18,7.8L466.5,507z"></path>
<path d="M498.9,498.1L498.2 506.3 480.3 510.5 466.5 507 "></path>
</g>
<g>
<path d="M459.7,504.3l4.6-12.6l-7.7-11.7c0,0-16.4-6-22,7.3l9.4,11.9L459.7,504.3z"></path>
<path d="M434.6,487.3L434.6 494.2 442.6 502.2 459.7 504.3 "></path>
</g>
<g>
<path d="M456.3,508.4l-14.7-2.5h-18.3c0,0-1.9,1.9,0,3.7c1.9,1.7,7.8,7.5,7.8,7.5s0.9,1.4,3.6,0.8
c1.7-0.3,11.5-0.4,14.9-2.2C451.7,514.6,456.3,508.4,456.3,508.4z"></path>
<path d="M422.4,507.7L422.4 514.9 431.9 525 "></path>
<path d="M456.3,508.4c0,0-3.1,9.1-5.3,11.3c-0.5,0.6-2.1,1.2-2.8,1.5c-3.9,1.5-16.2,3.8-16.2,3.8v-7.2"></path>
</g>
<g>
<path d="M459.7,519.2l6.8,7.9c0,0,1.4,0.8,3.7,0c2.3-0.8,17.8-5.2,17.8-5.2s1.7-1.2,0-2.1c-1.7-1-10.6-4.8-10.6-4.8
l-12.9-2.9L459.7,519.2z"></path>
<path d="M459.6,519.2v5.2l7.9,9.8c0,0,14.1,2.5,21.2-6.9v-5.8"></path>
<line x1="467.5" y1="534.2" x2="467.7" y2="527.7"></line>
</g>
</g>
<!-- Face Buttons -->
<g>
<!-- Outline -->
<path d="M231.2,573.9c0.8,2.6,1.3,5.3,1.3,8.1c0,22-28,39.8-62.5,39.8c-34.5,0-62.5-17.8-62.5-39.8
c0-21.1,25.9-38.4,58.7-39.7"></path>
<!-- Triangle -->
<g>
<path d="M204.8,605c0,6.4-6.9,10.8-16.2,10.8s-16.5-5.2-16.5-11.5"></path>
<path d="M177.7,600.5L191.7 594.1 194.8 607.6 z"></path>
</g>
<!-- Square -->
<g>
<path d="M222.2,574.7c0,6.4-6.9,10.8-16.2,10.8c-9.3,0-16.5-5.2-16.5-11.5"></path>
<path d="M206.8,563.9L194.2 570.3 204.8 578.6 218.2 571.6 z"></path>
</g>
<!-- X -->
<g>
<path d="M171.7,561.9c0,6.4-6.9,10.8-16.2,10.8c-9.3,0-16.5-5.2-16.5-11.5"></path>
<line x1="154.1" y1="565.5" x2="156.5" y2="551.7"></line>
<line x1="165.1" y1="558.8" x2="146.1" y2="556.4"></line>
</g>
<!-- Circle -->
<g>
<path d="M152.9,592.3c0,6.4-6.9,10.8-16.2,10.8c-9.3,0-16.5-5.2-16.5-11.5"></path>
<ellipse cx="136.3" cy="588.6" rx="9" ry="6.6"></ellipse>
</g>
</g>
</g>
<!-- PS4 -->
<g>
<!-- Top Outline -->
<g>
<path d="M746,460L769 386 1165 131 1144 199 z"></path>
<path d="M1165,131L758 51 756 54 751.4 52.8 753.4 49 522 1 81 207 328 270 769 386 "></path>
<path d="M315.4,345.4L335.6 272 758 51 "></path>
<path d="M309.4,343.4L330.5 270.7 753.4 49 "></path>
<path d="M81,207L58 276.7 746 460 "></path>
</g>
<!-- Bottom Outline -->
<g>
<path d="M547.3,522.3L712.7 569.4 1116.7 295.5 1134.7 227.4 1108.9 222.7 "></path>
<path d="M90,286.1L49.4 308.7 29.4 378 277.4 447.4 286.1 440.8 284 447.4 311.3 455.1 "></path>
<path d="M49.4,308.7L734.7 494.7 1134.7 227.4 "></path>
<line x1="277.4" y1="447.4" x2="297.5" y2="376.1"></line>
<line x1="284" y1="447.4" x2="305.6" y2="378.5"></line>
</g>
<!-- Middle Outline -->
<g>
<path d="M93.2,286.1L93.2 300 427.2 390.6 "></path>
<path d="M724.4,454.3L724.4 470.7 531.4 420.9 "></path>
<line x1="724.4" y1="470.7" x2="734.9" y2="467"></line>
<!-- Ports -->
<g>
<path d="M440.4,382.4L440.4 396.1 467.9 403 467.9 389 z"></path>
<line x1="443" y1="392.7" x2="465" y2="397.7"></line>
</g>
<g>
<path d="M499.3,398.5L499.3 412.2 526.8 419.2 526.8 405.2 z"></path>
<line x1="502" y1="408.8" x2="524" y2="413.8"></line>
</g>
</g>
<!-- PS4 Logo -->
<g>
<path d="M633.5,399.4l3.5-8.5l17.2,5.2c2.4,0.1,9.7-2.7,3.8-9l-18.5-5.2"></path>
<path d="M691.9,396.1l-10.7-3.8c0,0-2.7-1-4,1.9l-4.7,12.6c0,0-1.3,2.3-4,1.5l-9.8-3.2"></path>
<path d="M706.9,420.9L714.2 401.9 689 410 713.2 418.5 "></path>
</g>
</g>
</svg>
Raw
style.css
path, line, ellipse {
fill: none;
stroke: #000;
stroke-width: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment