A Pen by Richard Walker on CodePen.
Created
March 26, 2017 04:19
-
-
Save Qyoom/bb373d8444fa6282daae14122c07ac43 to your computer and use it in GitHub Desktop.
SVG drawing 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" | |
height="200px" viewBox="0 0 600 200" enable-background="new 0 0 600 200" xml:space="preserve"> | |
<defs> | |
<mask id="texture"> | |
<image height="400" width="600" xlink:href="http://img03.deviantart.net/7874/i/2008/122/4/5/crack_texture_by_struckdumb.jpg"> | |
</mask> | |
</defs> | |
<g id="S"> | |
<g class="shapes"> | |
<rect id="square_1_" x="15.085" y="9.272" width="180.861" height="180.861"/> | |
<line x1="15.085" y1="9.272" x2="195.947" y2="190.133"/> | |
<line x1="15.085" y1="190.133" x2="195.947" y2="9.272"/> | |
<circle cx="101.917" cy="157.479" r="30.084"/> | |
<circle cx="111.167" cy="40.229" r="27"/> | |
<circle cx="58.917" cy="185.729" r="4.5"/> | |
<circle cx="150.167" cy="14.979" r="5"/> | |
<circle cx="94.902" cy="53.566" r="46.663"/> | |
<circle cx="104.612" cy="62.129" r="50.986"/> | |
<circle cx="107.478" cy="139.146" r="50.986"/> | |
<circle cx="124.836" cy="143.566" r="46.663"/> | |
<line x1="48.836" y1="190.229" x2="48.836" y2="9.979"/> | |
<line x1="161.836" y1="190.229" x2="161.836" y2="9.979"/> | |
</g> <!-- shapes --> | |
<path class="letter-mask" mask="url(#texture)" d="M66.457,169.279c7.346,11.828,18.612,17.742,33.801,17.742c5.976,0,11.349-1.059,16.122-3.176 | |
c4.771-2.117,8.546-5.332,11.327-9.648c2.781-4.314,4.172-9.543,4.172-15.688c0-6.637-1.555-12.592-4.668-17.863 | |
c-3.113-5.27-7.305-10.086-12.574-14.441c-5.271-4.357-12.306-9.398-21.102-15.126c-10.293-6.639-18.447-12.406-24.464-17.305 | |
c-6.019-4.896-10.998-10.706-14.939-17.429c-3.942-6.723-5.913-14.523-5.913-23.405c0-10.29,2.614-18.942,7.843-25.957 | |
c5.229-7.013,12.158-12.22,20.791-15.624c8.631-3.402,18.134-5.104,28.51-5.104c6.141,0,11.473,0.457,15.997,1.369 | |
c4.523,0.914,8.297,2.055,11.328,3.424s6.328,3.093,9.898,5.166c4.066,2.408,6.93,3.61,8.59,3.61c1.574,0,2.781-0.891,3.609-2.676 | |
c0.828-1.784,1.496-4.626,1.992-8.528h5.852c-0.828,11.372-1.246,30.75-1.246,58.14h-5.848 | |
c-0.582-9.213-2.637-17.969-6.164-26.269c-3.527-8.299-8.465-15.043-14.816-20.23c-6.348-5.187-13.798-7.781-22.346-7.781 | |
c-5.396,0-10.229,1.039-14.504,3.112c-4.275,2.075-7.594,5.085-9.959,9.026c-2.365,3.942-3.549,8.527-3.549,13.756 | |
c0,8.466,2.531,15.396,7.595,20.791c5.062,5.396,11.659,10.853,19.795,16.371c8.133,5.521,13.612,9.234,16.433,11.143 | |
c9.961,6.641,17.844,12.408,23.656,17.305c5.809,4.898,10.539,10.625,14.191,17.181c3.652,6.557,5.477,14.15,5.477,22.781 | |
c0,10.873-2.82,20.045-8.465,27.514s-13.238,13.051-22.781,16.744c-9.547,3.693-20.213,5.541-31.997,5.541 | |
c-9.545,0-17.45-0.852-23.716-2.553c-6.268-1.701-12.057-4.004-17.367-6.91c-3.653-2.406-6.517-3.611-8.591-3.611 | |
c-1.577,0-2.781,0.895-3.61,2.678c-0.83,1.787-1.493,4.627-1.991,8.529h-5.852c0.663-10.625,0.996-33.572,0.996-68.846h5.852 | |
C54.898,142.037,59.112,157.453,66.457,169.279z"/> | |
<path class="letter" d="M66.457,169.279c7.346,11.828,18.612,17.742,33.801,17.742c5.976,0,11.349-1.059,16.122-3.176 | |
c4.771-2.117,8.546-5.332,11.327-9.648c2.781-4.314,4.172-9.543,4.172-15.688c0-6.637-1.555-12.592-4.668-17.863 | |
c-3.113-5.27-7.305-10.086-12.574-14.441c-5.271-4.357-12.306-9.398-21.102-15.126c-10.293-6.639-18.447-12.406-24.464-17.305 | |
c-6.019-4.896-10.998-10.706-14.939-17.429c-3.942-6.723-5.913-14.523-5.913-23.405c0-10.29,2.614-18.942,7.843-25.957 | |
c5.229-7.013,12.158-12.22,20.791-15.624c8.631-3.402,18.134-5.104,28.51-5.104c6.141,0,11.473,0.457,15.997,1.369 | |
c4.523,0.914,8.297,2.055,11.328,3.424s6.328,3.093,9.898,5.166c4.066,2.408,6.93,3.61,8.59,3.61c1.574,0,2.781-0.891,3.609-2.676 | |
c0.828-1.784,1.496-4.626,1.992-8.528h5.852c-0.828,11.372-1.246,30.75-1.246,58.14h-5.848 | |
c-0.582-9.213-2.637-17.969-6.164-26.269c-3.527-8.299-8.465-15.043-14.816-20.23c-6.348-5.187-13.798-7.781-22.346-7.781 | |
c-5.396,0-10.229,1.039-14.504,3.112c-4.275,2.075-7.594,5.085-9.959,9.026c-2.365,3.942-3.549,8.527-3.549,13.756 | |
c0,8.466,2.531,15.396,7.595,20.791c5.062,5.396,11.659,10.853,19.795,16.371c8.133,5.521,13.612,9.234,16.433,11.143 | |
c9.961,6.641,17.844,12.408,23.656,17.305c5.809,4.898,10.539,10.625,14.191,17.181c3.652,6.557,5.477,14.15,5.477,22.781 | |
c0,10.873-2.82,20.045-8.465,27.514s-13.238,13.051-22.781,16.744c-9.547,3.693-20.213,5.541-31.997,5.541 | |
c-9.545,0-17.45-0.852-23.716-2.553c-6.268-1.701-12.057-4.004-17.367-6.91c-3.653-2.406-6.517-3.611-8.591-3.611 | |
c-1.577,0-2.781,0.895-3.61,2.678c-0.83,1.787-1.493,4.627-1.991,8.529h-5.852c0.663-10.625,0.996-33.572,0.996-68.846h5.852 | |
C54.898,142.037,59.112,157.453,66.457,169.279z"/> | |
</g> <!-- S --> | |
<g id="V"> | |
<g class="shapes"> | |
<rect id="square_3_" x="206.301" y="9.272" width="180.861" height="180.861"/> | |
<line x1="206.301" y1="190.133" x2="387.162" y2="9.272"/> | |
<line x1="387.162" y1="190.133" x2="206.301" y2="9.272"/> | |
<circle cx="277.5" cy="25.225" r="9"/> | |
<path d="M320.753,33.046 | |
c0,9.275,7.52,16.789,16.789,16.789c9.271,0,16.792-7.514,16.792-16.789c0-9.268-7.52-16.785-16.792-16.785 | |
C328.273,16.261,320.753,23.779,320.753,33.046z"/> | |
<circle cx="296.837" cy="100.22" r="90.325"/> | |
<circle cx="206.302" cy="30.954" r="15.974"/> | |
<path d="M435.277,47.346 | |
c0,19.874-16.115,35.985-35.984,35.985c-19.875,0-35.986-16.111-35.986-35.985s16.111-35.983,35.986-35.983 | |
C419.162,11.363,435.277,27.472,435.277,47.346z"/> | |
</g> <!-- shapes --> | |
<path class="letter-mask" mask="url(#texture)" d="M364.883,10.363c7.801,0,14.275-0.249,19.422-0.747v5.104c-4.232,1.661-8.426,4.917-12.574,9.772 | |
c-4.15,4.855-7.803,11.724-10.955,20.604l-53.782,145.535c-1.91-0.168-4.898-0.25-8.964-0.25c-3.902,0-6.766,0.082-8.59,0.25 | |
L224.329,31.029c-2.159-5.644-4.668-9.73-7.531-12.263c-2.864-2.531-5.706-3.879-8.528-4.046V9.616 | |
c10.209,0.498,23.156,0.747,38.843,0.747c17.346,0,30.252-0.249,38.718-0.747v5.104c-6.393,0.249-10.978,1.017-13.757,2.303 | |
c-2.782,1.288-4.171,3.673-4.171,7.158c0,2.657,1.037,6.642,3.112,11.952l44.943,114.162l31.373-84.532 | |
c4.73-13.362,7.095-23.736,7.095-31.124c0-6.805-1.805-11.765-5.416-14.877c-3.609-3.112-8.943-4.793-15.998-5.042V9.616 | |
C344.467,10.114,355.09,10.363,364.883,10.363z"/> | |
<path class="letter" d="M364.883,10.363c7.801,0,14.275-0.249,19.422-0.747v5.104c-4.232,1.661-8.426,4.917-12.574,9.772 | |
c-4.15,4.855-7.803,11.724-10.955,20.604l-53.782,145.535c-1.91-0.168-4.898-0.25-8.964-0.25c-3.902,0-6.766,0.082-8.59,0.25 | |
L224.329,31.029c-2.159-5.644-4.668-9.73-7.531-12.263c-2.864-2.531-5.706-3.879-8.528-4.046V9.616 | |
c10.209,0.498,23.156,0.747,38.843,0.747c17.346,0,30.252-0.249,38.718-0.747v5.104c-6.393,0.249-10.978,1.017-13.757,2.303 | |
c-2.782,1.288-4.171,3.673-4.171,7.158c0,2.657,1.037,6.642,3.112,11.952l44.943,114.162l31.373-84.532 | |
c4.73-13.362,7.095-23.736,7.095-31.124c0-6.805-1.805-11.765-5.416-14.877c-3.609-3.112-8.943-4.793-15.998-5.042V9.616 | |
C344.467,10.114,355.09,10.363,364.883,10.363z"/> | |
</g> <!-- V --> | |
<g id="G"> | |
<g class="shapes"> | |
<rect id="shapes_2_" x="397.207" y="9.272" width="180.861" height="180.861"/> | |
<line x1="397.207" y1="190.133" x2="578.068" y2="9.272"/> | |
<line x1="397.207" y1="9.272" x2="578.068" y2="190.133"/> | |
<circle cx="487.12" cy="100.22" r="90.948"/> | |
<circle cx="502.83" cy="63.559" r="50.666"/> | |
<circle cx="549.83" cy="20.559" r="4.666"/> | |
<circle cx="549.83" cy="181.893" r="6.332"/> | |
<circle cx="573.164" cy="126.557" r="8.666"/> | |
<circle cx="509.164" cy="132.225" r="12.666"/> | |
<line x1="578.068" y1="113.034" x2="397.207" y2="113.034"/> | |
<line x1="562.498" y1="9.272" x2="562.498" y2="190.133"/> | |
<circle cx="497.604" cy="150.346" r="37.473"/> | |
</g> <!-- shapes --> | |
<path class="letter-mask" mask="url(#texture)" d="M556.672,180.174c-1.246-3.07-2.988-4.605-5.23-4.605c-2.82,0-7.43,1.785-13.816,5.352 | |
c-14.777,8.551-28.719,12.824-41.832,12.824c-19.588,0-36.188-3.631-49.799-10.895c-13.613-7.262-23.883-17.76-30.812-31.496 | |
s-10.395-30.23-10.395-49.487c0-19.005,3.922-35.75,11.766-50.234c7.844-14.481,18.754-25.708,32.742-33.676 | |
c13.984-7.968,29.898-11.951,47.742-11.951c10.459,0,19.318,1.432,26.58,4.295s14.379,6.952,21.352,12.263 | |
c2.074,1.578,3.777,2.365,5.105,2.365c1.742,0,3.109-1.202,4.105-3.61c0.996-2.406,1.785-6.307,2.367-11.702h5.852 | |
c-0.664,11.537-0.996,32.119-0.996,61.749h-5.977c-1.246-11.453-3.195-20.769-5.852-27.949 | |
c-2.656-7.178-7.055-13.258-13.195-18.238c-4.066-3.9-9.09-6.95-15.066-9.15c-5.973-2.198-12.074-3.299-18.299-3.299 | |
c-11.871,0-21.746,4.046-29.629,12.139c-7.887,8.092-13.717,18.779-17.492,32.057c-3.777,13.28-5.664,27.763-5.664,43.449 | |
c0,58.844,16.309,88.266,48.926,88.266c7.385,0,13.404-1.699,18.053-5.105c2.238-1.492,3.816-3.277,4.73-5.352 | |
c0.91-2.074,1.367-4.73,1.367-7.969v-24.898c0-7.969-0.664-13.797-1.992-17.49s-3.715-6.225-7.156-7.596 | |
c-3.445-1.369-8.945-2.219-16.496-2.551v-5.105c9.793,0.582,24.316,0.872,43.574,0.872c15.688,0,27.055-0.29,34.109-0.872v5.105 | |
c-3.484,0.332-5.973,1.018-7.469,2.053c-1.492,1.039-2.531,2.988-3.113,5.852s-0.871,7.533-0.871,14.006v50.545h-5.102 | |
C558.621,186.564,557.914,183.244,556.672,180.174z"/> | |
<path class="letter" d="M556.672,180.174c-1.246-3.07-2.988-4.605-5.23-4.605c-2.82,0-7.43,1.785-13.816,5.352 | |
c-14.777,8.551-28.719,12.824-41.832,12.824c-19.588,0-36.188-3.631-49.799-10.895c-13.613-7.262-23.883-17.76-30.812-31.496 | |
s-10.395-30.23-10.395-49.487c0-19.005,3.922-35.75,11.766-50.234c7.844-14.481,18.754-25.708,32.742-33.676 | |
c13.984-7.968,29.898-11.951,47.742-11.951c10.459,0,19.318,1.432,26.58,4.295s14.379,6.952,21.352,12.263 | |
c2.074,1.578,3.777,2.365,5.105,2.365c1.742,0,3.109-1.202,4.105-3.61c0.996-2.406,1.785-6.307,2.367-11.702h5.852 | |
c-0.664,11.537-0.996,32.119-0.996,61.749h-5.977c-1.246-11.453-3.195-20.769-5.852-27.949 | |
c-2.656-7.178-7.055-13.258-13.195-18.238c-4.066-3.9-9.09-6.95-15.066-9.15c-5.973-2.198-12.074-3.299-18.299-3.299 | |
c-11.871,0-21.746,4.046-29.629,12.139c-7.887,8.092-13.717,18.779-17.492,32.057c-3.777,13.28-5.664,27.763-5.664,43.449 | |
c0,58.844,16.309,88.266,48.926,88.266c7.385,0,13.404-1.699,18.053-5.105c2.238-1.492,3.816-3.277,4.73-5.352 | |
c0.91-2.074,1.367-4.73,1.367-7.969v-24.898c0-7.969-0.664-13.797-1.992-17.49s-3.715-6.225-7.156-7.596 | |
c-3.445-1.369-8.945-2.219-16.496-2.551v-5.105c9.793,0.582,24.316,0.872,43.574,0.872c15.688,0,27.055-0.29,34.109-0.872v5.105 | |
c-3.484,0.332-5.973,1.018-7.469,2.053c-1.492,1.039-2.531,2.988-3.113,5.852s-0.871,7.533-0.871,14.006v50.545h-5.102 | |
C558.621,186.564,557.914,183.244,556.672,180.174z"/> | |
</g> <!-- G --> | |
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
svg { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
margin: auto; | |
} | |
.letter { | |
fill: none; | |
stroke: none; | |
} | |
.letter-mask { | |
fill: darkGoldenRod; | |
opacity: 0; | |
animation-name: fade; | |
animation-duration: 5s; | |
animation-delay: 28s; | |
animation-fill-mode: forwards; | |
} | |
#S .shapes { | |
fill: none; | |
stroke: #00AEEF; | |
stroke-width: 1.5; | |
animation-name: draw; | |
stroke-dasharray: 725; | |
stroke-dashoffset: -725; | |
animation-direction: forward; | |
animation-duration: 5s; | |
animation-iteration-count: 1; | |
animation-fill-mode: forwards; | |
animation-timing-function: ease-out; | |
} | |
#S .letter { | |
fill: none; | |
stroke: red; | |
stroke-width: 2.5; | |
animation-name: draw; | |
stroke-dasharray: 1000; | |
stroke-dashoffset: -1000; | |
animation-direction: forward; | |
animation-duration: 5s; | |
animation-iteration-count: 1; | |
animation-fill-mode: forwards; | |
animation-timing-function: ease-in-out; | |
animation-delay: 5s; | |
} | |
#V .shapes { | |
fill: none; | |
stroke: #00AEEF; | |
stroke-width: 1.5; | |
animation-name: draw; | |
stroke-dasharray: 725; | |
stroke-dashoffset: -725; | |
animation-direction: forward; | |
animation-duration: 5s; | |
animation-iteration-count: 1; | |
animation-fill-mode: forwards; | |
animation-timing-function: ease-out; | |
animation-delay: 10s; | |
} | |
#V .letter { | |
fill: none; | |
stroke: red; | |
stroke-width: 2.5; | |
animation-name: draw; | |
stroke-dasharray: 1000; | |
stroke-dashoffset: -1000; | |
animation-direction: forward; | |
animation-duration: 5s; | |
animation-iteration-count: 1; | |
animation-fill-mode: forwards; | |
animation-timing-function: ease-in-out; | |
animation-delay: 14s; | |
} | |
#G .shapes { | |
fill: none; | |
stroke: #00AEEF; | |
stroke-width: 1.5; | |
animation-name: draw; | |
stroke-dasharray: 725; | |
stroke-dashoffset: -725; | |
animation-direction: forward; | |
animation-duration: 5s; | |
animation-iteration-count: 1; | |
animation-fill-mode: forwards; | |
animation-timing-function: ease-out; | |
animation-delay: 19s; | |
} | |
#G .letter { | |
fill: none; | |
stroke: red; | |
stroke-width: 2.5; | |
animation-name: draw; | |
stroke-dasharray: 1200; | |
stroke-dashoffset: -1200; | |
animation-direction: forward; | |
animation-duration: 5s; | |
animation-iteration-count: 1; | |
animation-fill-mode: forwards; | |
animation-timing-function: ease-in-out; | |
animation-delay: 23s; | |
} | |
@keyframes draw { | |
to { | |
stroke-dashoffset: 0; | |
} | |
} | |
@keyframes fade { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment