Skip to content

Instantly share code, notes, and snippets.

@Naheulf
Created July 18, 2020 10:06
Show Gist options
  • Select an option

  • Save Naheulf/33f29042ef4e1807512e5756e8d58d68 to your computer and use it in GitHub Desktop.

Select an option

Save Naheulf/33f29042ef4e1807512e5756e8d58d68 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<svg
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="600"
height="600"
viewBox="-800 -800 1600 1600"
>
<title>
</title>
<defs>
<!-- Dégradé partie hautes -->
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,100,0);stop-opacity:1" />
</linearGradient>
<!-- Dégradé partie basse-->
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,100,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
<!-- Ombre bleue-vert -->
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(16,230,189);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,33,25);stop-opacity:1" />
</linearGradient>
<!-- -->
<pattern id="fondFixe" patternUnit="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="-45" begin="1s" dur="3s" repeatCount="indefinite"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-45" begin="1s" dur="3s" repeatCount="indefinite"/>
</rect>
</pattern>
<!-- Ombre noire -->
<filter id="f3" x="-50%" y="-50%" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="25" dy="25" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="15" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<filter id="f4" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="80" />
</filter>
<!-- Denture -->
<path id="dents" d="M 97.545,600 97.545,490.393 A 500,500 0 0,0 277.785,415.735 L 355.289,493.239 493.239,355.289 415.735,277.785 A 500,500 0 0,0 490.393,97.545 L 600,97.545 600,-97.545 490.393,-97.545 A 500,500 0 0,0 415.735,-277.785 L 493.239,-355.289 355.289,-493.239 277.785,-415.735 A 500,500 0 0,0 97.545,-490.393 L 97.545,-600 -97.545,-600 -97.545,-490.393 A 500,500 0 0,0 -277.785,-415.735 L -355.289,-493.239 -493.239,-355.289 -415.735,-277.785 A 500,500 0 0,0 -490.393,-97.545 L -600,-97.545 -600,97.545 -490.393,97.545 A 500,500 0 0,0 -415.735,277.785 L -493.239,355.289 -355.289,493.239 -277.785,415.735 A 500,500 0 0,0 -97.545,490.393 L -97.545,600 Z M 400,0 A 400,400 0 0,1 -400,0 A 400,400 0 0,1 400,0 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" begin="1s" dur="3s" repeatCount="indefinite"/>
</path>
<!-- Axe central -->
<path id="axeCentre" d="M 200,0 A 200,200 0 0,0 -200,0 A 200,200 0 0,0 200,0 Z M 100,0 A 100,100 0 0,1 -100,0 A 100,100 0 0,1 100,0 Z"/>
<!-- Masque pour dents -->
<clipPath id="masqueDents">
<use xlink:href="#dents"></use>
</clipPath>
<clipPath id="masqueOmbre">
<use xlink:href="#dents"></use>
<use xlink:href="#axeCentre"></use>
<!--<path d="M 400,0 A 400,400 0 0,1 -400,0 A 400,400 0 0,1 400,0 Z M 100,0 A 100,100 0 0,1 -100,0 A 100,100 0 0,1 100,0 Z"></path>-->
</clipPath>
</defs>
<g>
<!-- ombre -->
<g fill="url(#grad3)" filter="url(#f4)" >
<rect x="-800" y="-800" width="1600" height="1600" clip-path="url(#masqueOmbre)"/>
</g>
<g fill="url(#grad3)" filter="url(#f4)" >
<rect x="-800" y="-800" width="1600" height="1600" clip-path="url(#masqueDents)"/>
</g>
</g>
<g>
<!-- roue -->
<path d="M 400,0 A 400,400 0 0,0 -400,0 A 400,400 0 0,0 400,0 Z M 200,0 A 200,200 0 0,1 -200,0 A 200,200 0 0,1 200,0 Z" fill="url(#grad2)"/>
<!-- Denture -->
<g filter="url(#f3)">
<rect x="-800" y="-800" width="1600" height="1600" clip-path="url(#masqueDents)" fill="url(#grad1)"/>
</g>
<!-- Centre -->
<use xlink:href="#axeCentre" fill="url(#grad1)" filter="url(#f3)"></use>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment